Composer — это инструмент визуального проектирования систем, который позволяет ИИ-агентам создавать и изменять интерактивные архитектурные диаграммы с помощью 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 использует "serverUrl" вместо "url".

Создайте 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

Примеры промптов

После подключения попробуйте спросить своего ИИ-агента:

Промпт	Что он делает
"Import this codebase into Composer"	Сканирует ваш репозиторий и строит архитектурную диаграмму
"Create a new Composer diagram called Backend Architecture"	Создает и автоматически выбирает новую диаграмму
"Add a Redis cache between the API and the database in Composer"	Добавляет новый узел и связи на диаграмму
"Add analytics monitoring to the Composer diagram"	Добавляет узлы наблюдаемости и связи
"Update the APIs I defined in Composer"	Обновляет определения эндпоинтов на узлах бэкенда
"Verify my Composer diagram"	Проверяет наличие отсутствующих эндпоинтов, осиротевших узлов и т.д.
"Link each Composer node to its source code"	Связывает узлы диаграммы с путями к файлам

Как это работает

Аутентификация осуществляется через OAuth 2.1 — ваш браузер открывается для однократного подтверждения, и вы подключены. Вызовы инструментов проксируются к API Composer по адресу mcp.usecomposer.com. Данные ваших диаграмм хранятся на серверах Composer. Сам MCP-сервер является stateless (не сохраняет состояние).

Изменения, внесенные через MCP, сразу же отображаются на холсте Composer через синхронизацию WebSocket в реальном времени.

Разработка

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 Protocol — спецификация Model Context Protocol
Issues — отчеты об ошибках и запросы функций

Лицензия

MIT

composer-mcp