MCP Integration

Model Context Protocol server for seamless AI assistant integration with Aki UI components.

What is MCP?

The Model Context Protocol (MCP) is an open standard that enables AI assistants to securely access external tools and data sources. Aki UI's MCP server provides real-time access to component documentation, code generation, and project initialization capabilities.

🎯 Key Benefits:

  • • Real-time component discovery and documentation
  • • Intelligent code generation with context awareness
  • • Complete project initialization with best practices
  • • Theme management and customization assistance
  • • Performance and accessibility optimization

Features

Component Discovery

Search and discover Aki UI components by name, category, or description with intelligent filtering.

Search Tools

Code Generation

Generate React components, forms, dashboards, and complete project templates with best practices.

AI Powered

Documentation Access

Real-time access to component docs, API references, examples, and best practices.

Live Docs

Theme Management

Generate and customize themes, convert to CSS variables, and manage design tokens.

Theming

Validation & Testing

Validate component usage, generate tests, and ensure accessibility compliance.

Quality

Performance Analysis

Analyze component performance, bundle size, and optimization opportunities.

Performance

Installation

NPM Installation

npm install -g @akitectio/aki-ui-mcp-server

After installation, you can verify it works by running:

aki-ui-mcp --version

Claude Desktop Configuration

Add to your Claude Desktop configuration file:

{
  "mcpServers": {
    "aki-ui": {
      "command": "aki-ui-mcp"
    }
  }
}

Alternative: Use with npx

If you prefer not to install globally, you can use npx:

{
  "mcpServers": {
    "aki-ui": {
      "command": "npx",
      "args": ["@akitectio/aki-ui-mcp-server"]
    }
  }
}

Available Tools

🔍 Component Discovery

Search and filter components by name, category, or functionality.

list_all_components(), search_components(query), get_component_details(name)

🛠️ Code Generation

Generate components, forms, layouts, and complete projects.

generate_component(type, props), generate_form(schema), generate_layout(type)

🎨 Theme Management

Create and customize themes, convert to CSS variables.

generate_theme(style, color), apply_theme_vars(config), get_theme()

🚀 Project Initialization

Initialize complete React projects with Aki UI setup.

init_project(type, name, features), get_best_practices(topic)

✅ Validation & Testing

Validate component usage and generate comprehensive tests.

validate_code(code), generate_tests(component), accessibility_audit(code)

Usage Examples

Component Discovery

User: "Show me all form components"

AI: "I'll search for form components using MCP..."

search_components("form")

Component Generation

User: "Create a login form with validation"

AI: "I'll generate a login form with proper validation..."

generate_form({ fields: [email, password], validation: true })

Theme Customization

User: "Create a dark theme with purple accent"

AI: "I'll create a custom dark theme..."

generate_theme("dark", "#8B5CF6")

Project Initialization

User: "Initialize a Next.js project with Aki UI"

AI: "I'll set up a complete Next.js project..."

init_project("next-js", "my-app", ["typescript", "tailwind"])

Advanced Features

🎯 Context-Aware Generation

MCP provides context about your existing project, enabling smarter component suggestions and code generation.

  • • Analyzes existing components to maintain consistency
  • • Suggests compatible components based on current usage
  • • Respects project structure and naming conventions

🔄 Real-time Updates

Stay synchronized with the latest Aki UI updates and component changes.

  • • Automatic component metadata synchronization
  • • Latest API changes and deprecation notices
  • • New component announcements and features

🎨 Design System Integration

Seamlessly integrate with your design system and maintain consistency.

  • • Custom theme generation and management
  • • Design token extraction and conversion
  • • Brand color palette integration

MCP Prompt Library

Optimized prompts for MCP-powered AI assistants working with Aki UI.

Troubleshooting

Common Issues

MCP Server Not Found

Ensure the package is installed globally or use npx for local installation.

Claude Desktop Connection

Restart Claude Desktop after updating the configuration file.

Tool Not Available

Check if the MCP server is running and properly configured.

Related Resources

📚 LLM Integration

Learn about direct LLM integration without MCP.

📝 Prompt Library

Explore our comprehensive prompt collection.