From 8a61650e4b9eab8781a75bdd019752e131abc308 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 18 Sep 2025 12:48:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=84=20Update=20shadcn/ui=20docs=20+=20?=
 =?UTF-8?q?add=20shadcn=20MCP=20server=20config?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/docs/shadcn-ui.md | 60 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/docs/shadcn-ui.md b/src/docs/shadcn-ui.md
index 85c8d25..f6dd927 100644
--- a/src/docs/shadcn-ui.md
+++ b/src/docs/shadcn-ui.md
@@ -1,11 +1,11 @@
 ---
-title: shadcn/ui Registry
+title: shadcn/ui
 description: How to use shadcn/ui to add SVGs to your project.
 ---
 
-## shadcn/ui Registry
+## shadcn/ui
 
-SVGL v5 support [shadcn/ui](https://ui.shadcn.com/) registry, so you can easily add SVGs to your project using their CLI. Add the registry config once and you will be able to install any SVG in `.tsx` using `npm`, `yarn`, `bun` or `pnpm`.
+SVGL v5 support [shadcn/ui](https://ui.shadcn.com/) registry 🎉, so you can easily add SVGs to your project using [their CLI](https://ui.shadcn.com/docs/cli). Add the registry config once and you will be able to install any SVG in **`.tsx`** using `npm`, `yarn`, `bun` or `pnpm`.
 
 ## Add registry
 
@@ -40,3 +40,57 @@ Add multiple SVGs at once:
 ```bash
 pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel
 ```
+
+## MCP Server
+
+You can use the [shadcn MCP server](https://ui.shadcn.com/docs/mcp) to browse, search, and add React SVGs from SVGL registry:
+
+### Prerequisites
+
+You need to have `@svgl` in your `components.json` file:
+
+```json
+{
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
+}
+```
+
+### Quick Start
+
+**With Claude Code**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client claude
+```
+
+Then, restart Claude Code. You can use `/mcp` command in Claude Code to debug the MCP server.
+
+**With Cursor**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client cursor
+```
+
+Then, open Cursor Settings and Enable the MCP server for shadcn.
+
+**With VSCode**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client vscode
+```
+
+Then, open `.vscode/mcp.json` and click Start next to the shadcn server.
+
+### Example Prompts
+
+Here are some example prompts you can use to add SVGs from SVGL registry:
+
+```
+Can you add the "GitHub" SVG from SVGL registry?
+```
+
+```
+Please add React, Svelte and Vue SVGs from SVGL registry.
+```