Composer

Diagramas de Arquitetura automatizados pelo seu Agente de IA

Documentação

Composer demo

Composer logo Composer MCP Server

Dê ao seu agente de codificação de IA uma tela de arquitetura.
Projete, visualize e evolua diagramas de arquitetura de software — direto da sua IDE.

Composer é uma ferramenta visual de design de sistemas que permite que agentes de codificação de IA criem e modifiquem diagramas interativos de arquitetura através do MCP (Model Context Protocol). Seu agente tem ferramentas para adicionar serviços, bancos de dados, filas e conexões, e você tem uma tela ao vivo em usecomposer.com que atualiza em tempo real.

Your IDE  <-->  MCP Server (this package)  <-->  Composer API  <-->  Your Diagram

Começando

Conecte sua IDE

Claude Code:

claude mcp add --transport http composer https://mcp.usecomposer.com

Cursor — crie .cursor/mcp.json na raiz do seu projeto:

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

Seu navegador abrirá para autorização no primeiro uso.

Claude Code

claude mcp add --transport http composer https://mcp.usecomposer.com

Cursor

Crie .cursor/mcp.json na raiz do seu projeto:

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

Codex

codex mcp add composer -- npx -y @usecomposer/mcp --stdio

VS Code (Copilot Chat)

Crie .vscode/mcp.json na raiz do seu projeto:

{
  "servers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Cline)

Abra a barra lateral do Cline > Configurações (ícone de engrenagem) > Servidores MCP > Adicionar Servidor Remoto:

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Continue)

Adicione a .continue/config.yaml:

mcpServers:
  - name: composer
    url: https://mcp.usecomposer.com

Windsurf

Adicione a ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "composer": {
      "serverUrl": "https://mcp.usecomposer.com"
    }
  }
}

Nota: O Windsurf usa "serverUrl" em vez de "url".

OpenCode

Crie opencode.json na raiz do seu projeto:

{
  "mcp": {
    "composer": {
      "type": "remote",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

Ferramentas

Gerenciamento de Diagramas

Ferramenta	Descrição
`list_diagrams`	Liste todos os seus diagramas. Chame isso primeiro para descobrir em qual diagrama trabalhar
`create_diagram`	Crie um novo diagrama e selecione-o automaticamente para esta sessão
`select_diagram`	Selecione em qual diagrama trabalhar nesta sessão
`rename_diagram`	Renomeie o diagrama atualmente selecionado

Nota: Chame list_diagrams e depois select_diagram (ou create_diagram) antes de usar outras ferramentas.

Leitura

Ferramenta	Descrição
`get_graph`	Obtenha o diagrama de arquitetura completo — todos os nós e arestas
`get_node`	Obtenha detalhes de um único nó, incluindo arestas conectadas
`search_graph`	Pesquise nós e arestas por palavra-chave
`get_screenshot`	Obtenha uma miniatura PNG do diagrama do último salvamento automático

Escrita

Ferramenta	Descrição
`upsert_node`	Crie ou atualize um nó (serviço, banco de dados, fila, etc.)
`upsert_edge`	Crie ou atualize uma conexão entre dois nós
`define_api`	Defina endpoints de API em um nó de serviço backend
`delete_element`	Exclua um nó ou aresta do diagrama
`link_path`	Vincule um nó a um arquivo ou pasta no seu código

Planejar e Verificar

Ferramenta	Descrição
`verify_diagram`	Verifique problemas como endpoints ausentes ou nós órfãos
`plan_import`	Fluxo de trabalho passo a passo para importar um código existente
`get_guide`	Guia de referência para tipos de nós, protocolos e melhores práticas

Tipos de Nós

client · frontend · backend · database · cache · queue · storage · external

Protocolos de Aresta

REST · gRPC · GraphQL · WebSocket · TCP · UDP · async · event · internal

Exemplos de Prompts

Depois de conectado, tente perguntar ao seu agente de IA:

Prompt	O que faz
"Importe este código para o Composer"	Escaneia seu repositório e constrói o diagrama de arquitetura
"Crie um novo diagrama Composer chamado Backend Architecture"	Cria e seleciona automaticamente um novo diagrama
"Adicione um cache Redis entre a API e o banco de dados no Composer"	Adiciona um novo nó e arestas ao diagrama
"Adicione monitoramento de analytics ao diagrama do Composer"	Adiciona nós e conexões de observabilidade
"Atualize as APIs que defini no Composer"	Atualiza definições de endpoints em nós backend
"Verifique meu diagrama do Composer"	Verifica endpoints ausentes, nós órfãos, etc.
"Vincule cada nó do Composer ao seu código-fonte"	Associa nós do diagrama a caminhos de arquivos

Como Funciona

A autenticação é feita via OAuth 2.1 — seu navegador abre para um fluxo de consentimento único, e você está conectado. As chamadas de ferramentas são proxy para a API do Composer em mcp.usecomposer.com. Seus dados de diagrama ficam nos servidores do Composer. O servidor MCP em si é sem estado.

Alterações feitas via MCP são imediatamente visíveis na tela do Composer via sincronização WebSocket em tempo real.

Desenvolvimento

git clone https://github.com/olivergrabner/composer-mcp
cd composer-mcp
npm install
npm run dev        # Watch mode (rebuilds on change)
npm run build      # Production build

Licença

MIT