Slipstream UI - The AI-first React Component Library

Set up the Slipstream UI MCP server to give AI agents zero-hallucination access to component specifications.

What is MCP?

MCP (Model Context Protocol) is a protocol that allows AI agents to query external tools and data sources. The Slipstream UI MCP server provides tools for AI agents to:

List all available components with filters
Get complete COMPONENT_MANIFEST for any component
Query component properties and usage patterns
Understand composition rules and relationships

Installation

Install the MCP server package:

pnpm add @slipstream-ui/mcp-server

Configuration

Claude Desktop

Add the MCP server to your Claude Desktop configuration:

// claude_desktop_config.json
{
  "mcpServers": {
    "slipstream-ui": {
      "command": "node",
      "args": ["path/to/node_modules/@slipstream-ui/mcp-server/dist/index.js"]
    }
  }
}

Cursor

Add to your Cursor settings:

// settings.json
{
  "mcpServers": {
    "slipstream-ui": {
      "command": "node",
      "args": ["path/to/node_modules/@slipstream-ui/mcp-server/dist/index.js"]
    }
  }
}

Windsurf

Configure in your Windsurf settings file.

Available Tools

list_components

List all available Slipstream UI components with optional filters.

// List all components
list_components()

// Filter by package
list_components(package="@slipstream-ui/core")

// Filter by tier
list_components(tier="atom")

// Combine filters
list_components(package="@slipstream-ui/ai", tier="molecule")

get_component_manifest

Get the complete COMPONENT_MANIFEST for a specific component.

// Get button manifest
get_component_manifest(componentId="button")

// Get message manifest
get_component_manifest(componentId="message")

Example Usage

Here's how an AI agent might use the MCP server:

// AI Agent Flow:

1. Agent: "I need to create a button"
   MCP: list_components(package="@slipstream-ui/core", tier="atom")
   → Returns: Button, Input, Badge, Avatar

2. Agent: "Get the button manifest"
   MCP: get_component_manifest(componentId="button")
   → Returns: Full COMPONENT_MANIFEST with props, examples, etc.

3. Agent: "Create a primary action button"
   → Uses manifest props: variant="default"
   → Uses manifest examples: <Button>Click me</Button>
   → Follows content guidelines for button text
   → Ensures accessibility requirements

Benefits

Zero Hallucination: AI agents get exact specifications, no guessing
Real-time Updates: Always reflects the latest component API
Complete Information: Props, examples, accessibility, all in one query
Consistent Patterns: All agents follow the same usage patterns
Reduced Context: Don't need to load entire source code
Filtered Queries: Get exactly what you need (package, tier, etc.)

Development

When developing the MCP server:

# Build the MCP server
cd packages/mcp-server
pnpm build

# Test locally
node dist/index.js

# The server runs on stdio and responds to MCP protocol messages

Troubleshooting

Server not found

Ensure the path to the MCP server executable is correct in your configuration. Use the full path to the built file:

// Instead of:
"args": ["@slipstream-ui/mcp-server"]

// Use full path:
"args": ["/absolute/path/to/node_modules/@slipstream-ui/mcp-server/dist/index.js"]

Components not showing

The MCP server currently includes a static list of components. In production, it would load from the actual manifest files. Check that the component IDs match what you're querying.

Permission errors

Ensure the MCP server has read permissions to access the manifest files in the packages directory.

MCP Server