Capy

Capy

MCP server that gives AI coding agents the context they need to build and update UI - preview pages & design-system artifacts.

Website · npm · Docs

---

What it does

Capy inspects your React / Next.js repo and returns structured briefs so AI agents can implement UI changes with precision — no hallucinated components, no guessed tokens.

Three tools:

| Tool | Purpose | | ------------------- | --------------------------------------------------------------------------------------------- | | get_preview_brief | Returns repo map, inspection plan, constraints, and a /preview spec for the agent to follow | | get_design_system | Writes a machine-readable design-system JSON artifact (.capy/design-system.json) | | update_preview | Diffs against last snapshot, refreshes the design system, returns an incremental update brief |

---

Quick start

npx capy-mcp@latest

---

Setup

Pick your client. One command or one config change — you're set.

Agents

Claude Code

claude mcp add --scope user capy -- npx -y capy-mcp@latest

Or add to ~/.claude/mcp.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

Claude Desktop

Add to your config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

Codex

codex mcp add capy -- npx -y capy-mcp@latest

Or add to ~/.codex/config.toml:

[mcp_servers.capy]
command = "npx"
args = ["-y", "capy-mcp@latest"]

Gemini CLI

Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

Copilot CLI

Add to ~/.vscode-server/data/User/mcp.json:

{
  "servers": {
    "capy": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

> Make sure Copilot Chat is in Agent mode — MCP tools only work there.

Mistral Vibe

Add to ~/.vibe/config.toml:

[[mcp_servers]]
name = "capy"
transport = "stdio"
command = "npx"
args = ["-y", "capy-mcp@latest"]

Kimi Code

kimi mcp add --transport stdio capy -- npx -y capy-mcp@latest

Or add to ~/.kimi/mcp.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

OpenCode

Add to ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "capy": {
      "type": "local",
      "command": ["npx", "-y", "capy-mcp@latest"],
      "enabled": true
    }
  }
}

QwenCode

Add to settings.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

IDEs

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

VS Code

Add to ~/.vscode-server/data/User/mcp.json:

{
  "servers": {
    "capy": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

> Or via Command Palette: MCP: Open User Configuration

Windsurf

Add to ~/.codeium/windsurf/mcp.json:

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

Zed

Add to your settings file:

• macOS: ~/.zed/settings.json
• Linux: ~/.config/zed/settings.json
• Windows: %USERPROFILE%\AppData\Roaming\Zed\settings.json

{
  "context_servers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"],
      "env": {}
    }
  }
}

Antigravity

Add to your config file:

• macOS: ~/.gemini/antigravity/mcp_config.json
• Windows: %USERPROFILE%\.gemini\antigravity\mcp_config.json

{
  "mcpServers": {
    "capy": {
      "command": "npx",
      "args": ["-y", "capy-mcp@latest"]
    }
  }
}

> Or via UI: Agent session → … dropdown → MCP Servers → Manage MCP Servers → View raw config.

---

Library usage

import {
  buildPreviewBrief,
  buildDesignSystemArtifact,
  runPreviewUpdate,
  detectFramework,
} from "capy-mcp";

const brief = await buildPreviewBrief(process.cwd(), { task: "build_preview" });
const designSystem = await buildDesignSystemArtifact(process.cwd());
const update = await runPreviewUpdate(process.cwd());

---

Local development

cd capy-mcp
npm install
npm test
npx capy-mcp

---

Built by Anant Singhal

Twitter · GitHub · LinkedIn

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: GithubAnant
• Source: GithubAnant/capy
• License: Apache-2.0
• Homepage: https://capy.anants.studio

Install and usage instructions live in the source repository linked above.