- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Code Editor
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Visual Editor
- Typography
The openteam-ui 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 @openteam-ui registry".
Registries are configured in your project's components.json file.
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}Quick Start
Select your MCP client and follow the instructions to configure the openteam-ui MCP server. If you'd like to do it manually, see the Configuration section.
Run the following command in your project:
pnpm dlx openteam-ui@latest mcp init --client claude
Restart Claude Code and try the following prompts:
- Show me all available components in the @openteam-ui registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the @openteam-ui 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 openteam-ui 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 openteam-ui CLI.
- Registry Connection - MCP connects to configured registries (
@openteam-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 openteam-ui MCP server works out of the box with any registry that follows the same flat-file schema supported by openteam-ui.
- OpenTeamAI Registry - The built-in registry with OpenTeamAI UI components
- Third-Party Registries - Any registry following the openteam-ui registry specification
- Private Registries - Your company's internal component libraries
- Namespaced Registries - Multiple registries configured with
@namespacesyntax
Configuration
You can use any MCP client to interact with the openteam-ui MCP server. Here are the instructions for the most popular ones.
Claude Code
To use the openteam-ui MCP server with Claude Code, add the following configuration to your project's .mcp.json file:
{
"mcpServers": {
"openteam-ui": {
"command": "npx",
"args": ["openteam-ui@latest", "mcp"]
}
}
}After adding the configuration, restart Claude Code and run /mcp to see the openteam-ui 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 openteam-ui server to your project's .cursor/mcp.json configuration file:
{
"mcpServers": {
"openteam-ui": {
"command": "npx",
"args": ["openteam-ui@latest", "mcp"]
}
}
}After adding the configuration, enable the openteam-ui MCP server in Cursor Settings.
Once enabled, you should see a green dot next to the openteam-ui 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 openteam-ui server to your project's .vscode/mcp.json configuration file:
{
"servers": {
"openteam-ui": {
"command": "npx",
"args": ["openteam-ui@latest", "mcp"]
}
}
}After adding the configuration, open .vscode/mcp.json and click Start next to the openteam-ui server.
See the VS Code MCP documentation for more details.
Codex
Note: The openteam-ui CLI cannot automatically update ~/.codex/config.toml.
You'll need to add the configuration manually.
To configure MCP in Codex, add the openteam-ui server to ~/.codex/config.toml:
[mcp_servers."openteam-ui"]
command = "npx"
args = ["openteam-ui@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:
{
"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 built-in @openteam-ui
registry.
Authentication
For private registries requiring authentication, set environment variables in your .env.local:
REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_hereFor 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 @openteam-ui registry
- Find me a login form from the @openteam-ui registry
Install Items
- Add the button component to my project
- Create a login form using components from the @openteam-ui registry
- 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
openteam-uiis 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.jsonfile - 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 openteam-ui registries
- Namespaces - Configure multiple registry sources
- Authentication - Secure your private registries
- MCP Specification - Learn about Model Context Protocol
On This Page
Quick StartWhat is MCP?How It WorksSupported RegistriesConfigurationClaude CodeCursorVS CodeCodexConfiguring RegistriesAuthenticationExample PromptsBrowse & SearchInstall ItemsWork with NamespacesTroubleshootingMCP Not RespondingRegistry Access IssuesInstallation FailuresNo Tools or PromptsLearn More