Skip to main content

Workflows

After connecting the MCP server, ask your assistant to perform these tasks in plain language. Client-specific prompt commands are listed in Tool Reference.

Set up a project​

Set up Bezel in this project.

The assistant uses the setup-project tool to inspect your repo and complete missing setup steps. See Quick Start using MCP for the full flow, including the separate Crystal choice.

Keep your tokens in sync​

Sync my Bezel tokens.

The assistant reads projectId and version from bezel.json, fetches the token file, writes design-tokens.json, and runs bezel build. A missing version means latest.

If the repo is not configured yet, the assistant guides you through setup first.

Switch projects​

Switch this repo to my Bezel project named Acme Design System.

The assistant resolves the name, confirms the project, and updates bezel.json before syncing its tokens. If several projects match, it asks which one you mean.

Pin a published version​

Update my tokens to version 1.4.0.

The assistant sets version in bezel.json to that published release. Later syncs use the same release until you change it. If the version is unavailable, it shows the available versions for you to choose from.

Build a component with real tokens​

Build a pricing card component. Use the Bezel MCP to look up our card and spacing tokens first, and reference the CSS variables by name, and don't invent values.

The assistant can use get-token-bundle to retrieve tokens for a card, then reference those tokens in the component.

Bundles exist for theming-setup, button, card, input, form, auth-page, and dashboard-shell.

Work with themes​

What contexts does my Acme project have? Show me every semantic color token that changes between default and dark.

The agent reads your context groups, then queries tokens per context. Useful for spotting a token you meant to override in dark mode but never did.

Set up a framework​

Generate a Tailwind v4 theme config from my Acme tokens.

Also handles shadcn/ui and Mantine. Ask for a specific version, since Tailwind v3 and v4 differ, and so do shadcn v0 and v2.

Check accessibility before you ship​

Check the contrast of our semantic text color on our surface color. If it fails AA, suggest the nearest passing value from our palette.

Contrast math is deterministic here: the server computes the ratio and grade rather than the model estimating it. Pair it with design-review for a broader pass:

Review this login form against our design system. Here's the markup and the token paths I used.

Recall earlier decisions​

Search our Bezel chat history for anything about the neutral ramp.

Handy when you're picking up a project after a few weeks, or inheriting someone else's.

Getting better answers​

Name the project. With several projects, say which one. The agent resolves the name to an ID once and reuses it. In a repo with projectId in bezel.json, you don't have to: the agent reads it from there.

Say "use the Bezel MCP." This makes it clear which tools and token source the assistant should use.

Ask for token paths in the output. "Cite the token path for each value you use" keeps the result traceable, and makes it obvious when something was invented.

Don't ask for the whole project in chat. Anything you actually need is faster through the manifest and a targeted query. See Manifest first. The full file belongs on disk, which is what sync-project is for.