MCP Usage Guide

Learn how to effectively use the Aki UI MCP server with your AI tools for enhanced development workflows.

MCP-Powered Development

The Aki UI MCP server provides real-time access to component documentation, code generation, and optimization tools directly within your AI assistant conversations.

15+ Tools AvailableReal-time AccessClaude Compatible

Quick Start

Basic MCP Commands

1. Search for Components

text
Ask Claude: "Search for form components in Aki UI"

This will use the search_components tool to find relevant form-related components.

2. Generate a Component

text
Ask Claude: "Generate a contact form using Aki UI components"

This will use the generate_component tool to create a complete form with validation.

3. Get Component Details

text
Ask Claude: "Show me the details and props for the Button component"

This will use the get_component_details tool to provide comprehensive information.

Common Usage Scenarios

Component Generation

Generate React components using Aki UI

Component Discovery

Search and explore available components

Code Optimization

Optimize and validate your code

Component Generation

Generate React components using Aki UI

Generate Dashboard

Tool: generate_component

text
Claude: "Create a dashboard with cards and charts"

Generate Form

Tool: generate_component

text
Claude: "Create a contact form with validation"

Advanced Usage

Explore advanced techniques and workflows for power users.

Custom Prompts

Dashboard Generation Prompt

text
Please use the generate_dashboard prompt with the following parameters:
- type: "admin"
- features: "charts, tables, cards, navigation, user management"

Create a comprehensive admin dashboard with modern design patterns.

Form Creation Prompt

text
Use the create_form prompt to generate:
- fields: "name, email, phone, company, message"
- validation: "required fields, email format, phone format"

Include proper error handling and success states.

Best Practices

Effective MCP Usage

  • • Be specific about component requirements
  • • Use descriptive prompts for better results
  • • Combine multiple tools in a single conversation
  • • Ask for explanations of the generated code
  • • Request modifications and improvements iteratively
  • • Leverage resources for comprehensive information

Common Pitfalls

  • • Being too vague in component descriptions
  • • Not specifying design requirements clearly
  • • Forgetting to mention accessibility needs
  • • Not asking for TypeScript types when needed
  • • Overlooking responsive design requirements
  • • Not validating generated code

Troubleshooting

MCP Server Not Responding

If Claude cannot access the MCP tools, check your configuration:

bash
# Check if MCP server is running
npx @akitectio/aki-ui-mcp-server

# Verify Claude configuration
cat ~/.config/claude/claude_desktop_config.json

Tool Not Found Errors

If you get "tool not found" errors, ensure you're using the correct tool names:

  • • search_components - Search for components
  • • get_component_details - Get component information
  • • generate_component - Generate new components
  • • validate_code - Validate code quality
  • • optimize_component - Optimize performance

Start Using MCP Today

Experience the power of AI-assisted development with direct access to Aki UI components and tools.

Install MCP ServerAPI Reference