Integrations

MCP (Model Context Protocol) integration

Connect the Country Club UI Kit to AI assistants like Claude Code and Cursor via MCP. Browse, search, and compose components directly from your assistant using natural language.

Public & no auth. The server is live at https://uikit.country.club/api/mcp and serves the whole kit freely — no login, no API key, no PRO tier.

Overview

The Country Club MCP server lets an AI assistant query the kit directly, so it writes code that matches the design system without you pasting docs. It can search components, pull a component's import statement and real usage examples, and read the full kit guidelines. You might ask:

Find a component: "what does the kit have for picking a date?"
Get usage: "show me how to use the Select component"
Compose a layout: "a tee-time booking form using the kit's form bindings"

Available tools

The server exposes four read-only tools:

list_components — every component, optionally filtered by category.
search_components — find components by description in natural language.
get_component — a component's import statement and full usage examples.
get_guidelines — the complete kit conventions (the same content as /AGENT.md).

Prerequisites

An MCP-capable assistant — Claude Code, Cursor, VS Code (Copilot), Windsurf, or the Gemini CLI
A project set up with the kit — see the Next.js or Vite guide
Node.js 18+ installed

Setup

Choose your assistant and add the Country Club MCP server.

Add the server from your terminal:

claude mcp add --transport http countryclub https://uikit.country.club/api/mcp

Or configure it manually in ~/.claude.json:

{
  "mcpServers": {
    "countryclub": {
      "type": "http",
      "url": "https://uikit.country.club/api/mcp"
    }
  }
}

Verify the connection with claude mcp list, or type /mcp inside a Claude Code session.

Start using

Once connected, ask your assistant for components in plain language:

"I need a members dashboard with charts and a recent activity table"
"Add a tee-time booking form with date and time pickers"
"Build a dark settings page with tabs and a save button"