Servidor MCP

O que é o MCP?

O MCP (Model Context Protocol) é um protocolo padronizado que permite a assistentes de IA acessarem fontes de dados e ferramentas externas. O Nitro UI fornece um servidor MCP que permite a assistentes de IA como Claude Code, Cursor e Windsurf acessarem diretamente informações dos componentes, código-fonte e exemplos de uso.

O servidor MCP fornece acesso estruturado à nossa biblioteca de componentes, facilitando que ferramentas de IA entendam e auxiliem no desenvolvimento com o Nitro UI.

Recursos disponíveis

O servidor MCP do Nitro UI fornece os seguintes recursos para descoberta:

• 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

Você pode acessar esses recursos com ferramentas como o Claude Code usando @.

Ferramentas disponíveis

O servidor MCP do Nitro UI fornece as seguintes ferramentas organizadas por categoria:

Ferramentas de busca

• search_components: Search components by name, description, or category. With no params, lists all components
• search_composables: Search composables by name or description. With no params, lists all composables
• search_icons: Search for icons across Iconify collections (defaults to lucide). Returns icon names in the i-{prefix}-{name} format used by Nitro UI

Ferramentas de componente

• get_component: Retrieves component documentation and details. Supports a sections parameter (usage, examples, api, theme, changelog) to fetch only specific parts and reduce response size
• get_component_metadata: Retrieves detailed metadata for a component including props, slots, and events (lightweight, no documentation content)

Ferramentas de documentação

• search_documentation: Search documentation pages by title, description, or section. With no params, lists all pages. Use section to filter (e.g., "getting-started", "components")
• get_documentation_page: Retrieves documentation page content by URL path. Supports a headings parameter to fetch only specific h2 sections (e.g., ["Usage", "API"]) and reduce response size

Ferramentas de exemplo

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

Prompts disponíveis

O servidor MCP do Nitro UI fornece prompts guiados para fluxos de trabalho comuns:

• 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

Você pode acessar esses recursos com ferramentas como o Claude Code usando /.

Configuração

O servidor MCP do Nitro UI usa transporte HTTP e pode ser configurado em diferentes assistentes de IA.

ChatGPT

Siga estas etapas para configurar o Nitro UI como um conector dentro do ChatGPT:

1. Enable Developer mode:
   • Go to "Settings" > "Connectors" > "Advanced settings" > "Developer mode"
2. Open ChatGPT settings
3. Na aba Connectors, crie um novo conector:
   • Give it a name: Nitro UI
   • MCP server URL: https://ui.nitro.news/mcp
   • Authentication: None
4. Click Create

O conector do Nitro UI aparecerá na ferramenta "Developer mode" do compositor mais tarde, durante as conversas.

Claude Code

Adicione o servidor usando o comando da CLI:

claude mcp add --transport http nuxt-ui-remote https://ui.nitro.news/mcp

Claude Desktop

Instruções de configuração:

1. Abra o Claude Desktop e navegue até "Settings" > "Developer".
2. Clique em "Edit Config". Isso abrirá o diretório local do Claude.
3. Modifique o arquivo claude_desktop_config.json com a sua configuração personalizada do servidor MCP.

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nitro.news/mcp"
      ]
    }
  }
}

4. Reinicie o aplicativo Claude Desktop. O servidor MCP do Nitro UI deve estar registrado agora.

Cursor

Instalação rápida:

Clique no botão abaixo para instalar o servidor MCP do Nitro UI diretamente no Cursor:

Instruções de configuração manual:

1. Abra o Cursor e vá em "Settings" > "Tools & MCP"
2. Add the Nitro UI MCP server configuration

Ou crie/atualize manualmente o .cursor/mcp.json na raiz do seu projeto:

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

Gemini CLI

Instruções de configuração:

1. Localize o arquivo de configuração da sua Gemini CLI (geralmente ~/.gemini/settings.json ou conforme especificado no seu ambiente).
2. Adicione a seguinte configuração ao seu objeto mcpServers:

{
  "mcpServers": {
    "nuxt-ui": {
      "url": "https://ui.nitro.news/mcp"
    }
  }
}

3. Reinicie a sessão do seu terminal ou recarregue a CLI. As ferramentas do servidor MCP do Nitro UI agora estarão disponíveis para uso.

GitHub Copilot Agent

Se você já configurou servidores MCP no Visual Studio Code, substitua a chave servers por mcpServers e adicione uma chave tools especificando quais ferramentas estão disponíveis para o Copilot.

Instruções de configuração:

1. Navegue até o seu repositório do GitHub
2. Go to Settings > Code & automation > Copilot > Coding agent
3. Na seção MCP configuration, adicione a seguinte configuração:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nitro.news/mcp",
      "tools": ["*"]
    }
  }
}

4. Click Save

Validando a configuração:

Para verificar se o servidor MCP está configurado corretamente:

1. Crie uma issue no seu repositório e atribua-a ao Copilot
2. Aguarde o Copilot criar um pull request
3. No pull request, clique em View session no evento da timeline "Copilot started work"
4. Clique no botão de reticências (...) no canto superior direito e depois clique em Copilot na barra lateral
5. Expanda a etapa Start MCP Servers para ver as ferramentas do Nuxt configuradas

Para mais informações sobre o uso de MCP com o agente de programação do GitHub Copilot, veja Extend coding agent with MCP.

GitHub Copilot CLI

Instruções de configuração:

1. Start GitHub Copilot CLI in interactive mode.
2. Run /mcp add.
3. Preencha o formulário de configuração com:
   • Server Name: nuxt-ui
   • Server Type: HTTP
   • URL: https://ui.nitro.news/mcp
   • HTTP Headers: leave empty
   • Tools: *
4. Pressione Ctrl+S para salvar. O servidor MCP fica disponível imediatamente, sem reiniciar a CLI.

Ou adicione o servidor diretamente ao ~/.copilot/mcp-config.json:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nitro.news/mcp",
      "tools": ["*"]
    }
  }
}

Use /mcp show para confirmar que o servidor está configurado e disponível.

Para mais detalhes, veja Adding MCP servers for GitHub Copilot CLI.

Google Antigravity

Instruções de configuração:

1. Abra a loja de MCP pelo menu "..." no topo do painel do agente do editor.
2. Click on "Manage MCP Servers"
3. Click on "View raw config"
4. Modifique o mcp_config.json com a sua configuração personalizada do servidor MCP:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nitro.news/mcp"
    }
  }
}

5. Volte para a aba "Manage MCP Servers" e clique em "Refresh". O servidor MCP do Nitro UI deve aparecer agora.

Le Chat Mistral

Instruções de configuração:

1. Navigate to "Intelligence" > "Connectors"
2. Click on "Add Connector" button, then select "Custom MCP Connector"
3. Create your Custom MCP Connector:
   • Connector Name: NuxtUI
   • Connector Server: https://ui.nitro.news/mcp

OpenCode

Instruções de configuração:

1. Na raiz do seu projeto, crie opencode.json
2. Add the following configuration:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nitro.news/mcp",
      "enabled": true
    }
  }
}

Visual Studio Code

Instruções de configuração:

1. Abra o VS Code e acesse a Paleta de Comandos (Ctrl/Cmd + Shift + P)
2. Digite "Preferences: Open Workspace Settings (JSON)" e selecione
3. Navegue até a pasta .vscode do seu projeto ou crie uma se ela não existir
4. Crie ou edite o arquivo mcp.json com a seguinte configuração:

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nitro.news/mcp"
    }
  }
}

Windsurf

Instruções de configuração:

1. Abra o Windsurf e navegue até "Settings" > "Windsurf Settings" > "Cascade"
2. Clique no botão "Manage MCPs" e selecione a opção "View raw config"
3. Adicione a seguinte configuração às suas configurações de MCP:

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

Zed

Instruções de configuração:

1. Abra o Zed e vá em "Settings" > "Open Settings"
2. Navegue até o arquivo de configurações JSON
3. Adicione a seguinte configuração de servidor de contexto às suas configurações:

{
  "context_servers": {
    "nuxt-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://ui.nitro.news/mcp"],
      "env": {}
    }
  }
}

Exemplos de uso

Uma vez configurado, você pode fazer ao seu assistente de IA perguntas como:

• "List all available Nitro UI components"
• "Get Button component documentation"
• "Show me just the Button usage examples"
• "What props does Input accept?"
• "Find form-related components"
• "Search for arrow icons in lucide"
• "List dashboard templates"
• "Get template setup instructions"
• "Show installation guide"
• "List all examples"
• "Get ContactForm example code"

O assistente de IA usará o servidor MCP para buscar dados JSON estruturados e fornecer assistência guiada para o Nitro UI durante o desenvolvimento.