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, your coding agent, your token, the workspace, a name and a logo, and which browser origins may call the proxy.
- 03
It checks the workspace has a plan
A workspace with no subscription has no AI, so the wizard lists the plans, prints a checkout link for the one you pick and waits for it.
- 04
It writes the app
Copies the shell, deletes the modules you did not pick, installs the skills and the dependencies.
- 05
It offers to put it online
A Vercel deploy, a GitHub repository with a secret scan over the history first, and a redeploy on every push.
- 06
It briefs your coding agent
Every module leaves its skill in the directory your agent reads, beside an instructions file about this app.
- 07
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?
│ Inbox, Contacts, Deals, AI Agent
│
◇ Where should the module skills be installed?
│ Into the scaffolded project (.claude/skills/)
│
◇ Paste your Chatfuel token:
│ ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
│ Authenticated as you@example.com
│
◇ Which Chatfuel workspace should the app open?
│ Acme
│
◇ What is this app called?
│ Acme Desk
│
◇ Which browser origins may call the proxy?
│ Only this app's own origin (recommended)
│
◇ Where should the app be created?
│ ./acme-desk
│
│ Skills installed: chatfuel-core, chatfuel-livechat, chatfuel-contacts,
│ chatfuel-deals, chatfuel-automations, chatfuel-update
│ Dependencies installed with npm
│
◇ Deploy this app to Vercel now? (free tier is enough to start)
│ Yes — Live at https://acme-desk.vercel.app
│
◇ Put this app on GitHub?
│ Yes — https://github.com/you/acme-desk
│
◇ 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 nine 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
operations/ the documents it is generated from
generated/ the client those documents produce
schema/ the schema both of them are built against
config/ defaults, and app.ts for your own overrides
operationDocs.ts the operations this app may send
App.tsx
codegen.ts npm run codegen, after you edit a document
scripts/codegen/ the generator it runs
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
chatfuel-update/ how this app updates itself later
…
CLAUDE.md routes, skills and secrets, written for this app
.chatfuel/lock.json what every file was made of, and where it came from
vercel.json
Dockerfile
.env mode 0600, and gitignored
.env.example
.vercelignore
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 an upgrade is a command that reads a lock file, 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.