HeroUI MCP Node - Integração para Cursor IDE

Este projeto fornece um servidor MCP (Model Context Protocol) para integrar os componentes HeroUI diretamente no Cursor IDE, permitindo acesso fácil à documentação, exemplos e geração automática de código.

🚀 Site Implantado

URL: https://kkh7ikc7llx0.manus.space

📋 Funcionalidades

• API REST completa para componentes HeroUI
• Servidor MCP para integração com Cursor IDE
• Interface web com documentação interativa
• Geração automática de código baseada em parâmetros
• Configuração MCP para download direto

🛠️ Componentes Suportados (14 Total)

1. Accordion

• Descrição: Accordion display a list of high-level options that can expand/collapse to reveal more information
• Pacote: @heroui/accordion

2. Alert

• Descrição: Alerts display a brief, important message in a way that attracts the user's attention without interrupting the user's task
• Pacote: @heroui/alert

3. Autocomplete

• Descrição: Autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query
• Pacote: @heroui/autocomplete

4. Avatar

• Descrição: The Avatar component is used to represent a user, and displays the profile picture, initials, or fallback icon
• Pacote: @heroui/avatar

5. Badge

• Descrição: Badges are used as a small numerical value or status descriptor for UI elements
• Pacote: @heroui/badge

6. Breadcrumbs

• Descrição: Breadcrumbs display a hierarchy of links to the current page or resource in an application
• Pacote: @heroui/breadcrumbs

7. Button

• Descrição: Buttons allow users to perform actions and choose with a single tap
• Pacote: @heroui/button

8. ButtonGroup

• Descrição: A wrapper component to display a group of buttons
• Pacote: @heroui/button-group

9. Calendar

• Descrição: A calendar displays one or more date grids and allows users to select a single date
• Pacote: @heroui/calendar

10. Card

• Descrição: Cards are used to group related information in a flexible-size container
• Pacote: @heroui/card

11. Checkbox

• Descrição: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected
• Pacote: @heroui/checkbox

12. CheckboxGroup

• Descrição: A checkbox group allows users to select multiple items from a list of options
• Pacote: @heroui/checkbox

13. Chip

• Descrição: Chips are used to render a list of entities in small blocks
• Pacote: @heroui/chip

14. CircularProgress

• Descrição: Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates
• Pacote: @heroui/progress

🔧 Instalação e Configuração

1. Instalar o Servidor MCP

npm install -g heroui-mcp-server

2. Configurar no Cursor IDE

Adicione a seguinte configuração ao seu arquivo de configuração do Cursor:

{
  "mcpServers": {
    "heroui-components": {
      "command": "node",
      "args": ["/path/to/heroui-mcp-server.js"],
      "env": {
        "HEROUI_API_URL": "https://kkh7ikc7llx0.manus.space/api/heroui"
      }
    }
  }
}

3. Reiniciar o Cursor IDE

Reinicie o Cursor para carregar o novo servidor MCP.

4. Usar no Cursor

Use @heroui no chat do Cursor para acessar as funcionalidades:

@heroui Como usar o componente Button?
@heroui Gere um Button com cor primary e tamanho large
@heroui Quais são as props do ButtonGroup?

📡 API Endpoints

GET /api/heroui/components

Retorna todos os componentes HeroUI disponíveis.

Resposta:

{
  "success": true,
  "data": {
    "button": { ... },
    "button-group": { ... }
  },
  "count": 2
}

GET /api/heroui/components/{component}

Retorna informações detalhadas de um componente específico.

Exemplo: /api/heroui/components/button

GET /api/heroui/components/{component}/props

Retorna apenas as propriedades de um componente.

GET /api/heroui/components/{component}/examples

Retorna exemplos de uso de um componente.

POST /api/heroui/generate-code

Gera código de componente baseado nos parâmetros fornecidos.

Body:

{
  "component": "button",
  "props": {
    "color": "primary",
    "size": "lg"
  },
  "children": "Click me"
}

Resposta:

{
  "success": true,
  "data": {
    "code": "<Button color=\"primary\" size=\"lg\">Click me</Button>",
    "import": "import {Button} from \"@heroui/button\";",
    "component": "button",
    "props_used": {
      "color": "primary",
      "size": "lg"
    }
  }
}

GET /api/heroui/mcp-config

Retorna a configuração MCP para uso no Cursor.

GET /api/heroui/vite-integration

Retorna informações sobre a integração do HeroUI com Vite.

🏗️ Estrutura do Projeto

heroui-mcp-node/
├── src/
│   ├── main.py                 # Aplicação Flask principal
│   ├── routes/
│   │   ├── user.py            # Rotas de usuário (template)
│   │   └── heroui_components.py # Rotas dos componentes HeroUI
│   ├── models/
│   │   └── user.py            # Modelos de dados
│   └── static/
│       └── index.html         # Interface web
├── mcp-server.js              # Servidor MCP Node.js
├── package.json               # Dependências do servidor MCP
├── requirements.txt           # Dependências Python
└── README.md                  # Esta documentação

🔍 Ferramentas MCP Disponíveis

O servidor MCP fornece as seguintes ferramentas para o Cursor:

1. get_heroui_components - Lista todos os componentes disponíveis
2. get_heroui_component - Informações detalhadas de um componente
3. get_component_props - Propriedades de um componente
4. get_component_examples - Exemplos de uso
5. generate_heroui_code - Geração de código personalizado
6. get_mcp_config - Configuração MCP para setup

🎯 Exemplos de Uso

Componente Button Básico

import {Button} from "@heroui/button";

<Button>Click me</Button>

Button com Props

<Button 
  color="primary" 
  size="lg" 
  variant="shadow"
  startContent={<Icon />}
>
  Primary Button
</Button>

ButtonGroup

import {ButtonGroup, Button} from "@heroui/button";

<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

🚀 Desenvolvimento Local

Pré-requisitos

• Python 3.11+
• Node.js 18+
• Flask
• Dependências listadas em requirements.txt

Executar Localmente

1. Backend Flask:

cd heroui-mcp-node
source venv/bin/activate
python src/main.py

2. Servidor MCP:

npm install
node mcp-server.js

📝 Dados Extraídos

Este projeto foi construído com base na análise completa da documentação oficial do HeroUI:

• Fonte: https://www.heroui.com/docs/components/
• Repositório: https://github.com/felipebarcelos7/nextui
• Componentes analisados: Button, ButtonGroup
• Propriedades extraídas: Todas as props, tipos, valores padrão e descrições
• Exemplos: Casos de uso básicos e avançados
• Acessibilidade: Atributos de dados e recursos de acessibilidade

🔗 Links Úteis

• Site do Projeto: https://j6h5i7cp8eqp.manus.space
• HeroUI Oficial: https://www.heroui.com
• Documentação HeroUI: https://www.heroui.com/docs/components/
• Cursor IDE: https://cursor.sh
• MCP Protocol: https://modelcontextprotocol.io

📄 Licença

MIT License - Veja o arquivo LICENSE para detalhes.

🤝 Contribuição

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request para melhorias.

Desenvolvido para facilitar o uso dos componentes HeroUI no Cursor IDE através do protocolo MCP.