npm package: @frogiui/mcp-server
Description: FrogiUI Model Context Protocol server for AI-powered component discovery with Claude
Author: FrogiUI Team
Latest version: 1.0.0

# @frogiui/mcp-server

FrogiUI Model Context Protocol (MCP) server for Claude Desktop integration. This package enables Claude to directly access and work with FrogiUI components, providing AI-powered UI development capabilities.

## Installation

```bash
npm install -g @frogiui/mcp-server
```

## Quick Setup

1. **Install the MCP server:**
   ```bash
   npm install -g @frogiui/mcp-server
   ```

2. **Initialize Claude configuration:**
   ```bash
   frogiui-mcp init
   ```

3. **Restart Claude Desktop**

4. **Test the integration:**
   Ask Claude: *"Can you access my FrogiUI components?"*

## Configuration

### Claude Desktop Setup

The MCP server integrates with Claude Desktop through the configuration file:

**Location:** `~/.claude/claude_desktop_config.json`

**Configuration:**
```json
{
  "mcpServers": {
    "frogiui": {
      "command": "npx",
      "args": ["@frogiui/mcp-server"],
      "env": {
        "FROGIUI_PROJECT_PATH": "/path/to/your/project"
      }
    }
  }
}
```

Replace `/path/to/your/project` with your actual project directory path.

## Usage

Once configured, Claude can directly access FrogiUI components:

### Search Components
*"Find components for a hero section"*

### Get Component Details  
*"Show me details about the pricing-three-tiers component"*

### Generate Code
*"Create a hero section for my SaaS product using FrogiUI components"*

### List Categories
*"What component categories are available?"*

## Available Tools

The MCP server provides these tools to Claude:

- **search_components**: Search for components using natural language
- **get_component**: Get detailed component information and props
- **list_categories**: List all available component categories  
- **generate_code**: Generate React code with specified props

## CLI Commands

```bash
frogiui-mcp start           # Start the MCP server
frogiui-mcp init            # Initialize Claude Desktop configuration  
frogiui-mcp diagnose        # Run diagnostics and check setup
frogiui-mcp help            # Show help information
```

### Advanced Usage

```bash
# Start with HTTP transport (for debugging)
frogiui-mcp start --transport http --port 3001

# Enable debug logging
frogiui-mcp start --debug

# Enable CORS for web-based testing
frogiui-mcp start --transport http --cors
```

## Diagnostics

If you encounter issues, run diagnostics:

```bash
frogiui-mcp diagnose
```

This will check:
- Node.js version compatibility
- FrogiUI package availability
- Claude Desktop configuration
- MCP server connectivity

## Example Claude Conversations

### Creating a Landing Page
```
You: "Create a landing page for my AI startup using FrogiUI"

Claude: I'll help you create a landing page using FrogiUI components. Let me search for suitable components...

[Uses search_components tool]

I found several components perfect for your AI startup landing page:
- Hero Simple Centered for the main section
- Features Grid to showcase AI capabilities  
- Pricing Three Tiers for your service plans
- Testimonials Three Column for social proof

[Generates complete React code with proper imports and props]
```

### Component Discovery
```
You: "I need a team section with large photos"

Claude: [Uses search_components("team large photos")]

Perfect! I found the Team Large Photos component. Let me get the details...

[Uses get_component("team-large-photos")]
[Shows component props and generates sample code]
```

## Troubleshooting

### Common Issues

**Claude doesn't recognize FrogiUI:**
1. Ensure the MCP server is properly configured
2. Restart Claude Desktop after configuration changes
3. Run `frogiui-mcp diagnose` to check setup

**Components not found:**
1. Verify FrogiUI is installed: `npm list frogiui`
2. Check project path in configuration
3. Ensure you're using the latest version

**MCP server not starting:**
1. Check Node.js version (requires 18+)
2. Verify global installation: `npm list -g @frogiui/mcp-server`
3. Try reinstalling: `npm install -g @frogiui/mcp-server`

## Development

### Local Development
```bash
git clone https://github.com/yuvalsuede/frogiui.git
cd frogiui/packages/mcp-server
npm install
npm run build
npm link
```

### Testing
```bash
npm test
```

## Support

- 📚 Documentation: [frogiui.com/docs/integrations/claude-mcp](https://frogiui.com/docs/integrations/claude-mcp)
- 🐛 Issues: [GitHub Issues](https://github.com/yuvalsuede/frogiui/issues)
- 💬 Community: [Discord](https://discord.gg/frogiui)

## License

MIT © FrogiUI Team