Chatfuel

Coding Agents and Skills in a Chatfuel Wizard App

The Chatfuel wizard installs a skill per module for Claude Code or Codex, writes CLAUDE.md or AGENTS.md and hands the app to your agent with a setup checklist.

Last updated on

The Chatfuel wizard ends by handing the new app to a coding agent. It installs one skill per module you picked, writes the instructions file the agent reads at the start of every session, and offers to launch the agent in the project with a setup checklist. Claude Code and Codex CLI are supported. The skills carry what the agent needs to change the app safely: the module's GraphQL operations, how that part of the Public API behaves and the rules the app's proxy enforces.

Which coding agents the wizard supports

The wizard looks for Claude Code (claude) and Codex CLI (codex) on your PATH:

  • One agent found: the wizard uses it.
  • Both found: the wizard asks which one continues the work. --agent claude or --agent codex answers ahead of time.
  • None found: the wizard offers to install one with npm i -g @anthropic-ai/claude-code or npm i -g @openai/codex.

Only one layout is written, for the agent you picked:

  • Claude Code: skills in .claude/skills/, instructions in CLAUDE.md.
  • Codex CLI: skills in .agents/skills/, instructions in AGENTS.md, which spells out the full path to each skill.

What the skills contain

Each module installs a skill named chatfuel-<id>, such as chatfuel-contacts or chatfuel-bookings. A skill holds that module's structure, the GraphQL operations it uses, references on the parts of the Public API behind it and playbooks for common changes. Two skills come with every app, whatever you picked:

  • chatfuel-core: authentication, the proxy rules, HTTP and WebSocket transport, pagination, the Chatfuel GraphQL schema and a validator for new operations.
  • chatfuel-update: how to read what npx @chatfuel/wizard update reports and resolve the files you changed that the update also changes.

The wizard asks where to install the skills: into the project, or into your home directory, so one copy serves every app you create. Wizard modules lists the modules each skill belongs to.

What the instructions file and the setup checklist say

The wizard writes two files for the agent, with different jobs:

  • The instructions file (CLAUDE.md or AGENTS.md) is read in every session and stays short: the app's module routes, the skills to read before touching the API, which .env keys are secrets with the rule "NEVER print or commit", and how to resume the setup.
  • The setup checklist is read once, at the handoff: what to tell you in the first message, a tour of the installed modules with links into the app, the Chatfuel permissions each module needs, and each module's first tasks. For Claude Code it is the /chatfuel:finish-setup command; for Codex it is the chatfuel-finish-setup skill.

When you accept the launch offer at the end of the run, the wizard starts the agent in the new project with the checklist. The agent starts the dev server itself and greets you with what was built. To resume later, run claude /chatfuel:finish-setup in the app directory, or ask Codex to use the chatfuel-finish-setup skill.

With --embed, your existing instructions file is not replaced. The wizard writes its part between the markers <!-- chatfuel:begin --> and <!-- chatfuel:end -->, and a re-run rewrites only that part.

Prompts that work with a wizard app

Name the module and the result you want; the agent finds the matching skill. These prompts come from the first tasks in the module handoff notes:

  • "Add search to the live chat list, and make the conversation list query and its live subscription use the same filter." Answered by chatfuel-livechat.
  • "Add a status colour legend to the bookings calendar toolbar." Answered by chatfuel-bookings.
  • "Add a module called notes with a list screen and an archive screen." Answered by chatfuel-core, which describes where a module lives and what it may import.
  • "Change the accent colours of the app and nothing else." Answered by chatfuel-core: the colours live in one design token file.
  • "Add file attachments to the live chat composer." Answered by chatfuel-livechat, with chatfuel-core for the upload route.

How the agent adds a new API operation

The app's proxy forwards only the GraphQL documents the app was built with and refuses anything else, so a new or changed operation takes three steps. Mention them in your prompt and the agent does all three:

  1. Start from the module's operations in its skill and write the new document.
  2. Validate it against the Chatfuel schema with the validator in chatfuel-core.
  3. Add it to the module's operations file in the app and run npm run codegen, which types it and registers it with the proxy.

Production introspection is off, so the schema inside chatfuel-core is the one the agent works from. The Public API overview and the reference pages in this section describe the same operations.

How to let the agent work with your bots too

The skills teach the agent the code. To let the same agent read and change your Chatfuel bots while it builds, for example to check a contact or a setting, connect the Chatfuel MCP server: Claude Code or Codex.

On this page