tesserai — Claude Code MCP server for design systems
tesserai gives coding agents access to a project's design tokens, components, and guidelines. Use it to inspect how the app follows its system and make changes within it.
claude mcp add tesserai -- npx -y @tesserai/cliWhat tesserai does
The CLI installs a design system into a project as components, theme CSS, and the tesserai/design-system.json manifest. Its init command also adds the CLI as a dev dependency and registers the MCP server for Claude Code; Cursor projects get an entry in .cursor/mcp.json. The agent can inspect the system outline, tokens, components, contrast checks, and design guidance.
Use sync to pull a newer system while keeping edited files and writing updated versions beside them. The --dry-run option previews the plan. scan reports component usage, repeated style overrides, hand-edited generated files, and values that bypass the system; --fix replaces exact matches. Node.js 22 or newer and Tailwind CSS 4 are required, so projects missing either cannot use the CLI as described.
For manual setup in Claude Code, run claude mcp add tesserai -- npx -y @tesserai/cli mcp. The CLI can also generate a Storybook with accessibility checks and export the system for other stacks, including SCSS, MUI, and Swift.
What it helps with
- give an agent access to project design tokens
- find repeated component style overrides
- update a system while keeping edited files
- create a component Storybook with accessibility checks
Example prompts for the agent
- Show me the design tokens and components available in this project.
- Find repeated component overrides and describe what they change.
- Update the design system while keeping my edited files.
How to install tesserai
Platform CLI
claude mcp add tesserai -- npx -y @tesserai/cliPlatform CLI
codex mcp add cli -- npx -y @tesserai/cliConfig file
{
"mcpServers": {
"cli": {
"command": "npx",
"args": [
"-y",
"@tesserai/cli"
]
}
}
}Config file
{
"servers": {
"cli": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@tesserai/cli"
]
}
}
}Platform CLI
gemini mcp add cli npx -y @tesserai/cliStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about tesserai
How do I install tesserai in Claude Code?
Run claude mcp add tesserai -- npx -y @tesserai/cli, then claude mcp add cli -- npx -y @tesserai/cli.
What does tesserai do?
It gives coding agents access to a project's design tokens, components, contrast checks, and guidelines. Its CLI can install, update, and inspect the system.
What does tesserai require?
It requires Node.js 22 or newer and Tailwind CSS 4. React works with Base UI, Radix, or React Aria; Vue uses Reka UI, and Svelte 5 uses Bits UI.
