Composer

Diagramas de arquitectura automatizados por tu Agente de IA

Documentación

Composer demo

Composer logo Composer MCP Server

Dale a tu agente de codificación de IA un lienzo de arquitectura.
Diseña, visualiza y evoluciona diagramas de arquitectura de software, directamente desde tu IDE.

Composer es una herramienta visual de diseño de sistemas que permite a los agentes de codificación de IA crear y modificar diagramas de arquitectura interactivos a través de MCP (Model Context Protocol). Tu agente tiene herramientas para añadir servicios, bases de datos, colas y conexiones, y tú obtienes un lienzo en vivo en usecomposer.com que se actualiza en tiempo real.

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

Primeros pasos

Conecta tu IDE

Claude Code:

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

Cursor — crea .cursor/mcp.json en la raíz de tu proyecto:

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

Tu navegador se abrirá para la autorización en el primer uso.

Claude Code

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

Cursor

Crea .cursor/mcp.json en la raíz de tu proyecto:

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

Codex

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

VS Code (Copilot Chat)

Crea .vscode/mcp.json en la raíz de tu proyecto:

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

VS Code (Cline)

Abre la barra lateral de Cline > Configuración (icono de engranaje) > Servidores MCP > Añadir servidor remoto:

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

VS Code (Continue)

Añade a .continue/config.yaml:

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

Windsurf

Añade a ~/.codeium/windsurf/mcp_config.json:

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

Nota: Windsurf usa "serverUrl" en lugar de "url".

OpenCode

Crea opencode.json en la raíz de tu proyecto:

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

Herramientas

Gestión de diagramas

Herramienta	Descripción
`list_diagrams`	Lista todos tus diagramas. Llama a esto primero para encontrar en qué diagrama trabajar
`create_diagram`	Crea un nuevo diagrama y lo selecciona automáticamente para esta sesión
`select_diagram`	Selecciona en qué diagrama trabajar para esta sesión
`rename_diagram`	Renombra el diagrama seleccionado actualmente

Nota: Llama a list_diagrams y luego a select_diagram (o create_diagram) antes de usar otras herramientas.

Lectura

Herramienta	Descripción
`get_graph`	Obtén el diagrama de arquitectura completo: todos los nodos y conexiones
`get_node`	Obtén detalles de un solo nodo, incluidas las conexiones asociadas
`search_graph`	Busca nodos y conexiones por palabra clave
`get_screenshot`	Obtén una miniatura PNG del diagrama desde el último guardado automático

Escritura

Herramienta	Descripción
`upsert_node`	Crea o actualiza un nodo (servicio, base de datos, cola, etc.)
`upsert_edge`	Crea o actualiza una conexión entre dos nodos
`define_api`	Define endpoints de API en un nodo de servicio backend
`delete_element`	Elimina un nodo o conexión del diagrama
`link_path`	Vincula un nodo a un archivo o carpeta en tu código

Planificar y verificar

Herramienta	Descripción
`verify_diagram`	Verifica problemas como endpoints faltantes o nodos huérfanos
`plan_import`	Flujo de trabajo paso a paso para importar un código existente
`get_guide`	Guía de referencia para tipos de nodos, protocolos y mejores prácticas

Tipos de nodos

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

Protocolos de conexión

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

Ejemplos de prompts

Una vez conectado, prueba a preguntar a tu agente de IA:

Prompt	Qué hace
"Importa este código en Composer"	Escanea tu repositorio y construye el diagrama de arquitectura
"Crea un nuevo diagrama de Composer llamado Backend Architecture"	Crea y selecciona automáticamente un nuevo diagrama
"Añade una caché de Redis entre la API y la base de datos en Composer"	Añade un nuevo nodo y conexiones al diagrama
"Añade monitoreo de analíticas al diagrama de Composer"	Añade nodos y conexiones de observabilidad
"Actualiza las APIs que definí en Composer"	Refresca las definiciones de endpoints en los nodos backend
"Verifica mi diagrama de Composer"	Comprueba endpoints faltantes, nodos huérfanos, etc.
"Vincula cada nodo de Composer a su código fuente"	Asocia los nodos del diagrama con rutas de archivos

Cómo funciona

La autenticación se maneja mediante OAuth 2.1: tu navegador se abre para un flujo de consentimiento único y quedas conectado. Las llamadas a herramientas se envían a la API de Composer en mcp.usecomposer.com. Los datos de tu diagrama viven en los servidores de Composer. El servidor MCP en sí no tiene estado.

Los cambios realizados a través de MCP son visibles inmediatamente en el lienzo de Composer mediante sincronización WebSocket en tiempo real.

Desarrollo

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

Enlaces

Composer - el lienzo visual de arquitectura
Protocolo MCP - especificación del Model Context Protocol
Problemas - informes de errores y solicitudes de funciones

Licencia

MIT