MCP Server

What is MCP?

MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. UI Thing provides an MCP server that allows AI assistants like Claude Desktop, Cursor, and VS Code to access component information, source code, and usage examples directly.

The MCP server provides structured access to our component library, making it easy for AI tools to understand and assist with UI Thing development.

Available Resources

The UI Thing MCP server provides the following resources for discovery:

• resource://ui-thing/components: Browse all 60+ accessible UI components with categories
• resource://ui-thing/blocks: Browse all 100+ pre-built page blocks
• resource://ui-thing/prose: Browse all 47 prose/documentation components
• resource://ui-thing/design-patterns: Common patterns and best practices
• resource://ui-thing/page-templates: Complete page templates with implementation examples
• resource://ui-thing/examples: Real-world application examples
• resource://ui-thing/documentation-pages: Browse all available documentation pages
• resource://ui-thing/quick-start: Fast-track guide for AI assistants

You're able to access these resources with tools like Claude Desktop by using @.

Available Tools

The UI Thing MCP server provides the following tools organized by category:

Component Tools

• list-components: Lists all 60+ accessible UI components with categories and metadata
• get-component: Retrieves complete component details including full source code, dependencies, and documentation
• search-components: Fuzzy search across components, blocks, and prose using relevance ranking
• validate-dependencies: Validates dependencies and generates installation commands

Block Tools

• list-blocks: Lists all 100+ pre-built UI blocks with categories
• get-block: Retrieves complete block details with source code and dependencies
• list-block-pages: Lists all block documentation pages

Prose Tools

• list-prose: Lists all 47 prose/documentation components
• get-prose: Retrieves complete prose component details with source code

Documentation Tools

• list-documentation-pages: Lists all documentation pages with metadata
• get-documentation-page: Retrieves markdown documentation content by path

Available Prompts

The UI Thing MCP server provides guided prompts for common workflows:

• setup-project: Complete setup instructions for using UI Thing in a project
• implement-component: Guide for properly implementing a UI Thing component with all dependencies
• build-page: Guide for building complete pages using blocks and components
• create-form: Guide for creating accessible forms with validation
• create-documentation: Guide for creating documentation pages using prose components
• fix-component-issue: Help debug and fix common component issues
• optimize-accessibility: Review implementations for WCAG 2.1 AA compliance

You're able to access these prompts with tools like Claude Desktop by using /.

Configuration

The UI Thing MCP server uses HTTP transport and can be configured in different AI assistants.

Cursor

Manual Setup

Or manually add it to your Cursor settings (~/.cursor/mcp.json):

Cursor Mcp

{
  "mcpServers": {
    "ui-thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  }
}

VS Code

Manual Setup

Or manually add the server to your VS Code MCP configuration (.vscode/mcp.json):

Vscode Mcp

{
  "servers": {
    "ui-thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  }
}

Claude Desktop

Setup Instructions

1. Open Claude Desktop and navigate to "Settings" > "Developer"
2. Click on "Edit Config". This will open the local Claude directory
3. Modify the claude_desktop_config.json file with your custom MCP server configuration:

Claude Desktop Config

{
  "mcpServers": {
    "ui-thing": {
      "command": "npx",
      "args": ["mcp-remote", "https://uithing.com/mcp"]
    }
  }
}

4. Restart Claude Desktop app. The UI Thing MCP server should now be registered.

Windsurf

Setup Instructions

1. Open Windsurf and navigate to "Settings" > "Windsurf Settings" > "Cascade"
2. Click the "Manage MCPs" button, then select the "View raw config" option
3. Add the following configuration to your MCP settings:

Codeium Windsurf Mcp Config

{
  "mcpServers": {
    "ui-thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  }
}

Usage Examples

Once configured, you can ask your AI assistant questions like:

• "List all available UI Thing components"
• "Get Button component documentation and source code"
• "What props does the DatePicker accept?"
• "Find form-related components"
• "Show me blocks for a landing page"
• "Get Header 1 block with installation commands"
• "Validate dependencies for button and dialog components"
• "List all prose components for documentation"
• "Help me build a contact form with validation"

The AI assistant will use the MCP server to fetch structured data and provide guided assistance for UI Thing development.