Overture MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

Interactive React Flow canvas — pan, zoom, node-level controls
Dynamic inputs (text, number, boolean, secret, file attachment)
Branch comparison with pros/cons before choosing
One-line install across Claude Code, Cursor, Cline, Copilot

라이브 데모

실제 사용 모습

overture.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "overture",
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "overture": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "Overture"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add overture -- npx -y Overture

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Overture

Review your agent's plan in a flowchart before it writes code

👤 Anyone running coding agents on real repos ⏱ ~15 min beginner

언제 쓸까: You've been burned by an agent confidently writing 800 lines of wrong code — you want a gate.

사전 조건

Claude Code or equivalent agent — claude.ai/code

흐름

Install

Run claude mcp add overture-mcp -- npx overture-mcp to wire it into Claude Code.✓ 복사됨

→ Overture web UI reachable at shown URL
Ask for a feature; plan opens in canvas

Implement an auth middleware. Before coding, use overture to produce a plan graph.✓ 복사됨

→ Nodes for each step appear in the Overture UI
Approve or redirect nodes

Node 3 looks wrong — reject it with a comment 'use existing middleware at ./lib/auth.ts instead'✓ 복사됨

→ Plan regenerates; agent only codes after you press approve

결과: Agent writes code you actually asked for — you caught the wrong assumption at step 3, not commit 3.

함정

Canvas becomes noisy on huge features — Break feature into sub-plans; Overture supports multi-project tabs

함께 쓰기: claude-code

Compare two implementation approaches side by side

👤 Engineers choosing between designs ⏱ ~20 min intermediate

언제 쓸까: You're torn between two approaches (Redis cache vs in-memory) and want the agent to plan both.

흐름

Ask for two branches

Plan this caching feature in two branches: (A) Redis, (B) in-memory LRU. Show pros/cons for each.✓ 복사됨

→ Overture renders two branches with comparison
Pick and execute

Approve branch B. Execute only that path.✓ 복사됨

→ Only the chosen branch runs

결과: Informed decision between alternatives without committing code to both.

Inject secrets into a plan node without committing them

👤 Anyone scripting deploy plans ⏱ ~10 min intermediate

언제 쓸까: A step needs an API key; you want to provide it at run-time, not in the prompt history.

흐름

Mark the node as needing a secret

The deploy node needs DEPLOY_TOKEN as a secret input. Pause until provided.✓ 복사됨

→ Overture shows a secret field awaiting input
Paste into the UI; node unlocks

(in Overture UI) paste token and click resume✓ 복사됨

→ Plan continues; secret not in chat history

결과: Agents run privileged steps without secrets leaking into transcripts.

조합

다른 MCP와 조합해 10배 효율

overture + claude-code

Use Overture as the approval layer for every Claude Code task

From now on, for any task estimated >30 min, use overture to plan before coding.✓ 복사됨

overture + vibe-check

Plan → sanity check → execute

After Overture produces a plan, run vibe_check on it before I approve.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
plan_create	goal: str, context?: str	Start of any multi-step coding task	LLM tokens for planning
plan_update	plan_id, node_changes	React to user approve/reject	0
plan_execute	plan_id, from_node?	After user approval	tool calls + tokens
plan_branch	plan_id, from_node, alt_goal	Compare alternatives	LLM tokens

비용 및 제한

운영 비용

API 쿼터: None — local app
호출당 토큰: Planning adds ~1-3k tokens up front; saves more in avoided wrong code
금액: Free, open source
팁: Use plans only for non-trivial features; trivial edits don't need a graph

보안

권한, 시크릿, 파급범위

자격 증명 저장: Secrets entered in the UI, stored in local browser storage per plan

데이터 외부 송신: None by default — runs on localhost

문제 해결

자주 발생하는 오류와 해결

Canvas URL returns ERR_CONNECTION_REFUSED

Overture UI port (default 3939) not bound; check MCP server logs or set OVERTURE_PORT

확인: curl http://localhost:3939

Plan generation hangs

Your agent is waiting on LLM; check the agent's own logs for rate limit / token exhaustion

Node rejections not taking effect

Some agents cache plans — explicitly say 'regenerate the plan from node X with my feedback'

대안

Overture 다른 것과 비교

대안	언제 쓰나	단점/장점
sequentialthinking-tools	You want a text plan, not a canvas	No visual comparison of branches
shrimp-task-manager	You want persistent tasks, not interactive approval	Different loop — more async, less gated

Overture