Quick Start using MCP

Pro plans and above

This guide requires a Bezel Pro plan or higher for MCP access.

You'll need Node.js 22.13+, a Bezel project with some tokens in it, and a coding assistant with repository editing and terminal access.

Set up with the MCP server

Run the MCP installer from your project's directory:

npx @bezel-labs/bezel-kit@latest install-mcp

Use the arrow keys to choose Claude Code, Codex, Cursor, VS Code, or another tool.

Then press Enter.

Follow the sign-in instructions. For other tools, the installer shows manual connection steps.

After signing in, open this project in your assistant and ask:

Set up Bezel in this project.

Your assistant will:

Help you choose and confirm your Bezel project.
Install Bezel Kit and configure bezel.json with your chosen output folder.
Fetch your design tokens, generate the files, and connect the CSS and build scripts.
Ask separately whether you want Crystal for live preview.

How would you like to set up Crystal for live preview?

Install Crystal (recommended): available in all builds, including production, without a development flag.
Install Crystal behind a dev flag: available only in development.
Skip Crystal: continue with Bezel Kit only.
Keep existing setup: when Crystal is already configured.

Crystal is installed only after you choose an install option. Both install options restrict incoming live edits to the configured Bezel origin.

Run your app or Storybook and add its URL to Bezel's preview panel. The assistant reports if live preview still needs verification.

Existing setup is preserved, and generated files are verified.

For connection help, see Install Server.

After setup, ask:

Sync my Bezel tokens.

The assistant reads the project and version from bezel.json, fetches the token data, writes design-tokens.json, and runs bezel build.