Eletro Design System EletroDSGuide

Conectar o MCP

Como conectar qualquer cliente de IA ao MCP do guide para ler foundations, componentes, padrões e get-started ao vivo.

O que é

O guide expõe seu próprio conteúdo por um servidor MCP (Model Context Protocol). Qualquer cliente de IA conectado consegue listar e ler, ao vivo, as páginas de Foundations, Componentes, Padrões e Get Started — sem copiar/colar texto e sem ficar desatualizado.

Isso é diferente do MCP EletroDS (props/slots dos componentes reais). O MCP do guide serve o conteúdo editorial — texto, boas práticas, anatomia — que vive neste site.

URL de conexão

Use a URL de produção, via Streamable HTTP:

https://me-guide-design-patterns.vercel.app/mcp
URLs de preview (deploys de branch) ficam atrás de login do Vercel e não funcionam pra um cliente MCP externo. Use sempre a URL de produção acima.

Como adicionar

Claude Code

claude mcp add --transport http me-guide https://me-guide-design-patterns.vercel.app/mcp

Cursor / Claude Desktop — adicione no JSON de configuração de MCP servers:

{
  "mcpServers": {
    "me-guide": {
      "url": "https://me-guide-design-patterns.vercel.app/mcp"
    }
  }
}

Tools disponíveis

  • list-pages — lista a árvore inteira de páginas do guide (path, título, profundidade)
  • get-page — busca o conteúdo completo de uma página, dado o path exato
  • search — busca páginas por palavra-chave (título + corpo), retorna path + trecho
  • list-components / get-component — atalhos de list-pages/get-page restritos a Componentes
  • list-patterns / get-pattern — atalhos de list-pages/get-page restritos a Padrões
  • list-foundations / get-foundations — atalhos restritos a Foundations (cores, tokens, tipografia, spacing, ícones)

Prompt Builder (Compositor)

  • list-screens — lista os tipos de tela do Compositor (index, documento, dashboard, formulário…)
  • build-prompt — gera o prompt de uma tela (roda o buildPrompt do Compositor), a partir da config (tela + campos/entidade/extras/moeda/idioma/base)

Docs derivados

  • list-context — lista os docs derivados (prompt-pack, entrevista, guia de implementação, prompt-base, glossário…)
  • get-context — conteúdo de um doc derivado, dado o id
O MCP é público e somente leitura. Toda página nova publicada no guide aparece automaticamente em list-pages — não precisa registrar nada.
Veja tambémComo usar Princípios