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 ToolsCode Generation
Generate React components, forms, dashboards, and complete project templates with best practices.
AI PoweredDocumentation Access
Real-time access to component docs, API references, examples, and best practices.
Live DocsTheme Management
Generate and customize themes, convert to CSS variables, and manage design tokens.
ThemingValidation & Testing
Validate component usage, generate tests, and ensure accessibility compliance.
QualityPerformance Analysis
Analyze component performance, bundle size, and optimization opportunities.
PerformanceInstallation
NPM Installation
After installation, you can verify it works by running:
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.
🛠️ Code Generation
Generate components, forms, layouts, and complete projects.
🎨 Theme Management
Create and customize themes, convert to CSS variables.
🚀 Project Initialization
Initialize complete React projects with Aki UI setup.
✅ Validation & Testing
Validate component usage and generate comprehensive tests.
Usage Examples
Component Discovery
User: "Show me all form components"
AI: "I'll search for form components using MCP..."
Component Generation
User: "Create a login form with validation"
AI: "I'll generate a login form with proper validation..."
Theme Customization
User: "Create a dark theme with purple accent"
AI: "I'll create a custom dark theme..."
Project Initialization
User: "Initialize a Next.js project with Aki UI"
AI: "I'll set up a complete Next.js project..."
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.