Overture

코드보다 계획을 먼저 확인하세요. 승인한 후 실행되는 것을 지켜보세요.

문제 • 해결책 • 설치 • 기능 • 마켓플레이스 • 설정 • 토론

https://github.com/user-attachments/assets/eeb9c4cb-c80d-42da-bf63-c0c4ecb1e5d6

🔥 문제점

오늘날 모든 AI 코딩 에이전트(Cursor, Claude Code, Cline, Copilot)는 동일한 방식으로 작동합니다.

✨ 해결책

Overture는 AI 에이전트의 계획 단계를 가로채서 대화형 시각적 순서도로 렌더링합니다 — 코드가 작성되기 전에 말이죠.

에이전트는 여러분이 계획을 승인할 때까지 단 한 줄의 코드도 작성하지 않습니다.

시각적 계획 이동, 확대/축소 및 클릭 탐색이 가능한 대화형 순서도

컨텍스트 첨부 단계별 파일, API 키, 지침

접근 방식 선택 다양한 경로의 장단점 비교

실시간 실행 노드가 진행 상황에 따라 켜지는 것을 확인

MCP 마켓플레이스 노드별 도구 탐색 및 첨부

🚀 설치

Overture는 모든 MCP 호환 AI 코딩 에이전트와 작동하는 MCP 서버입니다. 단 하나의 명령어로 설치하세요.

Claude Code

claude mcp add overture-mcp -- npx overture-mcp

Cursor

~/.cursor/mcp.json에 추가하세요:

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "servers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "disabled": false
    }
  }
}

전역 설치 (선택 사항)

npm install -g overture-mcp

작동 확인

에이전트에게 어떤 작업이든 지시하세요. Overture가 자동으로 http://localhost:3031에서 열리고 계획을 승인할 준비가 됩니다.

🎯 작동 방식

흐름:

🛠 기능

대화형 계획 캔버스

노드 세부 정보 패널

노드를 클릭하면 전체 세부 정보가 표시됩니다.

동적 필드 (사용자 입력)

노드는 실행 전에 사용자 입력을 요청할 수 있습니다.

각 필드에는 다음이 포함됩니다.

• 필수/선택 표시기
• 기본값
• 도움말 텍스트 및 설명
• 설정 지침 ("API 키를 얻는 방법")

파일 첨부

특정 노드에 컨텍스트 파일을 첨부합니다.

• 자동 유형 감지 — 이미지, 코드, 문서 또는 기타
• 파일 유형별 시각적 아이콘
• 설명 — 이 파일이 중요한 이유에 대한 메모 추가
• 삭제 — 원치 않는 첨부 파일 제거

메타 지침

모든 노드에 사용자 정의 LLM 지침을 추가합니다.

"여기서 오류 처리에 특별히 주의하세요" "src/auth.ts의 기존 인증 패턴을 사용하세요" "엣지 케이스에 대한 테스트를 추가해야 합니다"

지침은 해당 노드가 실행되기 직전에 에이전트로 전송됩니다.

분기 감지 및 선택

에이전트가 여러 접근 방식을 제안할 때:

요구 사항 체크리스트

승인하기 전에 Overture가 필요한 사항을 보여줍니다.

• 비어 있는 필수 필드 — 노드별로 계산됨
• 분기 선택 — 보류 중인 결정 사항
• 진행 표시기 — 시각적 완료 추적
• 확장 가능한 항목 — 클릭하여 세부 정보 확인
• 색상 코딩 — 녹색(완료) / 주황색(보류 중)

모든 요구 사항이 충족될 때까지 승인 버튼은 비활성화 상태로 유지됩니다.

실행 제어

승인 버튼은 스마트하게 작동합니다.

• 🟢 "승인 및 실행" — 계획 준비 완료, 요구 사항 충족됨
• 🟠 "요구 사항 완료" — 조건이 충족되지 않음
• 🔵 "실행 중..." — 스피너와 함께 실행 중
• 🟢 "완료됨" — 모두 완료
• 🔴 "실패" — 오류 발생

구조화된 출력

각 노드가 실행된 후, 풍부한 구조화된 출력을 확인하세요.

각 카테고리는 확장 가능하여 시각적 과부하 없이 자세히 살펴볼 수 있습니다.

출력 모달

완료된 노드를 클릭하면 전체 출력을 볼 수 있습니다.

• 긴 출력을 위한 스크롤 가능
• 구문 강조된 코드 스니펫
• Escape 키 또는 외부 클릭으로 닫기

🏪 MCP 마켓플레이스

Overture UI에서 직접 MCP 서버를 탐색하고 첨부하세요.

MCP 서버를 노드에 첨부하면 에이전트는 해당 단계에만 해당 도구에 액세스할 수 있습니다.

📂 다중 프로젝트 지원

여러 프로젝트에서 동시에 작업하세요.

단일 프로젝트인가요? 더 깔끔한 UI를 위해 탭 표시줄이 자동으로 숨겨집니다.

📜 계획 기록 및 지속성

작업 내용을 절대 잃지 마세요.

재개 정보

재개 시 전체 컨텍스트를 얻을 수 있습니다:

• 현재 노드 — 실행이 중단된 위치
• 완료된 노드 — 출력과 함께 표시
• 대기 중인 노드 — 남은 작업
• 실패한 노드 — 오류 메시지와 함께 표시
• 모든 구성 — 필드 값, 분기, 첨부 파일
• 타임스탬프 — 생성 시간, 일시 정지 시간

✏️ 동적 계획 수정

실행 중에도 계획을 수정할 수 있습니다:

계획 차이 보기

계획이 변경되면 정확히 무엇이 달라졌는지 확인할 수 있습니다:

• 추가된 노드 — 녹색으로 강조 표시
• 제거된 노드 — 빨간색으로 강조 표시
• 수정된 노드 — 노란색으로 변경 전/후 비교 표시
• 엣지 변경 — 추가/제거된 연결

🔌 MCP 도구 (에이전트 개발자용)

Overture는 에이전트가 상호 작용할 수 있는 11개의 MCP 도구를 제공합니다:

🔄 실시간 WebSocket 통신

19가지 서버-클라이언트 메시지 유형:

connected • plan_started • node_added • edge_added • plan_ready • plan_approved • node_status_updated • plan_completed • plan_failed • plan_paused • plan_resumed • nodes_inserted • node_removed • project_registered • projects_list • history_entries • plan_loaded • resume_plan_info • plan_updated

16가지 클라이언트-서버 메시지 유형:

approve_plan • cancel_plan • rerun_request • pause_execution • resume_execution • insert_nodes • remove_node • register_project • subscribe_project • unsubscribe_project • get_history • load_plan • get_resume_info • save_plan • request_plan_update • create_new_plan

릴레이 모드

WebSocket 포트가 이미 사용 중일 때, Overture는 자동으로 릴레이 클라이언트로 작동하여 기존 서버를 통해 메시지를 전달합니다. 여러 에이전트 인스턴스가 단일 UI를 공유할 수 있습니다.

⚙️ 구성

환경 변수 설정

claude mcp add overture-mcp -e OVERTURE_HTTP_PORT=4000 -e OVERTURE_AUTO_OPEN=false -- npx overture-mcp

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "env": {
        "OVERTURE_HTTP_PORT": "4000",
        "OVERTURE_WS_PORT": "4001",
        "OVERTURE_AUTO_OPEN": "false"
      }
    }
  }
}

{
  "servers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "env": {
        "OVERTURE_HTTP_PORT": "4000",
        "OVERTURE_WS_PORT": "4001",
        "OVERTURE_AUTO_OPEN": "false"
      }
    }
  }
}

⌨️ 키보드 단축키

🤝 지원 에이전트

각 에이전트는 최적의 계획 생성을 위한 맞춤형 프롬프트를 제공합니다.

💪 Overture를 선택해야 하는 이유

🧑‍💻 개발

# Clone the repo
git clone https://github.com/SixHq/Overture.git
cd Overture

# Install dependencies
npm install

# Build all packages
npm run build

# Start MCP server (in one terminal)
cd packages/mcp-server && npm start

# Start UI dev server (in another terminal)
cd packages/ui && npm run dev

기술 스택

🤝 기여하기

Overture는 오픈 소스이며 기여를 환영합니다!

• 🐛 버그 신고는 GitHub Issues에서
• 💡 기능 제안은 GitHub Discussions에서
• 📖 문서 개선 — PR 환영
• 🔧 코드 기여 — CONTRIBUTING.md 참조

작은 기여라도 모두 감사히 받습니다.

📄 라이선스

MIT 라이선스 - 자세한 내용은 LICENSE 참조.

제작: Sixth

최상의 경험을 위해 Sixth for VS Code
를 사용해 보세요. Overture는 설정 없이 내장되어 있습니다.

_{눈먼 비행을 멈추세요. 계획을 확인하세요. 승인하세요. 자신 있게 실행하세요.}

Star 히스토리