---
title: MCP
description: How to use the shadcn MCP with Redpanda UI Registry.
icon: plug
---

import { aiAgentRules, aiAgentWhen } from '../../../lib/rules';

We strongly recommend configuring your AI Agent with the shadcn MCP server and the following guidelines. This gives your AI Agent full context about the registry — component discovery, documentation, code preview, and installation — all natively supported.

## 1. Add the shadcn MCP

The shadcn MCP server works out of the box with the `@redpanda` registry configured in your `components.json`. Make sure you have [set up your project](/docs/install) first.

Replace `/absolute/path/to/project` in every example below with the absolute path to your project containing `components.json`. The explicit `--cwd` keeps the server attached to that project even when your editor or desktop client launches it from another directory. The examples pin the verified shadcn CLI version.

**Cursor**

Copy and paste the code into `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "bun",
      "args": ["x", "--cwd", "/absolute/path/to/project", "--bun", "shadcn@4.22.1", "mcp"]
    }
  }
}
```

**Claude Code**

Run the following command in your terminal:

```bash
claude mcp add shadcn -- bun x --cwd /absolute/path/to/project --bun shadcn@4.22.1 mcp
```

**VS Code**

Copy and paste the code into `.vscode/mcp.json`:

```json
{
  "servers": {
    "shadcn": {
      "command": "bun",
      "args": ["x", "--cwd", "/absolute/path/to/project", "--bun", "shadcn@4.22.1", "mcp"]
    }
  }
}
```

**Claude Desktop**

Copy and paste the code into `Claude/claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "bun",
      "args": ["x", "--cwd", "/absolute/path/to/project", "--bun", "shadcn@4.22.1", "mcp"]
    }
  }
}
```

The shadcn MCP server automatically discovers the `@redpanda` registry from your `components.json` and exposes all components to your AI agent — including documentation, code, and install commands.

## 2. Add the following guidelines to your AI Agent

We strongly recommend you add these code style guidelines to your agent, as it ensures proper UI best practices are followed every time you want to build a UI.

**Cursor**

Create a `.cursor/rules/ui.md` file and paste the following code:

<CodeBlock
  title=".cursor/rules/ui.md"
  lang="markdown"
  code={`---
name: Redpanda UI Registry
when: ${aiAgentWhen}
---
${aiAgentRules}`}
/>

**Claude Code**

Create a `.claude/UI.md` file and paste the following code:

<CodeBlock title=".claude/UI.md" lang="markdown" code={aiAgentRules} />

Then, reference it in your root `CLAUDE.md` file:

```markdown title="CLAUDE.md"
@.claude/UI.md
```

**VS Code**

Create a `.github/copilot-instructions.md` file and paste the following code:

<CodeBlock
  title=".github/copilot-instructions.md"
  lang="markdown"
  code={aiAgentRules}
/>

**Claude Desktop**

1. Click on "Set project instructions."
2. Copy and paste the instructions below into "Project Instructions" and click "Save instructions."

<CodeBlock
  title="Project Instructions"
  lang="markdown"
  code={aiAgentRules}
/>

## 3. Add recommended MCPs

- [Figma](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) Remote MCP
- [Playwright](https://github.com/microsoft/playwright-mcp) MCP (for exposing the rendered UI to the agent)

## 4. Restart your AI Agent

That's it! Your AI Agent is now configured to use the Redpanda UI Registry via the shadcn MCP and best practices.