# Guides

> Four procedures end to end — adding a module to an app that exists, writing one of your own, retuning the design system, and mounting the modules inside somebody else's app.

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

A Concepts page explains a decision and a Reference page lists values. A guide is a procedure: it
starts where you are, names every file it touches, and ends with the command or the screen that
proves it worked.

<Cards>
  <Card title="Add a module to an app you already made" href="/docs/guides/add-a-module" description="The wizard's only door into a project that exists is --embed. What it writes, what it never touches, and the four things you finish by hand." />

  <Card title="Write a module of your own" href="/docs/guides/build-a-module" description="A directory, a manifest, a React tree and two registration tables — copied from the smallest module in the repository and checked by the gates." />

  <Card title="Change how it looks" href="/docs/guides/customize-the-design-system" description="One file of tokens moves every component, in both themes. The duplicate-block rule, the two places motion lives, and the edits that generate nothing." />

  <Card title="Put the modules in an app you already have" href="/docs/guides/embed-into-an-existing-app" description="npx @chatfuel/wizard --embed, then five wiring steps for a Vite or a Next.js host — with the token still on the server side." />
</Cards>

Adding a module and embedding into somebody else's app are the same command with different
endings, so read [Add a module](/docs/guides/add-a-module) if the wizard wrote the project and
[Put the modules in an app you already have](/docs/guides/embed-into-an-existing-app) if it did
not.