MCP
Como conectar o Makuco UI ao seu editor via MCP (Model Context Protocol) para consultar componentes, props e instalação direto no assistente de IA.
O Makuco UI expõe um servidor MCP que permite consultar a documentação dos componentes — props, instalação, theming — diretamente de dentro de um Cliente MCP (Claude Code, Cursor, Windsurf, etc.), sem sair do editor.
Conteúdo
Configuração
Adicione um servidor MCP com cliente HTTP apontando para:
https://mcp.ui.makuco.com.br/mcpA forma exata de adicionar varia por cliente (arquivo de configuração, comando de CLI ou tela de settings), mas o endpoint é sempre o mesmo.
Autenticação
Se o seu IDE ou Cliente MCP suportar OAuth, ao adicionar o servidor ele vai pedir para autenticar com a conta Microsoft da DB1. Basta concluir o login — nenhuma configuração adicional é necessária depois disso.
Sem suporte a OAuth?
Se o cliente não suportar o fluxo OAuth automaticamente, verifique a documentação dele sobre autenticação de servidores MCP remotos antes de prosseguir.
Clientes sem suporte a HTTP
Alguns Clientes MCP ainda não suportam transporte HTTP diretamente. Nesses casos, use o pacote mcp-remote como ponte:
{
"mcpServers": {
"makuco-ds": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp.ui.makuco.com.br/mcp"
]
}
}
}O fluxo de autenticação OAuth ocorre normalmente na primeira execução, abrindo o navegador para o login com a conta Microsoft da DB1.
Tools disponíveis
O servidor makuco-ds expõe as seguintes tools para consulta da documentação:
| Tool | Descrição |
|---|---|
list-components | Lista todos os componentes disponíveis para uma major version, com link e descrição curta de cada um. |
get-component | Retorna a documentação completa de um componente específico. Aceita um parâmetro opcional section (instalacao, acessibilidade, props, react, angular) para filtrar apenas a parte relevante da página. |
get-components | Mesma coisa que get-component, mas para vários componentes em uma única chamada — útil para comparar props ou exemplos entre componentes diferentes. |
get-component-props | Retorna apenas a tabela de props/API de um componente, sem o restante da página. Mais leve que get-component quando o objetivo é só gerar código ou autocomplete. |
get-install-instructions | Retorna as instruções de instalação (pré-requisitos, autenticação no feed privado, setup React/Angular) para uma major version. |
get-theming-config | Retorna a página de configuração de temas — tokens de marca (data-brand) e como aplicá-los. |
Todas as tools aceitam um parâmetro majorVersion para consultar uma versão específica do Design System — a versão ativa hoje é a 1.
Exemplo de uso
Peça diretamente ao assistente, por exemplo: "quais props o mk-button aceita?" ou "como instalo o Makuco UI num projeto React?" — o assistente usa as tools acima automaticamente para responder com a documentação atualizada, sem precisar copiar e colar nada manualmente.
Suporte
Encontrou um bug, tem uma sugestão ou precisa de ajuda com o Makuco UI? Use o formulário abaixo para entrar em contato com o time.
Plugin Claude Code
Instale o plugin makuco-ui para mapear fluxos (/flow), construir telas e formulários novos (/design) ou migrar UI existente (/adopt) com o Makuco UI, direto no Claude Code.