🎨 Kinghost Widgetbook MCP Server

Servidor MCP (Model Context Protocol) para integração com o sistema de design Kinghost via Widgetbook.

Desenvolvido pela Squad DevCanais - Kinghost

🚀 Instalação e Uso

Para qualquer desenvolvedor (recomendado):

npx kinghost-widgetbook-mcp

Instalação global (opcional):

npm install -g kinghost-widgetbook-mcp
kinghost-widgetbook-mcp

⚙️ Configuração no Cursor

Adicione no seu arquivo mcp.json (Cursor):

macOS/Linux:

code ~/.cursor/mcp.json

Windows:

code %APPDATA%/Cursor/mcp.json

Configuração do arquivo:

{
  "mcpServers": {
    "kinghost-widgetbook": {
      "command": "npx",
      "args": ["@cyberweb/kinghost-widgetbook-mcp@latest"],
      "env": {
        "WIDGETBOOK_URL": "https://widgetbook.kinghost.com"
      }
    }
  }
}

🛠️ Ferramentas Disponíveis

| Ferramenta | Descrição | Parâmetros | |------------|-----------|------------| | listar_componentes | Lista todos os componentes disponíveis | categoria (opcional), status (opcional) | | buscar_componente | Busca detalhes de um componente específico | nome (obrigatório) | | buscar_tokens | Consulta tokens de design (cores, espaçamento, etc.) | categoria (opcional) |

🔧 Variáveis de Ambiente

| Variável | Descrição | Padrão | |----------|-----------|---------| | WIDGETBOOK_URL | URL base do Widgetbook | https://widgetbook.kinghost.com | | WIDGETBOOK_API | Endpoint da API (se disponível) | - |

🏗️ Arquitetura

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Cursor AI     │◄──►│  MCP Server      │◄──►│   Widgetbook    │
│                 │    │  (Este projeto)  │    │   (Design Sys)  │
└─────────────────┘    └──────────────────┘    └─────────────────┘

🚦 Fluxo de Funcionamento

1. Cursor AI faz solicitação via MCP
2. MCP Server processa a solicitação
3. Consulta dados do Widgetbook (mock data por enquanto)
4. Retorna informações formatadas para o Cursor

🧪 Teste Rápido

Após configurar no Cursor, teste com:

"Liste os componentes disponíveis no design system"

📦 Dependências

• Node.js >= 18.0.0
• @modelcontextprotocol/sdk: Framework MCP
• zod: Validação de schemas

🔍 Troubleshooting

Cursor não encontra o servidor:

1. Verifique se o mcp.json está no local correto
2. Reinicie o Cursor
3. Verifique se Node.js está instalado (node --version)

npx não funciona:

# Limpe o cache do npm
npm cache clean --force

# Tente novamente
npx kinghost-widgetbook-mcp

Problemas de permissão:

# No macOS/Linux, pode ser necessário:
chmod +x $(which npx)

📈 Versioning

• Atual: v1.0.2
• Registro: npm público
• Instalação: npx kinghost-widgetbook-mcp

🤝 Contribuindo

1. Fork o projeto
2. Crie sua feature branch (git checkout -b feature/nova-funcionalidade)
3. Commit suas mudanças (git commit -am 'Adiciona nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

📞 Suporte

• Squad DevCanais: [email protected]
• Repositório: GitLab Kinghost
• Issues: Reportar problema

📜 Licença

MIT © Squad DevCanais - Kinghost

🎯 Objetivo: Facilitar o acesso aos componentes e tokens do Design System Kinghost através do Cursor AI, permitindo que desenvolvedores consultem informações de forma natural e eficiente.