WebMCP: bringt MCP-Unterstützung auf Websites für die Interaktion zwischen KI-Assistenten und Web-Apps 184

小编 · 2025-07-18

WebMCP ist eine browserbasierte MCP-Implementierung, die KI-Assistenten die Interaktion mit Web-Apps über standardisierte Tools ermöglicht. Der MCP-Server ist in die Seite eingebettet – keine API-Keys oder OAuth-Konfiguration nötig – synchronisiert in Echtzeit über den Browser, integriert sich direkt in den App-Zustand und ermöglicht Workflows über mehrere Apps. Es löst die Einschränkung bestehender MCP-Lösungen, die den Browser umgehen, und nutzt dessen Authentifizierungs- und Sicherheitsmodell.

WebMCP: bringt MCP-Unterstützung auf Websites für die Interaktion zwischen KI-Assistenten und Web-Apps

WebMCP ist eine browserbasierte MCP-Implementierung, die es KI-Assistenten ermöglicht, über standardisierte Tools mit Webanwendungen zu interagieren. Sie bettet den MCP-Server in Webseiten ein, ist direkt in Webanwendungen integriert, erfordert keine API-Schlüssel oder OAuth-Konfiguration, ermöglicht direkten Browserzugriff mit Echtzeit-Synchronisation, ist direkt in den Zustand der Webanwendung integriert und unterstützt arbeitsabläufeübergreifende Workflows. Dadurch können KI-Assistenten Aufgaben automatisch über mehrere verschiedene Webanwendungen hinweg erledigen. Dies löst das Problem bestehender MCP-Lösungen, die den Browser umgehen, und nutzt gleichzeitig die Authentifizierungs- und Sicherheitsmodelle des Browsers.

WebMCP：可让网站支持MCP，让AI助手与Web应用进行交互

Hauptfunktionen:

✅ Authentifizierung über Browser-Sitzungen und Cookies.

✅ Steuerung über eine JSON-RPC-Schnittstelle, ohne DOM-Manipulation.

✅ Echtzeit-Synchronisation mit dem Zustand der Webanwendung.

✅ Geeignet für jedes JavaScript-Framework oder reines JavaScript.

✅ Der Implementierungscode umfasst in der Regel weniger als 50 Zeilen.

✅ Befolgt die Same-Origin-Richtlinie und die Berechtigungen des Browsers.

Projektmerkmale:

✅ Nutzt die Authentifizierungsmechanismen des Browsers, ohne komplexe Konfiguration und API-Schlüsselverwaltung.

✅ KI-Assistenten greifen direkt auf strukturierte Daten zu, was die Interaktionseffizienz erhöht.

✅ Unterstützt anwendungsübergreifende Workflows, wobei jede Anwendung ihre eigene Authentifizierung und Zugriffskontrolle behält.

✅ Läuft innerhalb des Browser-Sicherheitsmodells und gewährleistet so die Datensicherheit.

Projektarchitektur:

Tab MCP Servers: laufen innerhalb der Webseite und interagieren mit Authentifizierungs-APIs.
MCP-B Extension: verbindet Tab-Server und KI-Assistenten, aggregiert Tools und leitet Anfragen weiter.
Transport Layers: ermöglichen sichere Kommunikation über die Browser-Messaging-API.

Technologie-Stack:

Frontend: React + TanStack Query + Shadcn UI.
Backend: Cloudflare Workers + Hono.js + PostgreSQL + Drizzle ORM.
Daten-Synchronisation: Echtzeit-Synchronisation über ElectricSQL.

WebMCP使用方法

Verwendung:

✅ Für fortgeschrittene Benutzer:

Abhängigkeiten installieren: pnpm install
Entwicklungsserver starten: pnpm dev
Projekt erstellen: pnpm build

✅ Für normale Benutzer:

Installieren Sie die Browser-Erweiterung aus dem Chrome Web Store. Es ist keine Konfiguration von API-Schlüsseln erforderlich, und der KI-Assistent kann über bestehende Sitzungen mit der Website interagieren.

Projekt-Adresse:https://github.com/MiguelsPizza/WebMCP

Offizielle Website:https://mcp-b.ai/