MCP Server

The Mukoko Registry includes a Model Context Protocol (MCP) server that exposes the registry, brand system, and design tokens to AI assistants. This enables tools like Claude Code to understand and work with the Mukoko design system natively.

What is MCP

The Model Context Protocol is an open standard for connecting AI assistants to external data sources and tools. It allows AI assistants to:

Read structured data (components, tokens, guidelines)
Call tools (search components, generate install commands, scaffold new components)
Stay current — the MCP server always reflects the latest registry state

Endpoint

The MCP server is served at /mcp via Streamable HTTP transport:


POST https://registry.mukoko.com/mcp    — JSON-RPC requests
GET  https://registry.mukoko.com/mcp    — SSE stream
DELETE https://registry.mukoko.com/mcp  — cleanup
OPTIONS https://registry.mukoko.com/mcp — CORS preflight

Configuration

Claude Code

Add to .claude/settings.json:


{
  "mcpServers": {
    "mukoko-registry": {
      "type": "url",
      "url": "https://registry.mukoko.com/mcp"
    }
  }
}

Other MCP clients

Any MCP-compatible client can connect using the Streamable HTTP transport at https://registry.mukoko.com/mcp.

Resources

Resources are read-only data that AI assistants can access:

URI	Description
`mukoko://registry`	Full component registry index (all 94 items)
`mukoko://brand`	Complete brand system data (minerals, typography, spacing)
`mukoko://design-tokens`	Five African Minerals palette and semantic tokens
`mukoko://guidelines`	Design system usage guidelines
`mukoko://architecture`	Ecosystem architecture (principles, data layer, pipeline)

Tools

Tools are callable actions the AI assistant can invoke:

`list_components`

List all registry components, optionally filtered by type.


{ "type": "registry:ui" }

Returns: Array of component names and descriptions.

`get_component`

Get a specific component’s source code and metadata.


{ "name": "button" }

Returns: Full component JSON including inline source code.

`search_components`

Search components by name or description.


{ "query": "date picker" }

Returns: Matching components ranked by relevance.

`get_design_tokens`

Get the complete design token set: colors, typography, spacing, radius.

Returns: Structured token data with light/dark values.

`scaffold_component`

Generate a new component following the CVA + Radix + cn() pattern.


{ "name": "status-badge", "description": "A badge showing status with color coding" }

Returns: Complete component source code following Mukoko patterns.

`get_install_command`

Get the shadcn CLI install command for one or more components.


{ "components": ["button", "card", "dialog"] }

Returns: The formatted install command.

`get_brand_info`

Get information about a specific ecosystem brand.


{ "brand": "mukoko" }

Returns: Brand data including tagline, description, and URL.

`get_architecture_info`

Get architecture information by category.


{ "category": "data-layer" }

Returns: Architecture data for the specified category.

Architecture

The MCP server is implemented in two files:

lib/mcp-server.ts — server factory with all tools and resources defined
app/mcp/route.ts — HTTP endpoint using WebStandardStreamableHTTPServerTransport

The server reads data directly from lib/brand.ts and lib/architecture.ts — it does not make HTTP requests to localhost.

Use cases

Building a new Mukoko app

An AI assistant can use the MCP server to:

Read the design tokens to configure globals.css
Search for relevant components
Generate install commands
Scaffold custom components following Mukoko patterns

Code review

During PR review, the AI assistant can:

Verify components use the correct design tokens
Check that new components follow the CVA + Radix + cn() pattern
Validate accessibility compliance against Mukoko standards