dev.to

What If Your AI Agent Never Had to Leave the Browser? (Demo 🚀)

AI 에이전트가 브라우저를 떠날 필요가 없다면? — WebMCP 로컬 에이전트 데모

WebMCP는 웹사이트가 AI 에이전트용 도구를 직접 공개하도록 만드는 실험적 브라우저 API입니다. 글에서는 로컬 모델과 Chrome 확장 프로그램으로 현재 페이지의 도구를 호출하고, 위험한 작업에는 사용자 확인을 요구하는 WebMCP Local Agent를 소개합니다.

AI 요약

저자는 AGNTCon + MCPCon Europe에서 WebMCP를 발표한 뒤, 브라우저 안에서만 동작하는 AI 에이전트 데모를 공개합니다. 2,000명 넘게 참석한 행사에는 멀티 에이전트 아키텍처를 탐구하는 사람뿐 아니라 기존 제품에 AI 기능을 추가하려는 개발자도 많았고, 저자는 후자에게 WebMCP가 특히 실용적인 선택지가 될 수 있다고 설명합니다.

■ WebMCP는 웹사이트가 직접 공개하는 도구입니다

WebMCP는 웹사이트가 AI 에이전트가 호출할 도구를 명시적으로 공개하도록 만드는 실험적 브라우저 API입니다. 기존 MCP와 달리 에이전트가 브라우저의 현재 페이지 문맥에서 도구를 사용합니다. 해당 웹사이트가 열려 있어야 하고, 인증이 필요한 서비스라면 사용자가 로그인한 상태여야 합니다. 따라서 에이전틱 브라우저나 Chrome 확장 프로그램에서 현재 페이지가 제공하는 기능을 에이전트에 연결하는 방식입니다.

저자는 WebMCP 관련 글을 이미 작성했지만, 에이전트 생태계에서는 석 달 전 문법도 빠르게 낡는다고 말합니다. 실제 API 문법은 앞으로도 여러 차례 바뀔 수 있습니다. 반면 웹사이트가 도구를 공개하고 에이전트가 이를 호출한다는 구조 자체는 그대로입니다. 저자가 만난 WebMCP 개발자는 Chromium에서 1월이나 2월쯤이면 API가 어느 정도 안정될 것이라고 전했습니다. 다만 테스트할 때는 최신 Chrome 또는 Chromium과 필요한 실험 기능을 사용해야 합니다.

ChatGPT도 최근 자체 브라우저에서 WebMCP 기반 사이트 도구를 지원하기 시작했다고 소개합니다. 저자는 WebMCP의 가장 흥미로운 쓰임새를 여러 에이전트가 웹사이트를 스크래핑하는 장면보다, 일반 사용자가 이미 쓰는 제품을 자연어 의도로 조작하는 장면에서 찾습니다.

■ 기존 웹사이트에 AI 전용 구조를 강요하지 않습니다

저자가 만든 데모는 단순한 장바구니 예제가 아닙니다. AI CEO Simulator라는 가상의 스타트업 관리 웹사이트입니다. 화면에는 보유 현금, 월간 매출, 직원 수, 프로덕션 장애 수, 직원 행복도, hype level 같은 지표가 표시됩니다. Adopt AI, Pivot to Agents, Rewrite in Rust, Fire Employees, Hire Employees 같은 이사회 결정도 제공합니다. 활동 로그도 함께 보여줍니다.

이 웹사이트는 AI 전용 애플리케이션이 아닙니다. 사용자는 버튼을 클릭하고 화면을 이동하면서 모든 기능을 수동으로 사용할 수 있습니다. WebMCP는 기존 UI를 없애거나 제품 전체를 다시 만드는 대신, 에이전트가 같은 제품을 다룰 수 있는 구조화된 경로를 하나 더 추가합니다. 데모 소스 코드는 GitHub의 ai-ceo-webMCP 저장소에 공개했고, GitHub Pages에서 실행할 수 있습니다.

■ WebMCP Local Agent의 동작 방식

클라우드 기반 에이전트는 인터넷 연결이 필요하고, 발표장에서 큰 화면으로 보여주기에는 인터페이스가 적합하지 않을 수 있습니다. 저자는 현장에서 사용할 로컬 모델용 대체 경로도 필요해 Chrome 확장 프로그램 WebMCP Local Agent를 만들었습니다. 아직 Chrome Web Store에는 게시하지 않았고, 소스 코드를 내려받아 로컬에서 실행하는 방식입니다.

에이전트는 사용자의 의도를 입력으로 받습니다. 그다음 현재 페이지가 공개한 WebMCP 도구를 확인하고, 의도에 맞는 도구를 골라 호출합니다. 모델은 사용자 의도와 사용 가능한 도구 목록을 받은 뒤 호출할 도구를 결정합니다. 도구 실행 결과를 다시 입력으로 받아 다음 행동을 정합니다. 이 과정을 에이전트 루프라고 부릅니다.

기본 설정에서는 최대 10회까지 루프를 반복합니다. 설정 파일에서 반복 횟수를 늘리거나 줄일 수 있습니다. 따라서 단순히 대화형 UI에 에이전트라는 이름을 붙인 구조가 아니라, 도구를 선택하고 결과에 따라 다음 호출을 결정하는 작은 에이전트로 동작합니다.

■ 세 가지 모델 실행 경로

WebMCP Local Agent는 세 가지 모델 사용 방식을 제공합니다. 첫 번째는 Google의 Prompt API입니다. Chromium이 관리하는 Gemini Nano를 사용하며, 모델을 한 번 내려받고 나면 추론은 로컬에서 실행됩니다. 프롬프트를 Google이나 다른 외부 사업자에게 보내지 않고 API 키도 필요하지 않습니다.

두 번째는 Ollama입니다. 저자는 Llama 3.1을 사용하지만 다른 모델로 바꿀 수 있습니다. 다만 도구 호출을 안정적으로 처리하는 모델을 선택해야 합니다. 저자는 Llama 3.1이 드물게 JSON 대신 Markdown이나 부가 설명을 반환하는 문제도 언급합니다. 에이전트가 도구 호출 결과를 JSON으로 처리해야 한다면 이런 출력 변형을 고려해야 합니다.

세 번째는 클라우드 모델입니다. 데모에서는 API 키가 필요한 구형 Gemini Flash 모델을 사용합니다. 저자는 현재로서는 클라우드 모델이 기능과 속도 면에서 가장 손쉽게 좋은 결과를 내지만, 지역에 따라 AI 서비스 접근성이 다르다고 설명합니다. 유럽에서 클라우드 AI 인프라를 안정적으로 사용하더라도 세계 모든 지역에서 같은 조건을 기대할 수는 없습니다. 로컬 모델은 개인정보를 외부로 보내지 않는 선택지이면서, 클라우드 서비스에 접근하기 어려운 사용자에게 다른 경로가 됩니다.

추가 모델이나 제공자를 연결하는 작업은 확장 프로그램 소스 코드 몇 줄을 수정하는 수준이라고 설명합니다. 다만 글에서 제시한 로컬 모델의 동작 결과는 저자의 데모 환경을 기준으로 한 평가입니다.

■ 위험한 도구에는 사용자 확인을 요구합니다

자연어로 의도를 표현하고 모델이 계획을 세워 도구를 호출하는 방식은 편리하지만, 모든 도구를 자동 실행하면 문제가 생깁니다. listEmployees()처럼 조회만 하는 도구와 fireEmployees()처럼 조직에 직접 영향을 주는 도구의 위험도가 다르기 때문입니다. AI CEO가 비용 절감을 이유로 직원 절반을 해고하는 상황을 사용자가 승인하지 않았는데도 실행하면 안 됩니다.

WebMCP에는 이런 차이를 표시하는 consequentialHint 도구 주석이 추가됐습니다. 확장 프로그램도 이 기능을 지원합니다. 도구 호출이 결과적으로 큰 영향을 주는 작업으로 표시되면, 에이전트는 바로 실행하지 않고 확인 프롬프트를 띄웁니다. 사용자는 작업을 승인하거나 거부할 수 있습니다. 데모에서는 Fire Employees 호출 전에 이 확인 단계가 나타납니다.

이 기능은 사용 중인 Chromium 버전과 실험적인 WebMCP 지원 상태에 따라 달라집니다. API가 아직 변하는 단계인 만큼, 테스트 환경에서 충분히 최신인 Chrome 또는 Chromium을 사용하고 필요한 WebMCP 기능을 활성화해야 합니다.

■ 개발 도구와 구현 맥락

저자는 AWS Community Builder로서 이 프로젝트를 Kiro로 만들었다고 소개합니다. 처음에는 Claude Code 비용을 아끼려는 이유로 설치했지만, 여러 모델을 고를 수 있고 spec-driven development를 지원한다는 점을 높이 평가하게 됐다고 설명합니다. 발표 두 시간 전 발생한 WebMCP API 변경에도 대응했다고 말합니다. 다만 글의 중심은 Kiro 자체가 아니라, API가 빠르게 바뀌는 환경에서 브라우저 확장 프로그램과 웹사이트 도구를 함께 구현한 과정에 있습니다.

WebMCP는 사용자가 기존처럼 버튼과 폼을 직접 조작하는 경험을 유지하면서, 같은 기능을 에이전트가 호출할 수 있게 만듭니다. 저자는 이를 자동차가 말을 대체한 정도의 변화라기보다 더 빠른 말에 가깝다고 표현한 행사 참가자의 말을 인용합니다. 지금 필요한 것이 완전히 다른 교통수단이 아니라 더 빠른 말일 수도 있다는 질문으로 글을 마무리합니다.

원문: dev.to / 번역·요약: Trawling