Syntara

The Syntara MCP server lets AI coding agents look up components, tokens and usage rules while they write code, and check their own work. It reads the same meta.json files as these pages.

Not published yet

The server works from a checkout of the repo today. npx @syntara/mcp arrives with the npm release.

What it does

Tool	Returns
`list_components`	Name, maturity and one-line purpose of every component.
`get_component`	Props, deprecations with their replacement, keyboard, accessibility notes, do and don’t, tokens and a usage snippet.
`get_example`	The source of one example from these docs.
`find_icon`	Icon names that match a word, best first. It never returns a name the icon package doesn’t export.
`get_tokens`	Resolved token values for a category, tenant and scheme.
`find_token`	The nearest token for a raw value, with the distance and the reason.
`get_pattern`	Page-level patterns: which components a block composes, and its structure.
`audit_snippet`	Off-system code in a snippet, each finding with its fix, and a score.

get_example and find_icon are additions to the six tools in the project brief. Agents copy working code more reliably than they read prop tables. find_icon was added after the eval: agents in both conditions imported icons that don’t exist.

get_component also returns imports (other packages the component needs, such as the date functions for DatePicker) and typeNotes (types that agents got wrong in the eval, each with one correct line).

It also serves two files as resources: syntara://agents (AGENTS.md, the rules for agents) and syntara://governance.

Read-only

No tool writes a file. audit_snippet returns each fix marked safe: true or safe: false. A safe fix has one right answer, such as the exact token for a raw value. An agent may apply safe fixes on its own; everything else is a suggestion for a person. See the trust levels in Governance.

Set it up

Run pnpm install in a checkout of the repo, then point your client at the server. Replace /path/to/syntara with the path of your checkout.

claude mcp add syntara -- node /path/to/syntara/packages/mcp/bin/cli.mjs

For Cursor (.cursor/mcp.json) and other clients that use the same format:

{
  "mcpServers": {
    "syntara": {
      "command": "node",
      "args": ["/path/to/syntara/packages/mcp/bin/cli.mjs"]
    }
  }
}

VS Code uses .vscode/mcp.json with a servers key; the full snippet is in the package’s README. The Cursor and VS Code snippets follow those clients’ documented formats and haven’t been tried against the clients themselves.

Response sizes

Agents pay for every token, so responses are compact JSON with no prose around them. A test fails if one grows past its budget.

Response	Bytes	Budget
`list_components`, all 53	8,699	12,000
`get_component` for Button	6,218	8,000
`get_component` for Sidebar, the largest	12,547	16,000
`get_tokens` for colour	4,795	5,500
`get_example` for Button	562	1,500
`find_icon` for “arrow”, 8 results	412	700

Measured on 2026-09-28 with pnpm --filter @syntara/mcp test sizes. These are bytes, not tokens.

Does it help?

The numbers below are from before find_icon, imports and typeNotes were added. An eval ran 25 screen-building prompts with Claude Code, twice each, with and without the server. Both conditions had Syntara installed.

Measure	No context	Server and AGENTS.md
Runs	50	50
Fully on-system	64%	88%
Audit findings, all runs	19	0
No axe violations	92%	98%
Passes typecheck	88%	88%
No horizontal scroll at 390px	98%	92%
Median turns	57	33.5

One model (claude-sonnet-5), one agent, 50 runs a side. A gap of a few points is inside what repeats of the same prompt disagree on. The server didn’t help with type errors and did worse on narrow screens. The first attempt at this eval was thrown out because of a fault in the harness. The full results, the method and both sets of runs are in evals/.

Reproduce with node evals/setup.mjs --clean, then run, score and report. A new run gives different numbers, because models don’t answer the same way twice.

The drift auditor

audit_snippet runs the same engine as the command-line auditor:

pnpm drift src --format text

It looks for raw colours, sizes off the scale, written-out fonts, native elements where a component exists, physical properties, controls with no accessible name, and deprecated APIs. Every finding says what to write instead. --fix applies the safe ones.

The auditor reads one file at a time, so it can’t see a name or a value that arrives through props. Its limits are listed in the package’s README.