Composer는 AI 코딩 에이전트가 MCP (Model Context Protocol)를 통해 대화형 아키텍처 다이어그램을 생성하고 수정할 수 있게 해주는 시각적 시스템 설계 도구입니다. 에이전트는 서비스, 데이터베이스, 큐 및 연결을 추가하는 도구를 얻게 되며, 사용자는 usecomposer.com에서 실시간으로 업데이트되는 라이브 캔버스를 확인할 수 있습니다.

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

시작하기

IDE 연결

Claude Code:

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

Cursor — 프로젝트 루트에 .cursor/mcp.json 생성:

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

처음 사용 시 인증을 위해 브라우저가 열립니다.

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

프로젝트 루트에 .cursor/mcp.json 생성:

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

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

프로젝트 루트에 .vscode/mcp.json 생성:

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

Cline 사이드바 > 설정(톱니바퀴 아이콘) > MCP Servers > Add Remote Server 열기:

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

.continue/config.yaml에 추가:

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

~/.codeium/windsurf/mcp_config.json에 추가:

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

참고: Windsurf는 "url" 대신 "serverUrl"을 사용합니다.

프로젝트 루트에 opencode.json 생성:

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

도구

다이어그램 관리

도구	설명
`list_diagrams`	모든 다이어그램을 나열합니다. 작업할 다이어그램을 찾으려면 먼저 이 도구를 호출하세요
`create_diagram`	새 다이어그램을 생성하고 이 세션에 자동으로 선택합니다
`select_diagram`	이 세션에서 작업할 다이어그램을 선택합니다
`rename_diagram`	현재 선택된 다이어그램의 이름을 변경합니다

참고: 다른 도구를 사용하기 전에 list_diagrams를 호출한 다음 select_diagram(또는 create_diagram)을 호출하세요.

읽기

도구	설명
`get_graph`	전체 아키텍처 다이어그램(모든 노드 및 엣지)을 가져옵니다
`get_node`	연결된 엣지를 포함하여 단일 노드에 대한 세부 정보를 가져옵니다
`search_graph`	키워드로 노드와 엣지를 검색합니다
`get_screenshot`	마지막 자동 저장 시점의 다이어그램 PNG 썸네일을 가져옵니다

쓰기

도구	설명
`upsert_node`	노드(서비스, 데이터베이스, 큐 등)를 생성하거나 업데이트합니다
`upsert_edge`	두 노드 간의 연결을 생성하거나 업데이트합니다
`define_api`	백엔드 서비스 노드에 API 엔드포인트를 정의합니다
`delete_element`	다이어그램에서 노드나 엣지를 삭제합니다
`link_path`	노드를 코드베이스의 파일이나 폴더에 연결합니다

계획 및 검증

도구	설명
`verify_diagram`	누락된 엔드포인트나 고립된 노드와 같은 문제를 확인합니다
`plan_import`	기존 코드베이스를 가져오기 위한 단계별 워크플로우
`get_guide`	노드 유형, 프로토콜 및 모범 사례에 대한 참조 가이드

노드 유형

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

엣지 프로토콜

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

예시 프롬프트

연결 후 AI 에이전트에게 다음과 같이 요청해 보세요:

프롬프트	수행 작업
"이 코드베이스를 Composer로 가져와"	리포지토리를 스캔하고 아키텍처 다이어그램을 구축합니다
"Backend Architecture라는 새 Composer 다이어그램을 만들어"	새 다이어그램을 생성하고 자동으로 선택합니다
"Composer에서 API와 데이터베이스 사이에 Redis 캐시를 추가해"	다이어그램에 새 노드와 엣지를 추가합니다
"Composer 다이어그램에 분석 모니터링을 추가해"	관측 가능성 노드와 연결을 추가합니다
"Composer에서 정의한 API를 업데이트해"	백엔드 노드의 엔드포인트 정의를 새로 고칩니다
"내 Composer 다이어그램을 검증해"	누락된 엔드포인트, 고립된 노드 등을 확인합니다
"각 Composer 노드를 소스 코드에 연결해"	다이어그램 노드를 파일 경로와 연결합니다

작동 원리

인증은 OAuth 2.1을 통해 처리됩니다. 브라우저가 열려 1회성 동의 절차를 거치면 연결이 완료됩니다. 도구 호출은 mcp.usecomposer.com의 Composer API로 프록시됩니다. 다이어그램 데이터는 Composer 서버에 저장됩니다. MCP 서버 자체는 상태를 저장하지 않습니다(stateless).

MCP를 통해 변경된 사항은 실시간 WebSocket 동기화를 통해 Composer 캔버스에서 즉시 확인할 수 있습니다.

개발

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

링크

Composer - 시각적 아키텍처 캔버스
MCP 프로토콜 - Model Context Protocol 사양
이슈 - 버그 리포트 및 기능 요청

라이선스

MIT

composer-mcp

시작하기

IDE 연결

도구

다이어그램 관리

읽기

쓰기

계획 및 검증

노드 유형

엣지 프로토콜

예시 프롬프트

작동 원리

개발

링크

라이선스

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API