MCP API Reference
Complete reference for all available MCP tools and their usage
API Usage
All tools are accessible through the MCP protocol. Use your AI assistant to call these tools by providing the tool name and required parameters.
Available Tool Categories
Comprehensive MCP tools for every aspect of UI development with Aki UI
Component Discovery
Discover and explore Aki UI components with powerful search and detailed information retrieval tools.
Code Generation
Generate complete React components and project structures with Aki UI integration and best practices.
Documentation
Access comprehensive documentation, examples, and best practices for effective Aki UI usage.
Theme Management
Create, customize, and apply themes to achieve perfect visual consistency across your applications.
Optimization
Analyze and optimize your components for performance, accessibility, and maintainability.
Interactive API Explorer
Select a category below to explore available tools and their detailed documentation.
Component Discovery
Discover and explore Aki UI components with powerful search and detailed information retrieval tools.
search_components
search_componentsSearch for Aki UI components by name, category, or description
Parameters
Search query (component name, category, or keywords)
Filter by component category (Layout, Data Entry, Data Display, Feedback, Navigation, Interactive)
Returns
Array of matching components with basic information
Example Usage
// Search for form-related components
{
"query": "form input",
"category": "Data Entry"
}get_component_details
get_component_detailsGet detailed information about a specific component
Parameters
Component name (e.g., Button, Card, Input)
Returns
Detailed component information including props, examples, and accessibility guidelines
Example Usage
// Get details about the Button component
{
"name": "Button"
}list_all_components
list_all_componentsList all available Aki UI components with brief descriptions
Parameters
No parameters required
Returns
Complete list of all available components with basic information
Example Usage
// Get all components
{}Code Generation
Generate complete React components and project structures with Aki UI integration and best practices.
generate_component
generate_componentGenerate React component code using Aki UI components
Parameters
Type of component to generate (form, dashboard, card, table, layout, custom)
List of Aki UI components to use
Component properties and configuration
Features to include (validation, dark mode, responsive, etc.)
Returns
Generated React component code with proper imports and usage
Example Usage
// Generate a contact form
{
"type": "form",
"components": ["Input", "Button", "Card"],
"features": ["validation", "responsive"],
"props": {
"title": "Contact Form",
"fields": ["name", "email", "message"]
}
}init_project
init_projectInitialize a complete React project with Aki UI setup
Parameters
Type of project (vite-react, next-js, react-app, dashboard, website, admin-panel, portfolio)
Name of the project
Features to include (typescript, tailwind, router, auth, forms, etc.)
Default theme style (default, dark, modern, minimal, colorful)
Include example components and pages
Returns
Complete project structure with configuration files and example code
Example Usage
// Initialize a Next.js dashboard project
{
"projectType": "next-js",
"projectName": "my-dashboard",
"features": ["typescript", "tailwind", "auth"],
"theme": "modern",
"includeExamples": true
}Documentation
Access comprehensive documentation, examples, and best practices for effective Aki UI usage.
search_docs
search_docsSearch Aki UI documentation for specific topics or components
Parameters
Search query for documentation (component names, features, concepts)
Type of documentation to search (component, guide, example, api, all)
Returns
Relevant documentation sections and guides
Example Usage
// Search for theming documentation
{
"query": "dark mode theming",
"type": "guide"
}get_examples
get_examplesGet usage examples for specific Aki UI components
Parameters
Component name to get examples for
Complexity level of examples (basic, intermediate, advanced, all)
Returns
Code examples demonstrating component usage
Example Usage
// Get advanced Button examples
{
"component": "Button",
"complexity": "advanced"
}get_best_practices
get_best_practicesGet best practices and guidelines for Aki UI usage
Parameters
Best practices topic (accessibility, performance, theming, forms, layouts, general)
Returns
Best practices guidelines and recommendations
Example Usage
// Get accessibility best practices
{
"topic": "accessibility"
}Theme Management
Create, customize, and apply themes to achieve perfect visual consistency across your applications.
get_theme
get_themeGet current theme configuration
Parameters
No parameters required
Returns
Current theme configuration object
Example Usage
// Get current theme
{}generate_theme
generate_themeGenerate a custom theme configuration
Parameters
Theme style preset (modern, classic, minimal, colorful, dark, custom)
Primary brand color (hex, rgb, or color name)
Theme preferences (roundedCorners, boldText, largeSpacing)
Returns
Generated theme configuration object
Example Usage
// Generate a modern blue theme
{
"style": "modern",
"primaryColor": "#3B82F6",
"preferences": {
"roundedCorners": true,
"boldText": false,
"largeSpacing": false
}
}apply_theme_vars
apply_theme_varsGenerate CSS custom properties for theme variables
Parameters
Theme configuration object
Output format for theme variables (css, tailwind, json)
Returns
CSS custom properties or theme variable definitions
Example Usage
// Generate CSS variables for theme
{
"config": {
"colors": {
"primary": "#3B82F6",
"secondary": "#64748B"
}
},
"format": "css"
}Optimization
Analyze and optimize your components for performance, accessibility, and maintainability.
optimize_component
optimize_componentOptimize React component code for better performance and accessibility
Parameters
React component code to optimize
Optimization focus area (performance, accessibility, bundle-size, best-practices)
Returns
Optimized component code with performance and accessibility improvements
Example Usage
// Optimize component for performance
{
"code": "export function MyComponent() { ... }",
"focus": "performance"
}validate_code
validate_codeValidate React/Aki UI component code for best practices
Parameters
React component code to validate
Returns
Validation results with suggestions for improvements
Example Usage
// Validate component code
{
"code": "export function MyComponent() { ... }"
}Error Handling
All MCP tools return structured responses. In case of errors, you'll receive an error response with detailed information about what went wrong.
Common Error Types
Invalid Parameters
Missing or incorrect parameter types
Component Not Found
Requested component doesn't exist
Generation Error
Issues during code generation
Theme Error
Invalid theme configuration
Example Error Response
{
"content": [
{
"type": "text",
"text": "Error executing tool search_components: Component category 'invalid' not found"
}
],
"isError": true
}Getting Started
First Steps
Install and configure the MCP server
Test the connection with list_all_components
Search for components with search_components
Generate your first component with generate_component
Best Practices
Always validate parameters before making tool calls
Use specific queries for better search results
Check component details before generating code
Apply themes after generating components