# 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.

Page: https://sdk.chatfuel.com/docs/what-you-get
Markdown: https://sdk.chatfuel.com/docs/what-you-get.md

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 [#the-tree]

<Files>
  <Folder name="src">
    <Folder name="modules">
      <File name="index.ts" />

      <File name="navGroups.tsx" />

      <File name="types.ts" />

      <Folder name="contacts" />

      <Folder name="deals" />
    </Folder>

    <Folder name="vendor">
      <Folder name="ui" />

      <Folder name="api" />
    </Folder>

    <File name="App.tsx" />

    <File name="index.css" />
  </Folder>

  <Folder name="vendor">
    <Folder name="chatfuel-proxy" />
  </Folder>

  <Folder name="server">
    <File name="entry.ts" />
  </Folder>

  <Folder name="api">
    <File name="chatfuel.ts" />
  </Folder>

  <Folder name="supabase" />

  <Folder name=".claude">
    <Folder name="skills" />
  </Folder>

  <Folder name="public">
    <File name="logo.svg" />
  </Folder>

  <Folder name="scripts">
    <File name="deploy-vercel.mjs" />
  </Folder>

  <File name="index.html" />

  <File name="vite.config.ts" />

  <File name="tsconfig.json" />

  <File name="package.json" />

  <File name="Dockerfile" />

  <File name="CLAUDE.md" />

  <File name=".env" />

  <File name=".env.example" />
</Files>

* **`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&#x60;. &#x2A;*`src/vendor/api`** — the typed
  GraphQL client, imported as `~api`. Both aliases are declared in `vite.config.ts` and
  `tsconfig.json`.
* **`vendor/chatfuel-proxy`*&#x2A; — one proxy source tree with three hosts. In development it runs
  as a Vite plugin inside the dev server; &#x2A;*`server/entry.ts`*&#x2A; is the Node HTTP server that
  also serves the built client; &#x2A;*`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>/&#x60;) — one skill per
  installed module, each carrying that module's operations and the edges of the API behind it.
  &#x2A;*`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](/docs/deploy) covers both.

## Nothing you did not pick [#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 [#vendored-not-depended-on]

| In our repository                | In your app             | Imported as    |
| -------------------------------- | ----------------------- | -------------- |
| `packages/ui/src`                | `src/vendor/ui`         | `~ui`          |
| `packages/api-client/src`        | `src/vendor/api`        | `~api`         |
| `packages/vite-plugin-proxy/src` | `vendor/chatfuel-proxy` | relative 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 [#standalone-or-into-a-project-you-already-have]

<Tabs items="['A new app', 'An existing app']">
  <Tab value="A new app">
    ```bash
    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.
  </Tab>

  <Tab value="An existing app">
    ```bash
    npx @chatfuel/wizard --embed
    ```

    The footprint is one directory — `src/chatfuel/` — holding the module contract, the modules you
    picked, the same three vendored trees and a `client.ts` that builds a proxy-mode client. Nothing
    in the host is wired: the wizard copies the footprint and installs the skills, and the embed
    playbook in `chatfuel-core` walks your coding agent through the rest.

    That rest is short and specific. Add `~ui` and `~api` to the host's TypeScript `paths` and to
    its bundler config, add the runtime dependencies the wizard printed, and mount the proxy. An
    existing `.env` is appended to rather than replaced — only keys the host does not already define
    are added, and a key that exists with a different value is reported instead of overwritten.
  </Tab>
</Tabs>

Next: [your first change](/docs/first-change), or [deploy](/docs/deploy).