Park UI MCP Server

A Model Context Protocol (MCP) server for Park UI component library, providing AI assistants with access to Park UI components, APIs, examples, and documentation across React, Vue, and Solid frameworks.

Features

• Component Information: Get detailed docs for all 50+ Park UI components
• Multi-framework Support: React, Vue, and Solid examples and setup
• Installation Guides: Step-by-step installation instructions
• Code Examples: Real-world patterns and use cases
• Documentation Search: Find relevant docs and examples
• Theme Customization: Theming and styling guides

Installation

npm install -g park-ui-mcp-server

Or run directly:

npx park-ui-mcp-server

Usage

Basic Usage

park-ui-mcp-server

With GitHub API Token

park-ui-mcp-server --github-api-key YOUR_TOKEN
# or
park-ui-mcp-server -g YOUR_TOKEN

Environment Variables

export GITHUB_PERSONAL_ACCESS_TOKEN=your_token_here
export LOG_LEVEL=debug
park-ui-mcp-server

Available Tools

Component Tools

• get_parkui_component - Get component info and examples
• list_parkui_components - List all available components
• get_parkui_installation - Installation instructions

Example Tools

• get_parkui_example - Get specific example patterns
• search_parkui_examples - Search examples and snippets

Documentation Tools

• get_parkui_docs - Get documentation for topics

Available Prompts

• component_usage - Usage examples for components
• installation_guide - Installation help
• theming_tutorial - Theming and customization
• migration_guide - Migration from other libraries
• performance_optimization - Performance tips

Available Resources

• get_parkui_components - Component list
• parkui_getting_started - Getting started guide
• parkui_theming_guide - Theming documentation

Example Queries

// Get button component info
{
  "tool": "get_parkui_component",
  "params": { 
    "componentName": "button",
    "framework": "react"
  }
}

// Search for form examples
{
  "tool": "search_parkui_examples", 
  "params": {
    "query": "form validation",
    "framework": "vue"
  }
}

// Get installation guide
{
  "tool": "get_parkui_installation",
  "params": {
    "componentName": "input",
    "framework": "solid"
  }
}

Framework Support

React

• React 18+
• Next.js 13+
• Vite, CRA

Vue

• Vue 3+
• Nuxt 3+
• Composition API

Solid

• SolidJS 1.6+
• SolidStart
• Full reactivity

Configuration

The server can be configured via command line arguments or environment variables:

• --github-api-key, -g: GitHub API token for enhanced rate limits
• --help, -h: Show help information
• --version, -v: Show version

Development

# Clone and install
git clone https://github.com/park-ui/park-ui-mcp-server
cd park-ui-mcp-server
npm install

# Build
npm run build

# Run in development  
npm run dev

# Test
npm test

Architecture

The server follows MCP best practices:

• Tools: Interactive functionality for AI assistants
• Resources: Static content (guides, component lists)
• Prompts: Structured templates for common tasks
• Caching: Intelligent caching for performance
• Error Handling: Robust error handling and validation
• Logging: Comprehensive logging with levels

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT - see LICENSE file

Links

• Park UI Documentation
• Park UI GitHub
• MCP Specification
• Ark UI
• Panda CSS

Support

• GitHub Issues
• GitHub Discussions
• Park UI Community