Design Platform MCP

The Design Platform MCP server gives AI tools direct access to Anvil2 guidance. Connect it to your code editor or agent so it can look up the right component, read its usage guidelines, validate code, and use design tokens instead of guessing.

Connect

The server uses the MCP Streamable HTTP transport at:

https://anvil-labs.servicetitan.com/mcp/v1

Claude Code
Cursor
Other tools

claude mcp add --transport http anvil2 https://anvil-labs.servicetitan.com/mcp/v1

Run /mcp in a session to confirm the server is connected.

Add the server to .cursor/mcp.json:

{
  "mcpServers": {
    "anvil2": {
      "url": "https://anvil-labs.servicetitan.com/mcp/v1"
    }
  }
}

Add a remote MCP server of type http (Streamable HTTP) with the URL above. The tool’s own MCP documentation shows where that configuration lives.

/mcp/v1 is a versioned endpoint, so a future version would use a new path such as /mcp/v2.

Which packages are covered

The component tools index these web packages from their published type declarations:

Package	Aliases
`@servicetitan/anvil2`	`anvil2`, `core`
`@servicetitan/anvil2-charts-kit`	`charts`, `charts-kit`, `echarts`
`@servicetitan/anvil2-ai-kit`	`ai-kit`, `carto`, `agentos`, `agent os`, `agentic`
`@servicetitan/anvil2-illustrations`	`illustration`, `illustrations`
`@servicetitan/anvil2-icons`	`icon`, `icons`
`@servicetitan/anvil2-ext-atlas`	`atlas`
`@servicetitan/anvil2-ext-common`	`common`

React Native packages and the deprecated amCharts kit (anvil2-ext-charts) are not indexed. Icon exports are named with an Icon prefix, for example IconActivity. list_components shows a count for the icons package instead of listing every name, so pass the exact export name to get_component_guidance. When a component name exists in more than one package, the tools list the candidates and ask which package you mean. To avoid the question, mention the product or an alias in your prompt, or pass an argument:

find_component_for_use_case, get_component_guidance, and validate_component_usage take package.
get_component_usage_guidelines takes pkg (or kit).
list_component_do_donts takes kit, which defaults to anvil2. Use ai-kit for AI Kit’s version of a shared component.

Tools

Start with list_components or find_component_for_use_case when you don’t know the exact component name. Then use the guidance and validation tools.

Components

Tool	What it does
`list_components`	Lists every indexed component and hook, grouped by package. Use it to resolve a loose name like “table” to its export, `DataTable`.
`find_component_for_use_case`	Takes a plain-English UI need, such as “a table with sortable columns”, and returns a recommended component with matching documentation excerpts. The pick merges a docs search with a description-similarity ranking, so confirm it with `get_component_guidance`. If more than one package exports the component, it asks which one you mean.
`get_component_guidance`	Returns a component’s prop types, usage guidelines, import path, and story-based code examples. Pass `featureQuery` to focus on one variant or feature; the reply then swaps the usage guidelines for matching documentation excerpts.
`get_component_usage_guidelines`	Returns one component’s full Usage Guidelines section from its design page: when to use it, alternatives, and the Do/Don’t table. A deprecated component returns an error instead.
`list_component_do_donts`	Returns every component’s Do/Don’t table in one call as structured JSON, naming the component to use instead where the page gives one.
`validate_component_usage`	Checks a code snippet against a component’s props and usage patterns, and returns the issues found with suggested fixes.

get_component_guidance, validate_component_usage, and list_components are built on each package’s published type declarations, so they cover every indexed component. get_component_usage_guidelines and list_component_do_donts read the component’s design page on this site, so they only return what that page says. A component with no design page, or a page with no Usage Guidelines section or Do/Don’t table, is reported as a gap instead: usageGuidelines: null with a gap of no-design-page, no-usage-guidelines, no-do-dont-table, or invalid-do-dont-table. list_component_do_donts lists every gap under gaps. Atlas components are documented outside these design pages, so expect a gap for them. Use get_component_guidance for those.

Foundations, tokens, patterns, and content

Tool	What it does
`get_foundation_guidance`	Returns the guidance page for a visual foundation: `colors`, `content`, `iconography`, `sizing`, `spacing`, `theming`, or `typography`.
`get_token_guidance`	Returns the rules for choosing design tokens: the primitive, semantic, and component tiers and when to use each.
`get_design_tokens`	Looks up tokens with their CSS custom property, SCSS variable, JS export, and light and dark values. Filter by `category`, `query`, `component`, or `tier`.
`get_pattern_guidance`	Returns the guidance page for a UI pattern: `confirmation`, `embedded-ai`, `empty-states`, `errors-and-warnings`, `filters`, `forms`, `notifications`, or `peek`.
`get_content_guidance`	Returns UI writing guidance for labels, buttons, helper text, errors, and messages. Use the `overview` topic for voice, tone, and bias-free language.

Accessibility and migration

Tool	What it does
`get_accessibility_guidelines`	Returns the Accessibility and Keyboard Interaction sections from a component’s design page. When the page has neither, or the name isn’t a component, it falls back to a docs search and links the general accessibility pages.
`get_migration_guidance`	Returns Anvil (legacy) to Anvil2 migration guidance for a component: renamed and removed props, import changes, and whether a codemod exists.

A typical workflow

Ask for the UI you need. The agent calls find_component_for_use_case or list_components to pick a component.
It calls get_component_guidance and get_component_usage_guidelines to learn the props and the Do’s and Don’ts.
For layout, color, and spacing it calls get_foundation_guidance, get_pattern_guidance, and get_design_tokens, so the result uses tokens instead of raw CSS values.
Before it finishes, it calls validate_component_usage on the code it wrote.

The Anvil2 documentation site also has its own MCP server for searching these docs. See AI Tooling and Anvil2. Questions or problems? Ask in #ask-designsystem.

Concepts & Guidelines

Anvil2

Resources

Design Platform MCP

Connect

Which packages are covered

Tools

Components

Foundations, tokens, patterns, and content

Accessibility and migration

A typical workflow

​Connect

​Which packages are covered

​Tools

​Components

​Foundations, tokens, patterns, and content

​Accessibility and migration

​A typical workflow

​Related

Connect

Which packages are covered

Tools

Components

Foundations, tokens, patterns, and content

Accessibility and migration

A typical workflow

Related