Composer ist ein visuelles Systemdesign-Tool, mit dem KI-Coding-Agenten interaktive Architekturdiagramme über das MCP (Model Context Protocol) erstellen und ändern können. Ihr Agent erhält Werkzeuge zum Hinzufügen von Diensten, Datenbanken, Warteschlangen und Verbindungen, und Sie erhalten eine Live-Leinwand unter usecomposer.com, die in Echtzeit aktualisiert wird.

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

Erste Schritte

Verbinden Sie Ihre IDE

Claude Code:

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

Cursor — erstellen Sie .cursor/mcp.json im Stammverzeichnis Ihres Projekts:

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

Ihr Browser öffnet sich bei der ersten Verwendung zur Autorisierung.

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

Erstellen Sie .cursor/mcp.json im Stammverzeichnis Ihres Projekts:

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

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

Erstellen Sie .vscode/mcp.json im Stammverzeichnis Ihres Projekts:

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

Öffnen Sie die Cline-Seitenleiste > Einstellungen (Zahnrad-Symbol) > MCP Servers > Add Remote Server:

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

Fügen Sie dies zu .continue/config.yaml hinzu:

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

Fügen Sie dies zu ~/.codeium/windsurf/mcp_config.json hinzu:

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

Hinweis: Windsurf verwendet "serverUrl" anstelle von "url".

Erstellen Sie opencode.json im Stammverzeichnis Ihres Projekts:

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

Werkzeuge

Diagrammverwaltung

Werkzeug	Beschreibung
`list_diagrams`	Listet alle Ihre Diagramme auf. Rufen Sie dies zuerst auf, um zu sehen, an welchem Diagramm gearbeitet werden soll
`create_diagram`	Erstellt ein neues Diagramm und wählt es automatisch für diese Sitzung aus
`select_diagram`	Wählt aus, an welchem Diagramm in dieser Sitzung gearbeitet werden soll
`rename_diagram`	Benennt das aktuell ausgewählte Diagramm um

Hinweis: Rufen Sie list_diagrams und dann select_diagram (oder create_diagram) auf, bevor Sie andere Werkzeuge verwenden.

Lesen

Werkzeug	Beschreibung
`get_graph`	Ruft das vollständige Architekturdiagramm ab – alle Knoten und Kanten
`get_node`	Ruft Details für einen einzelnen Knoten ab, einschließlich verbundener Kanten
`search_graph`	Durchsucht Knoten und Kanten nach Schlüsselwörtern
`get_screenshot`	Ruft eine PNG-Vorschau des Diagramms vom letzten automatischen Speichern ab

Schreiben

Werkzeug	Beschreibung
`upsert_node`	Erstellt oder aktualisiert einen Knoten (Dienst, Datenbank, Warteschlange usw.)
`upsert_edge`	Erstellt oder aktualisiert eine Verbindung zwischen zwei Knoten
`define_api`	Definiert API-Endpunkte auf einem Backend-Dienstknoten
`delete_element`	Löscht einen Knoten oder eine Kante aus dem Diagramm
`link_path`	Verknüpft einen Knoten mit einer Datei oder einem Ordner in Ihrer Codebasis

Planen & Überprüfen

Werkzeug	Beschreibung
`verify_diagram`	Überprüft auf Probleme wie fehlende Endpunkte oder verwaiste Knoten
`plan_import`	Schritt-für-Schritt-Workflow für den Import einer bestehenden Codebasis
`get_guide`	Referenzhandbuch für Knotentypen, Protokolle und Best Practices

Knotentypen

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

Kantenprotokolle

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

Beispiel-Prompts

Sobald die Verbindung hergestellt ist, versuchen Sie, Ihren KI-Agenten zu fragen:

Prompt	Was es bewirkt
"Import this codebase into Composer"	Scannt Ihr Repository und erstellt das Architekturdiagramm
"Create a new Composer diagram called Backend Architecture"	Erstellt und wählt automatisch ein neues Diagramm aus
"Add a Redis cache between the API and the database in Composer"	Fügt dem Diagramm einen neuen Knoten und Kanten hinzu
"Add analytics monitoring to the Composer diagram"	Fügt Observability-Knoten und Verbindungen hinzu
"Update the APIs I defined in Composer"	Aktualisiert Endpunkt-Definitionen auf Backend-Knoten
"Verify my Composer diagram"	Überprüft auf fehlende Endpunkte, verwaiste Knoten usw.
"Link each Composer node to its source code"	Verknüpft Diagrammknoten mit Dateipfaden

Funktionsweise

Die Authentifizierung erfolgt über OAuth 2.1 – Ihr Browser öffnet sich für einen einmaligen Zustimmungsprozess, und Sie sind verbunden. Werkzeugaufrufe werden an die Composer-API unter mcp.usecomposer.com weitergeleitet. Ihre Diagrammdaten liegen auf den Servern von Composer. Der MCP-Server selbst ist zustandslos.

Änderungen, die über MCP vorgenommen werden, sind sofort auf der Composer-Leinwand über eine Echtzeit-WebSocket-Synchronisierung sichtbar.

Entwicklung

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

Links

Composer – die visuelle Architektur-Leinwand
MCP Protocol – Spezifikation des Model Context Protocol
Issues – Fehlerberichte und Funktionsanfragen

Lizenz

MIT

This server cannot be installed

-

security - not tested

A

license - permissive license

-

quality - not tested

How are these scores calculated?

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

composer-mcp