# Quickstart

> One command, a Chatfuel token, and the app running on your machine.

Page: https://sdk.chatfuel.com/docs/quickstart
Markdown: https://sdk.chatfuel.com/docs/quickstart.md

Node 20.18.1 or newer is the only prerequisite. There is nothing to install first and nothing
to clone — the wizard installs the app's dependencies itself, and offers to install a coding
agent if you do not have one.

<Steps>
  <Step>
    ### Check your Node [#check-your-node]

    ```bash
    node --version
    ```

    Anything below `20.18.1` and the launcher stops before it loads anything, printing the version
    you have and the install command for your platform.
  </Step>

  <Step>
    ### Run the wizard [#run-the-wizard]

    ```bash
    npx @chatfuel/wizard
    ```
  </Step>

  <Step>
    ### Answer the four questions [#answer-the-four-questions]

    **Which modules you want.** Thirteen exist. `core` comes with all of them; the other twelve are
    `livechat`, `contacts`, `deals`, `bookings`, `knowledge-base`, `automations`, `coworker`,
    `flow-builder`, `ads-optimization`, `publishing`, `auth` and `admin` — the same ids `--modules`
    takes. `auth` and `admin` are offered in the picker but never picked for you: both need
    credentials the wizard cannot invent, so a `--yes` run leaves them out unless you name them.

    **A Chatfuel token.** Take one from
    [the token page](https://panel.chatfuel.com/integration/auth/token). The wizard checks it
    against the API before going any further, and writes it to `.env` with mode `0600`.

    **Which workspace the app opens on.** Not which bot. The app lists your workspaces and their
    bots itself at runtime, so a bot you create next month is in the picker without a re-run.

    **What the app is called, and its logo.** The name is the browser tab, the top bar and the
    sign-in screen; the image becomes the tab icon and the mark beside it. `VITE_APP_LOGO` points at
    a file in `public/`, so replacing `logo.svg` later is all a change of mark takes. Skip either
    and the app still ships with a name and a real logo.

    Then it writes the project, installs the dependencies, offers to deploy, and installs one skill
    per module where your coding agent reads them.
  </Step>

  <Step>
    ### Start it [#start-it]

    ```bash
    npm run dev
    ```

    The app is on [localhost:5173](http://localhost:5173).
  </Step>

  <Step>
    ### Check that it works [#check-that-it-works]

    `/` opens the first installed module, with the rest grouped in the sidebar beside it. With
    exactly one module installed there is no sidebar at all.

    In the top bar, a picker listing every workspace the token's account owns and the bots inside
    each. That list is read live from the API, so seeing it is proof the token reached Chatfuel
    through the proxy. No bot is named anywhere in the code.

    Click into a second module and watch the address bar. It reads `/<moduleId>`, and a module with
    more than one screen adds its own segment — `/contacts/fields`, `/bookings/calendar?mode=week`.
    Reload that address: these are real paths, not fragments, and the dev server answers an unknown
    one with `index.html`, so it comes back on the same screen.
  </Step>
</Steps>

<Callout type="info">
  A Chatfuel token can read and change every bot in an account, so it never reaches the browser.
  Calls go to a same-origin `/chatfuel/*` path and the proxy attaches the token server-side.
</Callout>

## Where to go next [#where-to-go-next]

<Cards>
  <Card title="What the wizard writes" href="/docs/what-you-get" description="The tree on disk, and why the design system and the API client are vendored." />

  <Card title="Your first change" href="/docs/first-change" description="Add a view to a module, end to end, and check it in the browser." />

  <Card title="Deploy" href="/docs/deploy" description="Vercel, your own Node server, or the Dockerfile that comes with it." />
</Cards>

Other ways to run the wizard:

```bash
npx @chatfuel/wizard --embed    # add the modules to a project you already have
npx @chatfuel/wizard doctor     # what the wizard can see before it asks anything
npx @chatfuel/wizard auth       # replace the stored Chatfuel token
```