Skip to content
    ↑↓ select↵ openesc close
    English中文
    GithubAnant

    Capy

    v1.0.0MCP Integrations
    opencode-capy

    OpenCode plugin for Capy - AI preview and design system tooling

    Actively maintained
    #opencode#opencode-plugin#preview#design-system#mcp#nextjs
    GitHub reponpm pageHomepage
    GitHub stars

    1

    Monthly installs

    15

    1 in 7 days

    Composite scoreSCORE

    22.5

    Multi-signal model

    Last commit

    4 months ago

    2026-04-03

    Install and configure

    opencode.json

    Writes to this project's opencode.json — applies to this repository only.

    opencode.json

    {
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["opencode-capy@1.0.0"]
}

    opencode loads npm dependencies through its embedded runtime on startup and caches them locally — no manual global install needed.

    README.md
    View original→

    Capy

    Capy

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

    npm downloads license

    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