composer-mcp

<p align="center"> </p>

<h1 align="center">Composer MCP Server</h1>

<p align="center"> Give your AI coding agent an architecture canvas.<br/> Connect your repo, build architecture diagrams through your coding agent, and keep them linked to real code. </p>

<p align="center"> <a href="https://www.npmjs.com/package/@usecomposer/mcp"></a> <a href="https://opensource.org/licenses/MIT"></a> <a href="https://modelcontextprotocol.io"></a> </p>

<br/>

<p align="center"> <video src="https://github.com/OliverGrabner/composer-mcp/raw/main/demo.mp4" controls autoplay loop muted></video> </p>

---

AI coding agents see files, not architecture. They make locally reasonable changes that break the system because they have no understanding of how components connect. Composer gives them that understanding: a structured, visual architecture graph they can read before every change and update as they build.

Composer is a visual system design tool that lets AI coding agents create and modify interactive architecture diagrams through MCP (Model Context Protocol). Your agent gets tools to add services, databases, queues, and connections, and you get a live canvas at usecomposer.com that updates in real-time.

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

claude mcp add --transport http composer \
  https://mcp.usecomposer.com \
  --header "Authorization: Bearer fl_your_token_here"

Replace fl_your_token_here with your token from [usecompos