> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Platform MCP

> Connect an AI tool to the Design Platform MCP server to look up Anvil2 components, tokens, patterns, and content guidance.

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:

```text theme={null}
https://anvil-labs.servicetitan.com/mcp/v1
```

> [tab] Claude Code
>
> ```shell theme={null}
> claude mcp add --transport http anvil2 https://anvil-labs.servicetitan.com/mcp/v1
> ```
>
> Run `/mcp` in a session to confirm the server is connected.

> [tab] Cursor
>
> Add the server to `.cursor/mcp.json`:
>
> ```json theme={null}
> {
>   "mcpServers": {
>     "anvil2": {
>       "url": "https://anvil-labs.servicetitan.com/mcp/v1"
>     }
>   }
> }
> ```

> [tab] Other tools
>
> 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.

> [!NOTE]
>
> `/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. |

> [!NOTE]
>
> `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

1. Ask for the UI you need. The agent calls `find_component_for_use_case` or `list_components` to pick a component.
2. It calls `get_component_guidance` and `get_component_usage_guidelines` to learn the props and the Do's and Don'ts.
3. 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.
4. Before it finishes, it calls `validate_component_usage` on the code it wrote.

## Related

The Anvil2 documentation site also has its own MCP server for searching these docs. See [AI Tooling and Anvil2](https://anvil.servicetitan.com/docs/getting-started/ai-tooling-and-anvil2.md).

Questions or problems? Ask in [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.