@tesserai/cli

Install a tesserai design system into your project as components you own, keep it in sync, and give your coding agent an MCP server that reads it.
2,584
vue react svelte cli tailwind design-system shadcn mcp design-tokens
Install
npm install @tesserai/cli
Latest Version:0.2.2
License:MIT
Last Updated:Sep 27, 2026
Links: GitHub  ·  npm
Maintainer: andrewkwak

@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 (Reka UI) and Svelte 5 (Bits UI) are in beta.

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.

Related Packages

designsource

The DS source CLI: add a design system to an existing app (integrate), start a n...

0
cli design-system design-tokens mcp shadcn svelte tailwind vue angular model-context-protocol +2
@aestheticfunction/dspack-export

Bootstrap a current-spec dspack design-system snapshot from a component codebase...

861 0
design-system design-tokens react shadcn tailwind ai-agents dspack exporter
uikit-studio

The uikit CLI — scaffold, validate, and add UI kits from the uikit.studio galler...

613 0
cli design-system react shadcn tailwind vue scaffold ui-kit uikit
@ravox-ui/cli

Add Ravox Kit components, blocks and themes to your project (React, Vue, Svelte...

628
cli react shadcn svelte tailwind vue angular components ravox ui
@esvigy/cli

Official CLI for Esvigy — add customizable, animated illustrations directly to y...

375 3
cli react shadcn svelte vue esvigy illustrations svg

Version History

Version Released License
0.2.2 MIT
0.2.1 MIT
0.2.0 MIT
0.1.0 MIT