live-mcp

live-mcp

Enables AI agents to declaratively control web pages using real mouse and keyboard events via Chrome DevTools Protocol, without executing page JavaScript.

Category
Visit Server

README

Live MCP

Cầu nối cho AI agent điều khiển trang web thuần declarative — agent hành động bằng chuột và bàn phím thật (trusted events qua CDP), không gọi JavaScript của trang.

Trạng thái

M0 — walking skeleton. Toàn tuyến agent → MCP → server → WebSocket → extension → CDP → DOM đã thông với một tool click duy nhất. Các milestone tiếp theo (form/type, cơ chế đợi, tool tham số hoá, policy, con ong 🐝, canvas) xem mục "Lộ trình" trong kế hoạch dự án.

Package Vai trò
packages/protocol Hợp đồng trung tâm: ToolDecl + message WebSocket (server ↔ extension dùng chung)
packages/server Local Server: MCP stdio, WS hub 127.0.0.1:8787, registry tool động
packages/extension Chrome MV3: content script quét declarative, service worker thi hành qua CDP
packages/demo-site Trang demo đạt chuẩn, kiêm test bed

Chạy thử

npm install
npm run build

1. Demo site

npm run dev:site        # http://localhost:5180

2. Local Server — chạy độc lập để xem log, hoặc để agent tự spawn (bước 4).

npm run dev:server

3. Extension — chrome://extensions → bật Developer mode → Load unpacked → chọn packages/extension/dist. Mở http://localhost:5180, mở DevTools Console, phải thấy:

[Live MCP] "LiveMCP Demo" — phát hiện 1 tool declarative.

Log của server phải thấy site_announce + snapshot ... tools=1.

4. Đấu nối agent

claude mcp add livemcp -- node D:/vibeBoss/webmcp/LiveMCP/packages/server/dist/index.js --stdio

Rồi yêu cầu agent: "gọi tool livemcp_list_sites" → "gọi livemcp_demo__say_hello". Nút trên trang phải thực sự bị bấm, Chrome hiện banner "đang debug", và ô kết quả ghi sự kiện thật (trusted) — đó là bằng chứng CDP hoạt động đúng.

Banner "Live MCP is debugging this browser" là cố ý, không phải lỗi: không có cách hợp lệ nào tắt nó, và nó cho user biết agent đang điều khiển trình duyệt.

Test

npm test

Chỉ test những vùng logic thuần dễ hỏng (định tuyến tên tool, chuyển đổi schema). Phần tương tác browser kiểm bằng demo-site thủ công theo tiêu chí nghiệm thu từng milestone.

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured