tesserai

Name: tesserai
Author: tesserai.design

Local

tesserai.designDeveloper Tools0Updated 5w ago

Repository Visit website

About tesserai

@tesserai/cli installs a design system into a project and keeps it synchronized from the terminal. It also gives coding agents access to the system's tokens, components, contrast checks, and guidelines through MCP.

Key features

01Install design-system components and theme CSS
02Sync updates while preserving edited files
03Scan component use and system overrides
04Export systems to other stacks
05Generate component Storybook with accessibility checks

Use cases

01Add a shared design system to a project
02Review unused components and styling overrides
03Give a coding agent project design rules

MCP support

The CLI serves the installed design system to coding agents over stdio and can register the server during initialization. Agents can read tokens, components, contrast checks, and guidelines, and apply changes within the system.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config

{
  "mcpServers": {
    "design-tesserai-tesserai": {
      "command": "npx",
      "args": [
        "-y",
        "@tesserai/cli"
      ]
    }
  }
}

Run commandnpx -y @tesserai/cli

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages

npm@tesserai/cli0.2.2stdio

Tools

Saved tool list · updated 3w ago

Parameter	Type	Required	Description
into	string	No	A system imported before (its link, /systems/<id>): update it with what the code changed, for the person to review, instead of making a new one
name	string	No	The system's name (default: from package.json)
notes	array	No	What the person should know that isn't a value, e.g. 'Dark mode comes from antd's darkAlgorithm, so it's filled in.'
dryRun	boolean	No	Only report what would come across
tokens	object	Yes	A DTCG document of the look you found, every token with $extensions['tesserai.source'] = 'path:line'

Details

From the project README

@tesserai/cli

Install a tesserai design system into your project as components you own. Keep it current from your terminal. Give your coding agent the same tokens, components and rules through MCP.

Needs Node.js 22 or newer and Tailwind CSS 4. React works with Base UI, Radix or React Aria, Vue with Reka UI, and Svelte 5 with Bits UI.

Start

Design a system at tesserai.design and download it; that needs no account. Or share it from your account, and install it by its link, which sync then follows:

npx @tesserai/cli init ./acme.tesserai.json
npx @tesserai/cli init https://tesserai.design/s/AbCdEf123456 --dir ./apps/web

init writes the components, the theme CSS and tesserai/design-system.json into your project. It adds the CLI as a dev dependency. It also registers the MCP server for Claude Code in .mcp.json, and for Cursor in .cursor/mcp.json when the project uses Cursor.

Commands

Command	What it does
`init <link or bundle>`	Install a system into the project
`sync [link or bundle]`	Pull the latest version and regenerate. Files you changed are kept, with the new version written beside them. `--dry-run` shows the plan
`scan`	How the app uses its system: each component's uses and options (most used first), components and options never used, overrides (`className`, `style`, `sx` restyling a component, by what they change), the same override repeated (a change to make in the system), generated files edited by hand, an adoption score, and values that bypass the system. `--fix` replaces exact matches; `--upload` keeps the scan with its system in the builder (Pro)
`doctor`	Check the project, the system, the manifest and the source link
`export <format>`	The system for another stack: scss, ts, panda, stylex, mui, mantine, chakra, swift, kotlin, dart
`storybook`	A Storybook with a story per component, light and dark, and accessibility checks
`mcp`	Serve the system to coding agents over stdio
`login` / `logout`	Sign in for systems kept privately in an account

Run npx @tesserai/cli <command> --help for the options.

For coding agents

init registers the server for you. To add it by hand:

claude mcp add tesserai -- npx -y @tesserai/cli mcp

The agent can then read the system's outline, tokens, components, contrast checks and design guidelines. It can also apply changes that stay inside the system.

License

MIT. The components and CSS the CLI writes into your project are yours to use however you like.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

Read the getting-started guide

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.