How it works
One command, a handful of questions, and an app of your own wired to your bot. The code is on your disk with no dependency on us, and your coding agent already knows it.
What one run does
From an empty directory to an app open in your browser.
- 01
One command
npx @chatfuel/wizard.
- 02
It asks what you want
Modules, coding agent, your token, the workspace, a name and a logo.
- 03
It writes the app
Copies the shell, deletes the modules you did not pick, installs the dependencies.
- 04
It puts it online
A Vercel deploy, a GitHub repository, and a redeploy on every push.
- 05
It briefs your coding agent
Every module leaves its skill in the directory your agent actually reads.
- 06
You run it
npm run dev. About three minutes, most of it installing dependencies.
The run
A new app, four modules, deployed and handed to Claude Code at the end.
$ npx @chatfuel/wizard
┌ chatfuel-wizard
│
◇ Which modules do you want?
│ Live Chat Inbox, Contacts / CRM, Deals, AI Automations
│
◇ Paste your Chatfuel token:
│ ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
│ Authenticated as you@example.com
│
◇ Which Chatfuel workspace should the app open?
│ Acme
│
◇ What is this app called?
│ Acme Desk
│
◇ Where should the app be created?
│ ./acme-desk
│
│ Dependencies installed with npm
│ Skills installed: chatfuel-core, chatfuel-livechat, chatfuel-contacts, chatfuel-deals, chatfuel-automations
│
◇ Deploy this app to Vercel now? (free tier is enough to start)
│ Yes — Live at https://acme-desk.vercel.app
│
◇ Launch Claude Code in the new app now?
│ Yes
│
└ Handing off to Claude Code…What lands in your project
The four modules from the run above, and no trace of the eight that were not picked.
src/
modules/
livechat/ one directory per module you picked
contacts/
deals/
automations/
index.ts regenerated for exactly these four
navGroups.tsx the navigation table, filtered to them
vendor/
ui/ the design system, imported as ~ui
api/ the typed Chatfuel client, imported as ~api
App.tsx
vendor/chatfuel-proxy/ the proxy: a Vite plugin in dev, and the two below
server/entry.ts the same proxy on your own server
api/chatfuel.ts the same proxy on Vercel
.claude/skills/
chatfuel-core/
chatfuel-contacts/ one skill per module, plus core
…
CLAUDE.md routes, skills and secrets, written for this app
vercel.json
Dockerfile
.env mode 0600, and gitignored
package.jsonHow the app is put together
The token never reaches the browser
A token can read and change every bot in an account, so it stays on the server. Calls go to your app’s own origin and the proxy attaches it there.
The same proxy runs everywhere
One source tree, three hosts: a Vite plugin in development, server/entry.ts on your own server, api/chatfuel.ts on Vercel. What worked in dev behaves the same wherever you put it.
Vendored, not depended on
The design system and the API client are copied in as source, so a component you disagree with is a file you can edit. Nothing in your package.json points back at us — and the cost is that upgrades are a re-run or a diff, never npm update.
A module is a directory
A manifest, a React tree, an agent skill and a handoff note, in one place. No state library, no plugin registry, and modules do not import each other except through a declared requirement.
Your coding agent carries on
The wizard writes the app; the agent finishes the setup and everything after it.
One skill per module
The operations that surface uses, the shapes they return, and the edges we hit getting there.
An instructions file about this app
CLAUDE.md or AGENTS.md, describing the app you have rather than a template.
A checklist that finishes the setup
A setup checklist the agent can execute, and the last prompt opens the session on it.
FAQs
A Vite + React + TypeScript app you own outright. Each module you picked is a directory under src/modules; the design system and the API client are vendored as source under src/vendor; a proxy keeps your Chatfuel token server-side. Plus the agent skills, an .env written mode 0600, and a README for the project itself.