Model Context Protocol (MCP)

The Model Context Protocol (MCP) allows AI assistants to query the Space UI registry directly inside your editor. When enabled, your AI coding agent can search components, inspect TypeScript signatures, and install primitives without leaving the chat.

Space UI leverages the official shadcn MCP server. Once configured, any @spaceui primitive can be discovered and installed autonomously by your AI tools.

Automatic Configuration (Recommended)

Run the initialization command for your preferred editor to automatically write the MCP configuration file:

Bash

pnpm dlx shadcn@latest mcp init --client claude

pnpm dlx shadcn@latest mcp init --client claude

Manual Configuration

If you prefer adding the MCP server manually, save the corresponding JSON snippet in your project or global configuration directory:

.mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Available MCP Capabilities

When the MCP server is active, your AI agent has access to these capabilities:

DiscoveryInstant Search

search_components

Finds matching primitives, interactive blocks, and sensory hooks directly inside your prompt.

Agent Guide

InspectionProps & API

get_component

Inspects TypeScript props, imports, sub-components, and design tokens without context pollution.

Agent Guide

InstallationAuto Install

add_component

Directly executes shadcn CLI commands to scaffold and customize primitives in your workspace.

Agent Guide

Example Prompts with MCP

Try prompting your AI assistant with natural language instructions:

Code

1. Search Space UI for animated tab primitives and install @spaceui/tabs.
2. Build a project settings view with 3 tabs: General, Members, and Billing.
3. Add a delete confirmation dialog using @spaceui/dialog with destructive styling.