MCP Server

What is MCP?

MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. Pohon UI provides an MCP server that allows AI assistants like Claude Code, Cursor, and Windsurf to access component information, source code, and usage examples directly.

The MCP server provides structured access to our component library, making it easy for AI tools to understand and assist with Pohon UI development.

Available Resources

The Akar MCP server provides the following resources for discovery:

• resource://akar/components: Browse all available components with categories
• resource://akar/composables: Browse all available composables with categories
• resource://akar/examples: Browse all available code examples
• resource://akar/documentation-pages: Browse all available documentation pages

You're able to access these resources with tools like Claude Code by using @.

Available Tools

The Akar MCP server provides the following tools organized by category:

Component Tools

• list_components: Lists all available Akar & Pohon UI components with their categories and basic information
• list_composables: Lists all available Akar & Pohon UI composables with their categories and basic information
• get_component: Retrieves component documentation and details
• get_component_metadata: Retrieves detailed metadata for a component including props, slots, and events
• search_components_by_category: Searches components by category or text filter

Documentation Tools

• list_documentation_pages: Lists all documentation pages
• get_documentation_page: Retrieves documentation page content by URL path
• list_getting_started_guides: Lists all getting started guides and installation instructions

Example Tools

• list_examples: Lists all available UI examples and code demonstrations
• get_example: Retrieves specific UI example implementation code and details

Available Prompts

The Akar MCP server provides guided prompts for common workflows:

• find_component_for_usecase: Find the best component for your specific use case
• implement_component_with_props: Generate complete component implementation with proper props

You're able to access these resources with tools like Claude Code by using /.

Configuration

The Akar MCP server uses HTTP transport and can be configured in different AI assistants.

ChatGPT

Follow these steps to set up Akar as a connector within ChatGPT:

1. Enable Developer mode:
   • Go to Settings → Connectors → Advanced settings → Developer mode
2. Open ChatGPT settings
3. In the Connectors tab, Create a new connector:
   • Give it a name: Akar
   • MCP server URL: https://akar.vinicunca.dev/mcp
   • Authentication: None
4. Click Create

The Akar connector will appear in the composer's "Developer mode" tool later during conversations.

Claude Code

Add the server using the CLI command:

claude mcp add --transport http akar https://akar.vinicunca.dev/mcp

Cursor

Manual Setup Instructions:

1. Open Cursor and go to "Settings" > "Tools & MCP"
2. Add the Akar MCP server configuration

Or manually create/update .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "akar": {
      "type": "http",
      "url": "https://akar.vinicunca.dev/mcp"
    }
  }
}

Le Chat Mistral

Setup Instructions:

1. Navigate to "Intelligence" > "Connectors"
2. Click on "Add Connector" button, then select "Custom MCP Connector"
3. Create your Custom MCP Connector:
   • Connector Name : Akar
   • Connector Server : https://akar.vinicunca.dev/mcp

Visual Studio Code

Setup Instructions:

1. Open VS Code and access the Command Palette (Ctrl/Cmd + Shift + P)
2. Type "Preferences: Open Workspace Settings (JSON)" and select it
3. Navigate to your project's .vscode folder or create one if it doesn't exist
4. Create or edit the mcp.json file with the following configuration:

{
  "servers": {
    "akar": {
      "type": "http",
      "url": "https://akar.vinicunca.dev/mcp"
    }
  }
}

Windsurf

Setup Instructions:

1. Open Windsurf and navigate to "Settings" > "Windsurf Settings" > "Cascade"
2. Click the "Manage MCPs" button, then select the "View raw config" option
3. Add the following configuration to your MCP settings:

{
  "mcpServers": {
    "akar": {
      "type": "http",
      "url": "https://akar.vinicunca.dev/mcp"
    }
  }
}

Zed

Setup Instructions:

1. Open Zed and go to "Settings" > "Open Settings"
2. Navigate to the JSON settings file
3. Add the following context server configuration to your settings:

{
  "context_servers": {
    "akar": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://akar.vinicunca.dev/mcp"],
      "env": {}
    }
  }
}

Opencode

Setup Instructions:

1. In your project root, create opencode.json
2. Add the following configuration:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "akar": {
      "type": "remote",
      "url": "https://akar.vinicunca.dev/mcp",
      "enabled": true
    }
  }
}

Usage Examples

Once configured, you can ask your AI assistant questions like:

• "List all available Pohon UI components"
• "Get Button component documentation"
• "What props does Input accept?"
• "Find form-related components"
• "List dashboard templates"
• "Get template setup instructions"
• "Show installation guide"
• "Get v4 migration guide"
• "List all examples"
• "Get ContactForm example code"

The AI assistant will use the MCP server to fetch structured JSON data and provide guided assistance for Akar & Pohon UI during development.