MCP Server

What is MCP?

MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. Nuxt 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 Nuxt UI development.

Available Resources

The Nuxt UI MCP server provides the following resources for discovery:

• resource://nuxt-ui/components: Browse all available components with categories
• resource://nuxt-ui/composables: Browse all available composables with categories
• resource://nuxt-ui/examples: Browse all available code examples
• resource://nuxt-ui/templates: Browse all available project templates
• resource://nuxt-ui/documentation-pages: Browse all available documentation pages

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

Available Tools

The Nuxt UI MCP server provides the following tools organized by category:

Component Tools

• list_components: Lists all available Nuxt UI components with their categories and basic information
• list_composables: Lists all available Nuxt 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

Template Tools

• list_templates: Lists all available Nuxt UI templates with optional category filtering
• get_template: Retrieves template details and setup instructions

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

Migration Tools

• get_migration_guide: Retrieves version-specific migration guides and upgrade instructions

Available Prompts

The Nuxt UI 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
• setup_project_with_template: Get guided setup instructions for project templates

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

Configuration

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

Cursor

Quick Install

Click the button below to install the Nuxt UI MCP server directly in Cursor:

Manual Setup Instructions:

1. Open Cursor and go to "Settings" > "Features" > "Rules for AI"
2. Click "Edit Rules for AI" and navigate to the MCP configuration section
3. Add the Nuxt UI MCP server configuration

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

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui4.nuxt.com/mcp"
    }
  }
}

ChatGPT

Follow these steps to set up Nuxt UI 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: Nuxt UI
   • MCP server URL: https://ui4.nuxt.com/mcp
   • Authentication: None
4. Click Create

The Nuxt UI 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 nuxt-ui-remote https://ui4.nuxt.com/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": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui4.nuxt.com/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": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui4.nuxt.com/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": {
    "nuxt-ui": {
      "source": "custom",
      "type": "http",
      "url": "https://ui4.nuxt.com/mcp"
    }
  }
}

Usage Examples

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

• "List all available Nuxt 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 Nuxt UI during development.