Show HN: Agent MCP Studio – 브라우저 탭에서 멀티 에이전트 MCP 시스템 구축하기

1 MCP 도구 설명하기

런타임 (Runtime)을 선택하고 평이한 영어로 도구를 설명하면, LLM (대규모 언어 모델)이 코드를 작성합니다. 각 런타임은 자체적인 샌드박스 (Sandbox)를 가집니다.

사양 예시

2 도구 코드 0줄

스타터 도구가 미리 로드되어 있습니다 — **도구 등록 (Register Tool)**을 클릭하여 API 키 없이 즉시 시도해 보세요. 또는 위의 LLM으로 코드를 생성한 후 등록할 수 있습니다.

등록된 도구들

등록은 **메타데이터 전용 (metadata-only)**입니다: TOOL 매니페스트 (Manifest)는 AST (추상 구문 트리)를 통해 파싱되며 (코드 실행 없음), 소스 코드는 저장됩니다. Python은 도구가 호출될 때만 실행됩니다 — 이것이 JIT (Just-In-Time) 방식입니다. LLM은 활성화된 (enabled) 도구들만 볼 수 있습니다.

📦 Docker 치트 시트 — 내보낸 서버를 빌드 및 실행하기

내보내기에는 프로덕션 준비가 된 Dockerfile과 .dockerignore가 포함됩니다. 다운로드 후 압축을 풀고 다음을 수행하세요:

cd agent-mcp-server-YYYY-MM-DD
docker build -t agent-mcp-export .

docker run --rm -i
-e MCP_ALLOWED_HOSTS='api.github.com,*.githubusercontent.com'
agent-mcp-export

{ "mcpServers": { "agent-mcp-studio-export": { "command": "docker", "args": ["run","--rm","-i","-e","MCP_ALLOWED_HOSTS=api.github.com","agent-mcp-export"] } } }

docker tag agent-mcp-export your-registry/agent-mcp-export:v1
docker push your-registry/agent-mcp-export:v1 # Fly.io, Railway, Render, Cloud Run, ECS 등에 배포

이미지는 기본적으로 stdio를 사용합니다. HTTP 배포를 보려면 내보내기에 포함된 README.md를 참조하세요.

도구 호출하기

결과

(아직 호출되지 않음)

에이전트 플레이그라운드 (Agent playground)

실제 OpenAI 함수 호출 (function-calling) 루프입니다. 모델은 답변하기 전에 여러 턴에 걸쳐 여러 도구를 호출할 수 있습니다.

🦆 DuckDB 데이터 소스

CSV 또는 Parquet 파일을 업로드하세요. 각 파일은 쿼리 가능한 DuckDB 테이블이 됩니다. SQL 도구는 런타임에 이 테이블들을 쿼리할 수 있습니다.

애드혹 (Ad-hoc) 쿼리

직접 쿼리를 시도해 보세요; SQL 도구 생성기가 이 테이블 이름들을 인식하게 됩니다.

(아직 없음)

🧠 로컬 임베딩 (Local embeddings) + RAG

Transformers.js를 통해 Xenova/all-MiniLM-L6-v2 (~23 MB, ONNX)를 로드합니다. 브라우저 내에서 로컬로 문서를 임베딩합니다. LLM이 호출할 수 있는 semantic_search MCP 도구를 자동으로 등록합니다.

⚙ 청크 (Chunk) 설정

검색 테스트

로컬 코사인 유사도 (Local cosine similarity). 네트워크 호출 없음.

(아직 검색 결과 없음)

🧠 에이전트 계층 (Agentic layer) · 전략 선택

전문가들이 협업하는 방식을 선택하세요. 아래의 그래프는 토폴로지 (topology)에 따라 적응합니다. 페르소나 (Personas)는 MCP 도구 (ask_<name>)로 자동 등록되어, Claude Desktop이 브릿지 (bridge)를 통해 이를 호출할 수 있습니다.

도구 (Tools) (페르소나 위로 드래그)

인스펙터 (Inspector)

+ 새 페르소나 (New Persona).

새 페르소나 (New Persona)

MCP JSON-RPC 2.0 콘솔

이 기능은 MCP 프로토콜을 시뮬레이션합니다. 레지스트리 (registry)를 통한 모든 도구 호출은 실제 MCP 서버가 방출하는 것과 동일한 형태인 JSON-RPC 형식으로 여기에 기록됩니다.

채팅 백엔드 (Chat backend)

에이전트 채팅 및 도구 생성 (tool generation)이 실행될 위치를 선택하세요. OpenAI가 기본값입니다. 로컬 (Local) 옵션은 데이터를 기기 외부로 전송하지 않고 브라우저 내에서 작은 WASM LLM을 실행합니다 — API 키가 필요하지 않습니다.

OpenAI 설정 (OpenAI configuration)

사용자의 키는 이 브라우저의 로컬 스토리지 (localStorage)에만 저장됩니다. api.openai.com을 제외한 그 어디로도 전송되지 않습니다.

런타임 (Runtime)

웜 (Warm): 첫 번째 호출 시 도구를 Pyodide로 컴파일하며, 이후 호출 시 컴파일된 함수를 재사용합니다.

콜드 (Cold): 매 호출마다 새로운 네임스페이스 (namespace)에서 소스를 실행합니다 — 완전히 결정론적 (deterministic)이며, 재사용이 전혀 없습니다.

정보 (About)

런타임: Pyodide (WebAssembly로 컴파일된 CPython).

프로토콜: 시뮬레이션된 MCP (Model Context Protocol) JSON-RPC 2.0 — initialize, tools/list, tools/call.

등록: AST 파싱된 매니페스트 (manifest), 소스는 지연 저장 (lazily stored)됩니다. 도구가 호출될 때까지 Python이 실행되지 않습니다.

샌드박스 (Sandbox): 각 도구는 격리된 네임스페이스에서 실행됩니다. 정적 분석 (Static analysis)을 통해 eval, exec, __import__, open, 네트워크, 서브프로세스 (subprocess), 그리고 DOM 접근을 차단합니다.

모든 항목 초기화 (Reset everything)

🌐 도구 네트워크 접근 (Tool network access)

Python 도구는 주입된 http_request() 헬퍼를 통해 외부 API를 호출할 수 있지만, 이 허용 목록 (allowlist)에 있는 호스트로만 가능합니다.
도구로부터의 모든 네트워크 호출을 차단하려면 비워두세요. 와일드카드 (Wildcards)를 지원합니다: *.openai.com, *.github.io.
한 줄에 호스트 하나씩 입력하세요.

CORS 참고 사항

브라우저 fetch는 대상 서버의 CORS 정책을 따릅니다. Access-Control-Allow-Origin을 반환하는 API는...

직접 작동합니다. 그렇지 않은 API는 네트워크 에러(network error)와 함께 실패할 것입니다. 이는 서버 측의 결정이며, 이 도구의 버그가 아닙니다. 대부분의 공개 API(GitHub, OpenAI, weather.gov, MDN, JSONPlaceholder 등)는 CORS를 허용합니다. 직접 제어하는 프라이빗 API(private API)의 경우, 서버 측에 CORS 헤더를 추가하세요.

📦 프로젝트 팩 (export & import)

도구(tools), 페르소나(personas), 전략(strategy), 그리고 필요한 외부 서비스들을 하나의 공유 가능한 JSON 파일로 번들링(bundle)하세요. API 키와 비밀값(secrets)은 절대 포함되지 않으며, 어떤 자격 증명(credentials)이 필요한지에 대한 스키마(schema)만 포함됩니다. 파일을 가져오기(import)할 때 수신자에게 해당 정보를 입력하도록 요청합니다.

🔐 연결된 서비스 (Connected services)

도구가 os.environ.get(...)을 통해 사용하는 자격 증명입니다. 오직 이 브라우저의 로컬 스토리지(localStorage)에만 저장됩니다. 여기서 수동으로 추가하거나, 프로젝트 팩을 설치할 때 가져오기 마법사(import wizard)가 이를 수집하도록 할 수 있습니다.

🌉 MCP 브리지 (Claude Desktop에 브라우저 도구 노출하기)

사용자의 머신에서 브리지 스크립트(bridge script)를 실행하세요. 이 스크립트는 Claude Desktop과는 stdio를 통해 MCP로 통신하고, 현재 브라우저 탭과는 WebSocket을 통해 통신합니다. 그러면 여러분의 도구들이 마치 실제 MCP 서버인 것처럼 Claude Desktop 내부에 나타납니다.

설정 방법 (Setup instructions)

1. 이 프로젝트 폴더(index.html과 같은 위치에 있음)에서 bridge.js를 저장합니다. 2. WebSocket 의존성 설치: npm install ws 3. Claude Desktop 설정에서 MCP 서버를 추가합니다: Command: node Args: /bridge.js의/절대/경로 4. 브라우저에서 이 페이지를 열고 Connect를 클릭합니다. 5. Claude Desktop을 재시작하면 브라우저 도구들이 목록에 나타납니다. 내부 동작 원리: Claude → stdio → bridge.js → WebSocket → 이 탭 → Pyodide / DuckDB / RAG.

📬 소식 받기 (Stay in touch)

새로운 기능, 업데이트 및 팁에 대한 알림을 받으세요. 스팸은 절대 보내지 않습니다.