rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-26 14:16:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: restructure mcp docs

Browse Source
This commit is contained in:
shadcn
2025-08-26 12:13:50 +04:00
parent d44ab7ffa4
commit bc56bb6022
3 changed files with 96 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/v4/content/docs/(root)/mcp.mdx
View File

@@ -1,14 +1,28 @@
---
title: MCP Server
description: Use the shadcn MCP server to browse, search, and install components from registries
description: Use the shadcn MCP server to browse, search, and install components from registries.
---
The shadcn MCP (Model Context Protocol) server allows AI assistants to interact with items from registries. You can browse available components, search for specific resources, and install them directly into your project using natural language.
The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.
For example, you can ask an AI assistant to "Build a landing page using components from the @acme registry" or "Find me a login form from the shadcn registry".
For example, you can ask an AI assistant to "Build a landing page using components from the acme registry" or "Find me a login form from the shadcn registry".
Registries are configured in your project's `components.json` file.
```json title="components.json" showLineNumbers
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
---
## Quick Start
Select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the [Configuration](#configuration) section.
<Tabs defaultValue="claude">
<TabsList>
<TabsTrigger value="claude">Claude Code</TabsTrigger>
@@ -57,6 +71,8 @@ For example, you can ask an AI assistant to "Build a landing page using componen
</TabsContent>
</Tabs>
---
## What is MCP?
[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to:
@@ -84,21 +100,17 @@ The shadcn MCP server works out of the box with any shadcn-compatible registry.
- **Third-Party Registries** - Any registry following the shadcn registry specification
- **Namespaced Registries** - Multiple registries configured with `@namespace` syntax
## Prerequisites
Before using MCP, ensure you have:
1. **shadcn CLI installed** in your project: (if you don't have it, run `npm install -D shadcn`)
2. **A valid components.json** file in your project root (created via `npx shadcn@latest init`)
---
## Configuration
The shadcn MCP server works with any MCP client. Here are the instructions for the most popular ones.
### Claude Code
To use MCP with Claude Code, add the shadcn server to your project's `.mcp.json` configuration file:
To use the shadcn MCP server with Claude Code, add the following configuration to your project's `.mcp.json` file:
```json title=".mcp.json"
```json title=".mcp.json" showLineNumbers
{
"mcpServers": {
"shadcn": {
@@ -109,13 +121,15 @@ To use MCP with Claude Code, add the shadcn server to your project's `.mcp.json`
}
```
After adding the configuration, restart Claude Code for the changes to take effect. See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.
After adding the configuration, restart Claude Code and run `/mcp` to see the shadcn MCP server in the list. If you see `Connected`, you're good to go.
See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.
### Cursor
To configure MCP in Cursor, add the shadcn server to your project's `.cursor/mcp.json` configuration file:
```json title=".cursor/mcp.json"
```json title=".cursor/mcp.json" showLineNumbers
{
"mcpServers": {
"shadcn": {
@@ -126,13 +140,17 @@ To configure MCP in Cursor, add the shadcn server to your project's `.cursor/mcp
}
```
After adding the configuration, enable the MCP server in Cursor Settings (Restart Cursor if needed). See the [Cursor MCP documentation](https://docs.cursor.com/en/context/mcp#using-mcp-json) for more details.
After adding the configuration, enable the shadcn MCP server in Cursor Settings.
Once enabled, you should see a green dot next to the shadcn server in the MCP server list and a list of available tools.
See the [Cursor MCP documentation](https://docs.cursor.com/en/context/mcp#using-mcp-json) for more details.
### VS Code
To configure MCP in VS Code with GitHub Copilot, add the shadcn server to your project's `.vscode/mcp.json` configuration file:
```json title=".vscode/mcp.json"
```json title=".vscode/mcp.json" showLineNumbers
{
"mcpServers": {
"shadcn": {
@@ -143,37 +161,23 @@ To configure MCP in VS Code with GitHub Copilot, add the shadcn server to your p
}
```
After adding the configuration, restart VS Code for the changes to take effect. See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the shadcn server.
### Zed
See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
To configure MCP in Zed, add the shadcn server to your project's `.zed/settings.json` configuration file:
```json title=".zed/settings.json"
{
"context_servers": {
"shadcn": {
"command": "npx",
"args": ["shadcn@latest", "mcp"]
}
}
}
```
After adding the configuration, restart Zed for the changes to take effect. See the [Zed MCP documentation](https://zed.dev/docs/ai/mcp) for more details.
---
## Configuring Registries
The MCP server supports multiple registries through your project's `components.json` configuration. This allows you to access components from various sources including private registries and third-party providers.
<Callout>
**Note:** By default, MCP connects to the shadcn/ui registry. No configuration
is needed to access standard shadcn/ui components.
**Note:** No configuration is needed to access standard shadcn/ui registry.
</Callout>
Configure additional registries in your `components.json`:
```json title="components.json"
```json title="components.json" showLineNumbers
{
"registries": {
"@acme": "https://registry.acme.com/{name}.json",
@@ -187,6 +191,8 @@ Configure additional registries in your `components.json`:
}
```
---
### Authentication
For private registries requiring authentication, set environment variables in your `.env.local`:
@@ -198,6 +204,8 @@ API_KEY=your_api_key_here
For more details on registry configuration, see the [Namespaces documentation](/docs/registry/namespace).
---
## Example Prompts
Once MCP is configured, you can use natural language to interact with registries:
@@ -218,6 +226,8 @@ Once MCP is configured, you can use natural language to interact with registries
- "Install @internal/auth-form"
- "Build me a landing page using hero, features and testimonials components from the @acme registry"
---
## Troubleshooting
### MCP Not Responding
@@ -247,6 +257,8 @@ If components fail to install:
3. **Check Permissions** - Ensure write permissions for component directories
4. **Review Dependencies** - Check that required dependencies are installed
---
## Learn More
- [Registry Documentation](/docs/registry) - Complete guide to shadcn registries

79
apps/v4/content/docs/registry/mcp.mdx
View File

@@ -7,6 +7,8 @@ The [shadcn MCP server](/docs/mcp) works out of the box with any shadcn-compatib
See the [MCP documentation](/docs/mcp) for more information on how to use the shadcn MCP server.
---
## Configuring MCP
Ask your registry consumers to configure your registry in their `components.json` file and install the shadcn MCP server:
@@ -18,24 +20,26 @@ Ask your registry consumers to configure your registry in their `components.json
<TabsTrigger value="vscode">VS Code</TabsTrigger>
</TabsList>
<TabsContent value="claude" className="mt-4">
**Configure your registry** in your `components.json` file:
```json title="components.json"
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
```json title="components.json" showLineNumbers
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
**Run the following command** in your project:
```bash
npx shadcn@latest mcp init --client claude
```
```bash
npx shadcn@latest mcp init --client claude
```
**Restart Claude Code** and try the following prompts:
- Show me all available components in the @acme registry
- Create a contact form using components from the @acme registry
- Show me all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
**Note:** You can use `/mcp` command in Claude Code to debug the MCP server.
@@ -43,43 +47,56 @@ Ask your registry consumers to configure your registry in their `components.json
<TabsContent value="cursor" className="mt-4">
**Configure your registry** in your `components.json` file:
```json title="components.json"
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
```json title="components.json" showLineNumbers
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
**Run the following command** in your project:
```bash
npx shadcn@latest mcp init --client cursor
```
Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:
- Show me all available components in the @acme registry
- Create a contact form using components from the @acme registry
- Show me all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
</TabsContent>
<TabsContent value="vscode" className="mt-4">
**Configure your registry** in your `components.json` file:
```json title="components.json"
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
```json title="components.json" showLineNumbers
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
```
**Run the following command** in your project:
```bash
npx shadcn@latest mcp init --client vscode
```
Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:
- Show me all available components in the @acme registry
- Create a contact form using components from the @acme registry
- Show me all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
</TabsContent>
</Tabs>
---
### Best Practices
Here are some best practices for MCP-compatible registries:
1. **Clear Descriptions**: Add concise, informative descriptions that help AI assistants understand what a registry item is for and how to use it.
2. **Proper Dependencies**: List all `dependencies` accurately so MCP can install them automatically.
3. **Registry Dependencies**: Use `registryDependencies` to indicate relationships between items.
4. **Consistent Naming**: Use kebab-case for component names and maintain consistency across your registry.

2
apps/v4/mdx-components.tsx
View File

@@ -310,7 +310,7 @@ export const mdxComponents = {
}: React.ComponentProps<typeof TabsTrigger>) => (
<TabsTrigger
className={cn(
"text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-primary dark:data-[state=active]:border-primary rounded-none border-0 border-b-2 border-transparent px-0 pb-3 text-base data-[state=active]:bg-transparent data-[state=active]:shadow-none dark:data-[state=active]:bg-transparent",
"text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-primary dark:data-[state=active]:border-primary rounded-none border-0 border-b-2 border-transparent bg-transparent px-0 pb-3 text-base data-[state=active]:bg-transparent data-[state=active]:shadow-none dark:data-[state=active]:bg-transparent",
className
)}
{...props}