MCP Server

Use the pitsi MCP server to browse, search, and install components from registries.

The pitsi 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 pitsi registry".

Registries are configured in your project's components.json file.

components.json

pitsi Next.js 15 + React 19

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}

Quick Start

Select your MCP client and follow the instructions to configure the pitsi MCP server. If you'd like to do it manually, see the Configuration section.

Run the following command in your project:


pnpm dlx pitsi@latest mcp init --client claude

Restart Claude Code and try the following prompts:

Show me all available components in the pitsi registry
Add the button, dialog and card components to my project
Create a contact form using components from the pitsi registry

Note: You can use /mcp command in Claude Code to debug the MCP server.

What is MCP?

Model Context Protocol (MCP) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the pitsi MCP server, your AI assistant gains direct access to:

Browse Components - List all available components, blocks, and templates from any configured registry
Search Across Registries - Find specific components by name or functionality across multiple sources
Install with Natural Language - Add components using simple conversational prompts like "add a login form"
Support for Multiple Registries - Access public registries, private company libraries, and third-party sources

How It Works

The MCP server acts as a bridge between your AI assistant, component registries and the pitsi CLI.

Registry Connection - MCP connects to configured registries (pitsi/ui, private registries, third-party sources)
Natural Language - You describe what you need in plain English
AI Processing - The assistant translates your request into registry commands
Component Delivery - Resources are fetched and installed in your project

Supported Registries

The pitsi MCP server works out of the box with any pitsi-compatible registry.

pitsi/ui Registry - The default registry with all pitsi/ui components
Third-Party Registries - Any registry following the pitsi registry specification
Private Registries - Your company's internal component libraries
Namespaced Registries - Multiple registries configured with @namespace syntax

Configuration

You can use any MCP client to interact with the pitsi MCP server. Here are the instructions for the most popular ones.

Claude Code

To use the pitsi MCP server with Claude Code, add the following configuration to your project's .mcp.json file:

.mcp.json

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

After adding the configuration, restart Claude Code and run /mcp to see the pitsi MCP server in the list. If you see Connected, you're good to go.

See the Claude Code MCP documentation for more details.

Cursor

To configure MCP in Cursor, add the pitsi server to your project's .cursor/mcp.json configuration file:

.cursor/mcp.json

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

After adding the configuration, enable the pitsi MCP server in Cursor Settings.

Once enabled, you should see a green dot next to the pitsi server in the MCP server list and a list of available tools.

See the Cursor MCP documentation for more details.

VS Code

To configure MCP in VS Code with GitHub Copilot, add the pitsi server to your project's .vscode/mcp.json configuration file:

.vscode/mcp.json

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

After adding the configuration, open .vscode/mcp.json and click Start next to the pitsi server.

See the VS Code MCP documentation for more details.

Codex

Note: The pitsi CLI cannot automatically update ~/.codex/config.toml. You'll need to add the configuration manually.

To configure MCP in Codex, add the pitsi server to ~/.codex/config.toml:

~/.codex/config.toml

[mcp_servers.pitsi]
command = "npx"
args = ["pitsi@latest", "mcp"]

After adding the configuration, restart Codex to load the MCP server.

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.

Configure additional registries in your components.json:

components.json

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Note: No configuration is needed to access the standard pitsi/ui registry.

Authentication

For private registries requiring authentication, set environment variables in your .env.local:

.env.local

REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

For more details on registry authentication, see the Authentication documentation.

Example Prompts

Once the MCP server is configured, you can use natural language to interact with registries. Try one of the following prompts:

Browse & Search

Show me all available components in the pitsi registry
Find me a login form from the pitsi registry

Install Items

Add the button component to my project
Create a login form using pitsi components
Install the Cursor rules from the acme registry

Work with Namespaces

Show me components from acme registry
Install @internal/auth-form
Build me a landing page using hero, features and testimonials sections from the acme registry

Troubleshooting

MCP Not Responding

If the MCP server isn't responding to prompts:

Check Configuration - Verify the MCP server is properly configured and enabled in your MCP client
Restart MCP Client - Restart your MCP client after configuration changes
Verify Installation - Ensure pitsi is installed in your project
Check Network - Confirm you can access the configured registries

Registry Access Issues

If components aren't loading from registries:

Check components.json - Verify registry URLs are correct
Test Authentication - Ensure environment variables are set for private registries
Verify Registry - Confirm the registry is online and accessible
Check Namespace - Ensure namespace syntax is correct (@namespace/component)

Installation Failures

If components fail to install:

Check Project Setup - Ensure you have a valid components.json file
Verify Paths - Confirm the target directories exist
Check Permissions - Ensure write permissions for component directories
Review Dependencies - Check that required dependencies are installed

No Tools or Prompts

If you see the No tools or prompts message, try the following:

Clear the npx cache - Run npx clear-npx-cache
Re-enable the MCP server - Try to re-enable the MCP server in your MCP client
Check Logs - In Cursor, you can see the logs under View -> Output and select MCP: project-* in the dropdown.

Learn More

Registry Documentation - Complete guide to pitsi registries
Namespaces - Configure multiple registry sources
Authentication - Secure your private registries
MCP Specification - Learn about Model Context Protocol