Blok MCP Server

The MCP Server is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant can:

  • List all available components from the Blok registry
  • Find specific components by name or functionality
  • Add components using simple conversational prompts
  • Access Blok components using the @blok namespace prefix

For example, you can ask your AI assistant to "build a landing page using components from the Blok registry."

Before You Start

Before you initialize an MCP client or try prompts that reference the Blok registry, add the Blok registry to your project so @blok/* components can be resolved.

Add the following to your components.json to configure the Blok registry:

Quick Start

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

To initialize an MCP project for Claude using the shadCN CLI, run the following command:

npx shadcn@latest mcp init --client claude

You can then test that your installation has been successful by trying prompts, for example:

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

Configure MCP in Cursor

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

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

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

See the Cursor MCP documentation for more details.

Example Prompts

Once the MCP server is configured, you can interact with the Blok registry with natural language, for example:

  • Show me all available components in the blok registry.
  • What components are available from blok?
  • Find me a hero section from the blok registry.
  • Install @blok/button.
  • Add button, card and alert from the Blok registry.
  • Build a dashboard layout using blok components

Troubleshooting

MCP Not Responding

If the MCP server isn't responding to prompts:

  1. Verify the MCP server is properly configured and enabled in Cursor Settings.
  2. Restart Cursor after configuration changes.
  3. In Cursor, view logs by clicking View, then click Output, and select MCP: project-* in the dropdown.

Registry Access Issues

If components aren't loading from the Blok registry:

  1. Verify the @blok registry URL is correct
  2. Ensure environment variables are set if using private registry
  3. Confirm the Blok registry is online and accessible
  4. Ensure namespace syntax is correct (@blok/component-name)

No Tools or Prompts

If you see the No tools or prompts message:

  1. Run npx clear-npx-cache
  2. Try to re-enable the MCP server in Cursor Settings
  3. View → Output → select MCP: project-* in the dropdown