Connect an AI coding tool

Give your AI coding assistant access to your design system. Once connected via MCP, the agent reads your tokens, presets, and patterns before it writes, and validates code against your rules after.

Pick a tool

Every major AI coding tool that speaks MCP works with preset AI. The install is one line in each.

Tool	Mode	Install
Claude Code	Terminal	`claude mcp add --transport http preset https://mcp.presetai.dev/mcp`
Cursor	Editor	Add via Settings → MCP, see below
GitHub Copilot	Editor (Agent Mode)	Via VS Code MCP settings
Windsurf	Editor	Via MCP plugin settings

The MCP server runs over OAuth: no API keys to manage. Free on every plan.

For a tool-specific operating loop (what to prompt, when to validate, common pitfalls) see the per-tool pages linked from the sidebar.

Claude Code

The fastest install. From any terminal:

claude mcp add --transport http preset https://mcp.presetai.dev/mcp

Verify the connection:

claude mcp list

You should see preset with status connected. See the Claude Code guide for the recommended operating loop.

Cursor

In Cursor, open Settings → MCP. Add a new server:

{
  "mcpServers": {
    "preset": {
      "url": "https://mcp.presetai.dev/mcp",
      "type": "http"
    }
  }
}

Cursor will prompt you to authenticate via OAuth on first use. See the Cursor guide for the prompting template.

GitHub Copilot

Copilot Agent Mode (VS Code) supports remote MCP servers. In VS Code, open Settings → Copilot → Agent mode → MCP servers and add:

{
  "preset": {
    "url": "https://mcp.presetai.dev/mcp"
  }
}

OAuth flow runs on first request. See the Copilot guide for the governance recommendations.

Windsurf

In Windsurf, open the MCP settings panel and add:

{
  "mcpServers": {
    "preset": {
      "url": "https://mcp.presetai.dev/mcp"
    }
  }
}

OAuth on first use. See the Windsurf guide for team operating rules.

What your AI can do

Once connected, the agent gains these capabilities:

Capability	Example prompt
Search	"Search for button presets."
Suggest	"What preset should I use for a delete action?"
Generate	"Generate a form with email and password inputs."
Validate	"Check this code for design system violations."
Fix	"Fix the violations in this component."
Audit	"Run a design system audit on this file."

Example conversations

Finding the right component:

I need a dropdown for selecting a time period.

The agent uses get_intent_route and get_preferred_component to find the matching preset, then generates code using your design system.

Checking your work:

Validate this component for design system compliance.

The agent uses validate_generated_code to check for violations and suggest fixes.

Understanding constraints:

What should I avoid when building this form?

The agent uses get_forbidden_primitives and get_anti_patterns to explain which patterns are blocked.

Adaptive behavior

The MCP server adapts to your design system's maturity:

Mode	Behavior	Best for
Generative	Proposes new patterns; warns but doesn't block	Early-stage teams
Hybrid	Suggests existing patterns; warns on violations	Growing teams
Enforcement	Requires existing presets; blocks violations	Enterprise teams

The mode is auto-detected from your preset count, token coverage, and other signals. Override with set_system_mode.

Troubleshooting

"Connection failed"

Confirm you're signed in to preset AI in your browser (OAuth state is shared)
Restart your AI tool after configuring MCP
Test the server directly: curl https://mcp.presetai.dev/ returns a JSON health check (the /mcp path speaks MCP, not plain GET)

"Tools not appearing"

Restart your AI tool after configuration
Check for JSON syntax errors in your config file
Confirm OAuth completed: first request opens a browser; you must approve

"Gateway online but tools don't work"

The MCP server is healthy but tool calls may fail for other reasons
Check the specific error in the agent's reasoning trace
Ensure your design system has data (presets, tokens, components) to act on

FAQ

Do I need an API key?

No. The MCP server runs over OAuth: your AI tool authenticates once, and the memory layer becomes available immediately.

Can I use multiple AI tools with the same account?

Yes. Every tool authenticates independently but reads from the same memory layer.

Is my code sent to preset AI servers?

Only when you explicitly ask the AI to validate or audit code. MCP tools operate on the code snippets you provide, not your entire codebase.

What MCP tools are available?

60+ tools across guardrails, discovery, generation, validation, typography, accessibility, Figma, and workflows. See developers.presetai.dev for the full reference.