tesserai MCP server

tesserai

Your design system, in your repo, followed by your coding agent.

tesserai turns your site's look (its colors, type and corners) into a design system. You see it on real screens, checked against WCAG and Apple's and Material's guidelines. Then one command installs it into your project as components you own. This repository is the part that runs in your project: the token engine, the component templates, and the CLI with its MCP server. It's MIT licensed.

npx @tesserai/cli init https://tesserai.design/s/<your-share-link>

React (Base UI, Radix or React Aria), Vue (Reka UI) and Svelte 5 (Bits UI, both in beta) components, a Tailwind CSS 4 theme, and W3C DTCG tokens. Exports for SwiftUI, Jetpack Compose, Flutter, SCSS, MUI, Mantine, Chakra, Panda and StyleX.

For coding agents

init registers the MCP server for Claude Code and Cursor. The agent reads the system's tokens, components, contrast checks and design guidelines, and changes the system rather than hand-styling a screen. To add it yourself:

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

Installed from an editor, the server asks the editor which folder it has open and serves that project. This repository is also a Claude Code and Cursor plugin, with a skill that tells the agent how to use the system, and npx skills add tesseraihq/tesserai adds the skill to other agents.

Commands

Full reference: tesserai.design/docs.

In this repository

Shortened. The full README is on GitHub.