Composer es una herramienta de diseño de sistemas visual que permite a los agentes de codificación IA crear y modificar diagramas de arquitectura interactivos a través de MCP (Model Context Protocol). Tu agente obtiene 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 mcp add --transport http composer https://mcp.usecomposer.com

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

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

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

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

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

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

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

Añádelo a .continue/config.yaml:

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

Añádelo a ~/.codeium/windsurf/mcp_config.json:

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

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

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 selecciónalo automáticamente para esta sesión
`select_diagram`	Selecciona en qué diagrama trabajar para esta sesión
`rename_diagram`	Cambia el nombre del 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 bordes
`get_node`	Obtén detalles de un solo nodo, incluidos los bordes conectados
`search_graph`	Busca nodos y bordes 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 puntos finales de API en un nodo de servicio backend
`delete_element`	Elimina un nodo o borde del diagrama
`link_path`	Vincula un nodo a un archivo o carpeta en tu base de código

Planificación y verificación

Herramienta	Descripción
`verify_diagram`	Comprueba problemas como puntos finales faltantes o nodos huérfanos
`plan_import`	Flujo de trabajo paso a paso para importar una base de 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 borde

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

Ejemplos de prompts

Una vez conectado, intenta pedirle a tu agente IA:

Prompt	Qué hace
"Import this codebase into Composer"	Escanea tu repositorio y construye el diagrama de arquitectura
"Create a new Composer diagram called Backend Architecture"	Crea y selecciona automáticamente un nuevo diagrama
"Add a Redis cache between the API and the database in Composer"	Añade un nuevo nodo y bordes al diagrama
"Add analytics monitoring to the Composer diagram"	Añade nodos de observabilidad y conexiones
"Update the APIs I defined in Composer"	Actualiza las definiciones de puntos finales en los nodos backend
"Verify my Composer diagram"	Comprueba si faltan puntos finales, nodos huérfanos, etc.
"Link each Composer node to its source code"	Asocia los nodos del diagrama con rutas de archivo

Cómo funciona

La autenticación se gestiona mediante OAuth 2.1: tu navegador se abre para un flujo de consentimiento único y ya estás conectado. Las llamadas a herramientas se redirigen a la API de Composer en mcp.usecomposer.com. Los datos de tu diagrama residen 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 de arquitectura visual
Protocolo MCP - Especificación del Protocolo de Contexto de Modelo
Problemas - informes de errores y solicitudes de funciones

Licencia

MIT

composer-mcp