Get Started
AI-Ready
HomeDocumentationIntegrationsClaude MCP

Claude MCP Integration

Advanced • 5 minute setup

Connect Claude directly to FrogiUI with our Model Context Protocol (MCP) server. Get enhanced component access, real-time updates, and seamless development workflow.

Prerequisites

Required Before Setup

Claude Desktop App
Download from Anthropic's website
Node.js 18+
Required for MCP server
FrogiUI Project
Existing React project with FrogiUI
Terminal Access
For running installation commands
Download Claude Desktop App

Installation Steps

1

Install MCP Server

Installs the FrogiUI MCP server globally

Terminal
npm install -g @frogiui/mcp-server
2

Initialize Configuration

Sets up MCP server configuration for Claude

Terminal
frogiui-mcp init
3

Start Server

Starts the MCP server for Claude integration

Terminal
frogiui-mcp start

Claude Configuration

Configure Claude Desktop

Add the FrogiUI MCP server to your Claude Desktop configuration:

1. Open Claude Configuration

File path:
~/.claude/claude_desktop_config.json

2. Add FrogiUI MCP Server

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.

3. Restart Claude Desktop

Close and reopen Claude Desktop to load the MCP server configuration.

Verify Installation

Test the Integration

1. Check MCP Connection

"Can you access my FrogiUI components?"

Claude should confirm it can see your component library and project structure.

2. Request Component Creation

"Create a hero section for my landing page using the components in my project"

Claude should generate code using your actual project structure and imports.

MCP Features

Enhanced Capabilities

Direct Component Access
Claude can read your actual component library
Project-Aware Imports
Correct import paths for your project structure
Real-time Updates
Changes reflected immediately in Claude

Development Benefits

Context-Aware Code
Claude understands your existing codebase
Smart Suggestions
Component recommendations based on usage
Workflow Integration
Works with your existing development tools

Troubleshooting

Common Issues

MCP Server not connecting

  • • Check that Node.js 18+ is installed
  • • Verify the configuration file path is correct
  • • Restart Claude Desktop after configuration changes

Claude can't see components

  • • Ensure FROGIUI_PROJECT_PATH points to your project root
  • • Check that FrogiUI is installed in your project
  • • Run frogiui-mcp diagnose for detailed status

Getting Help

If you're still having issues, try these resources:

→ Join our Discord community→ Report issues on GitHub

Next Steps

Building Apps

Learn to build complete applications using Claude MCP and FrogiUI components.

Start Building

Cursor IDE Plugin

Add FrogiUI support directly in your IDE for seamless development workflow.

Setup Cursor

MCP Examples

Advanced examples using Claude MCP with FrogiUI for complex applications.

View Examples