Make it yours
The app's name and mark live in two environment variables and one file in public/ — except the browser tab, which is edited in index.html on disk because the head is parsed before any environment is read.
Three surfaces carry the app's identity: the browser tab, the top bar, and the sign-in screen the
auth module draws. Two of them read the environment. The tab cannot — VITE_* values are baked
into the bundle, and the head is parsed before a line of that bundle runs — so the tab is written
into index.html on disk, once, while the app is being made.
That split is the whole of this page. Everything else is one name, one image file, and a rebuild.
Answer it while the app is being made
The wizard asks twice, near the end, before anything is written:
npx @chatfuel/wizard --app-name "Acme Concierge" --logo ./acme-mark.svgThe name is 1–60 characters on one line, because it has to fit a browser tab and a top bar. Leave
it out and you are asked, with the Chatfuel workspace's title as the default and Chatfuel App
behind that.
The logo is a path to a file a browser can draw as both an inline mark and a tab icon: .svg,
.png, .jpg, .jpeg, .webp, .gif or .ico, under a megabyte. Anything else is refused —
and refused by the command line, before the token prompt and the workspace lookup, so a mistyped
--logo costs you nothing. At the prompt the same wrong path is re-asked instead, since you are
at a keyboard with the file in front of you.
Pressing Enter at the logo prompt keeps the mark the template ships, which is a real logo rather
than a placeholder — an app nobody branded still looks finished. --yes skips the logo question
altogether, so a non-interactive run gets a mark only from --logo.
Both steps are standalone-only. In --embed mode the surrounding project already has a head, a
public/ and a mark of its own, and none of the three are the wizard's to overwrite.
Read what it wrote
Four writes, in three places:
The image is copied into public/ under the name logo plus its own extension. If your file is
not an SVG, the shipped logo.svg is deleted in the same move — an app has exactly one mark, and
leaving two behind means the next person to look cannot tell which is live.
.env gets the two values the running app reads:
VITE_APP_NAME=Acme Concierge
VITE_APP_LOGO=logo.svgAnd two lines of index.html are rewritten in place. These are the ones the template ships, and
the wizard replaces both — the href, the type and the title text:
<link rel="icon" type="image/svg+xml" href="%BASE_URL%logo.svg" />
<title>Chatfuel App</title>%BASE_URL% rather than /logo.svg: this is the one reference resolved at build time rather than
by the app at runtime, so it still points at the right place when the app is
mounted under a sub-path. If either tag is missing the wizard stops and
says the template has drifted, rather than writing an app with no icon.
Change it afterwards
Nothing here is one-way.
| To change | Do this |
|---|---|
| The name | VITE_APP_NAME in .env, and <title> in index.html. |
| The mark | Replace public/logo.svg. That is the whole change — the variable already points at it. |
| The mark, under another name | Put the file in public/, set VITE_APP_LOGO to its file name. An absolute path or a full URL works too and is passed through untouched; a bare file name is resolved against the app's base path. |
| The tab icon | The <link rel="icon"> in index.html, including its type. |
VITE_* values are compiled into the bundle, so a change to either variable needs a rebuild to be
visible. On Vercel that means the project environment rather than your local .env, which is
never uploaded — npm run deploy pushes both, readable in the dashboard, and redeploys.
Look at all three surfaces
npm run devThe tab shows the new title and icon on first paint — reload once if the old favicon is
cached. The top bar shows the mark, with the name beside it above the sm breakpoint and the
mark alone below it, where the nav has collapsed into a hamburger and the pickers need the room.
If you installed the auth module, sign out and look at the sign-in screen: the same name and
mark sit above the card, because a person on that page has no workspace yet to be named after.
A path that points at nothing is the failure worth checking by eye. VITE_APP_LOGO is resolved
into a URL without ever being fetched, so a file that is not in public/ renders as a broken
image rather than an error anywhere. The name is the forgiving one: unset or blank, it falls back
to Chatfuel App. The shield glyph on the sign-in screen appears only when no mark is passed at
all, which in a scaffolded app never happens — that fallback is for an embedding host.
Beyond the name and the mark
Colors, radii, shadows, type and motion are not environment variables — they are the design system, and it lives in your project as source rather than as a package. Every component in it is written against semantic utilities and none of them carries a hardcoded color, so a rebrand is an edit to one token file that moves both themes at once. That is Change how it looks, and the names are on the token reference.
Put the modules in an app you already have
npx @chatfuel/wizard --embed copies a namespaced footprint into your project and wires nothing. The five things you wire, for a Vite host and for a Next.js one, and what a Next.js route handler cannot do.
Turn it into a product other people sign up to
Install the auth module and the app stops being your dashboard: strangers sign up, each gets a Chatfuel bot, and one workspace's plan pays for all of them.