# tesserai

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI
- Author: tesseraihq
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tesseraihq/tesserai/tree/HEAD/packages/cli
- Updated: 2026-09-27
- HTML: https://affpapa.org/en/nevibecode/mcp/tesserai

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add tesserai -- npx -y @tesserai/cli
```

### Codex

**Platform CLI**
```bash
codex mcp add cli -- npx -y @tesserai/cli
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "cli": {
            "command": "npx",
            "args": [
                "-y",
                "@tesserai/cli"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "cli": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@tesserai/cli"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add cli npx -y @tesserai/cli
```

## When to use it
- 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
- 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.

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 392262
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33989
- [World Monitor](https://affpapa.org/en/nevibecode/mcp/world-monitor.md) — MCP server · ★ 89609
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81163
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [Scrapling MCP Server](https://affpapa.org/en/nevibecode/mcp/scrapling-mcp-server.md) — MCP server · ★ 89899

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md