Skip to content
ChatfuelSDK

What the wizard writes

The tree the wizard leaves on disk, why the design system and the API client are copied in as source, and what that costs you.

Nothing in the project's package.json points back at our repository. That is deliberate, and everything below follows from it: the design system, the API client and the proxy are copied in as source, so nothing we publish can break your app — and an upgrade is a re-run of the wizard or a diff you apply yourself, never npm update.

The tree

index.ts
navGroups.tsx
types.ts
App.tsx
index.css
index.html
vite.config.ts
tsconfig.json
package.json
Dockerfile
CLAUDE.md
.env
.env.example
  • src/modules/<id>/ — one directory per module you picked, each mounting as its own root. index.ts beside them is the registry, generated from what you chose; navGroups.tsx is the sidebar's grouping table, filtered to the same set.
  • src/vendor/ui — the design system, imported as ~ui. src/vendor/api — the typed GraphQL client, imported as ~api. Both aliases are declared in vite.config.ts and tsconfig.json.
  • vendor/chatfuel-proxy — one proxy source tree with three hosts. In development it runs as a Vite plugin inside the dev server; server/entry.ts is the Node HTTP server that also serves the built client; api/chatfuel.ts is the Vercel function behind a rewrite. All three share the request handling, the WebSocket relay and the log scrubber.
  • .env — your Chatfuel token, the workspace id, the app's name and mark. Written with mode 0600, with .env.example beside it as the readable list of what the app takes.
  • .claude/skills/chatfuel-<id>/ (Codex: .agents/skills/chatfuel-<id>/) — one skill per installed module, each carrying that module's operations and the edges of the API behind it. CLAUDE.md (Codex: AGENTS.md) is the instructions file, with each module's handoff note inlined into it.
  • supabase/ — only when you install auth. The migrations for the tenant tables and for cf_my_bot_ids(), the function the proxy's gate asks which bots a session may open.
  • public/logo.svg is the mark VITE_APP_LOGO points at. Replace that one file and the app is marked; point the variable elsewhere to use a different name or an absolute URL.
  • Dockerfile and scripts/deploy-vercel.mjs are the two production paths that ship with the app. Deploy covers both.

Nothing you did not pick

Scaffolding is subtractive. The wizard copies apps/shell whole, deletes the modules you did not choose, regenerates the registry, filters the navigation table and prunes the tsconfig paths that no longer resolve.

So a module you left out leaves no dead import, no commented-out route and no tsconfig path pointing at nothing. What you get is not a template with holes in it — it is a project where the code you did not ask for was never written. Adding one later is a re-run with --embed.

Vendored, not depended on

In our repositoryIn your appImported as
packages/ui/srcsrc/vendor/ui~ui
packages/api-client/srcsrc/vendor/api~api
packages/vite-plugin-proxy/srcvendor/chatfuel-proxyrelative paths

Two rules keep those trees portable, and pnpm validate in our repository enforces both: every internal import is relative, and ~ui may import nothing but react and react-dom. Break either upstream and the tree stops being copyable.

The copy is not quite byte-for-byte: the packages' own unit tests are filtered out, because those tests are ours and shipping them would hand you failing runs for code you did not write.

What it costs you: when we fix something in ~ui, your copy does not change. Re-run the wizard into a scratch directory and diff, or take the patch from the repository. In exchange, a component you disagree with is a file you can edit, and a release of ours cannot break a deployment of yours.

Standalone, or into a project you already have

npx @chatfuel/wizard

The default. You get the tree above: a Vite + React + TypeScript app, its dependencies installed, .env written, skills in place, and npm run dev ready to run.

Next: your first change, or deploy.

On this page