Shadcn Space MCP Server Documentation

Bring Shadcn Space directly into your editor. The MCP Server allows AI-powered IDEs to browse, install, and compose components and blocks that match your project.

What is MCP?

MCP (Model Context Protocol) allows AI tools inside your code editor to access external data sources and actions. With Shadcn Space MCP, your AI understands our entire component and block catalog.

Search blocks and components via chat
Install UI directly into your project
Compose pages using existing building blocks
Always stays in sync with the latest registry

How to use ShadcnSpace MCP server in Local

To run the Shadcn Space MCP server locally, you can register the local command-line interface. Choose either the Quick Install command or Manual Installation depending on your environment.

Quick Install

The fastest way to get started. Choose your package manager and run the command corresponding to your client:

For Claude Code :

Terminal

claude mcp add shadcnspace-mcp -- npx -y shadcnspace-mcp@latest

For Other :

Terminal

npx shadcnspace-cli install <client>

Replace <client> with cursor or windsurf.

Manual Installation

.cursor/mcp.json

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

• Open Cursor Settings → MCP.

• Enable the Shadcn Space MCP server.

• A green dot confirms the server is active.

Cursor documentation

How to use ShadcnSpace MCP server in Cloud

To connect to our cloud-hosted endpoint via SSE (recommended for easy setup and integration with web builders like Lovable and Bolt), configure the details below using your credentials.

Before You Start: Get Your MCP Token

You'll need your MCP Token. This is a single string combining your email and license key:

[email protected]:your-license-keyToken Format

Find your license key on your ShadcnSpace Dashboard

Free users: You can add the MCP server without a token (using the Free option below). Free blocks will install normally. PRO blocks and all Pages require a token.

Select Your AI Tool

Choose the tool you want to configure with the Cloud MCP server:

Configure Lovable

Lovable supports Bearer token authentication for MCP servers.

Field	Value
Server name	ShadcnSpace MCP
Server URL	https://mcp.shadcnspace.com/mcp
Authentication	Bearer token or API key
Token	[email protected]:your-license-key

Setup Steps:

Open your Lovable project
Click the Settings icon → Connectors
Click Add MCP server
Fill in the form fields as shown in the table
Click Add server
You should see Connected ✅

Setup Form Reference:

How the agent will use it:

Once connected, ask Lovable to add a UI block: "Add a hero section using ShadcnSpace". The agent will automatically search for the right block, fetch the install command with your credentials embedded, and run it — no components.json editing required.

Pro tip: MCP works best when combined with the Shadcn CLI. Use MCP for exploration and generation, then refine code locally.

Using Shadcn Space with MCP

Once configured, you can interact with Shadcn Space using prompts inside your editor.

Ask for a specific component or block variant
Request changes to layout, spacing, or styles
Generate pages using Shadcn Space building blocks
Refine output iteratively with follow-up prompts

Available MCP Tools

These tools are exposed to your IDE through the Model Context Protocol (MCP). They allow the AI to fetch, install, and compose Shadcn Space components directly inside your project.

Tool	Description
get_audit_checklist	Returns strict workflow rules and guidelines for agents interacting with this MCP server. MCP server skills
listBlocks	Provides a comprehensive list of all shadcnspace blocks.
listComponents	Provides a comprehensive list of all shadcnspace components.
getBlockInstall	Returns the official installation command for a specific Shadcn Space block.
searchBlocks	Search Shadcn Space blocks using keywords or tags.
listInstalledBlocks	Lists all blocks that are currently installed in the project and get their files.
listPages	Provides a complete list of all Shadcn Space pages.
getPageInstall	Returns the official installation command for a specific Shadcn Space page.
searchPages	Search Shadcn Space pages using keywords or tags.
listInstalledPages	Lists all pages that are currently installed in the project.

Available Prompts

Prompts are human-friendly commands that map to MCP tools. They usually appear as slash commands or natural language actions in your IDE’s AI chat.

Prompt	Arguments	What happens
`search`	query (string)	Finds blocks by name, category, or intent.
`create-ui`	none	Composes a new UI using existing Shadcn Space blocks.
`customization-guidelines`	none	Defines which parts of installed blocks can be safely modified.

Example Usage

These examples show how MCP understands intent and translates it into real component installs and UI composition.

“List all available Shadcn Space blocks”

“Add download-banner block to my project”

“Create a landing page for a coffee shop using a hero block, a 3-column feature grid, and a dark-themed footer”

Limitations

Generated code may require manual refinement
Advanced custom animations may not be inferred correctly
Editor support depends on MCP compatibility
Pro components require valid credentials

Best Practices

Tip: Use MCP as an assistant, not a replacement. Always review and adapt generated code to your project’s needs.

Be specific in prompts (component type, layout, behavior)
Generate small pieces instead of entire pages at once
Validate accessibility and responsiveness
Commit generated code after review