脚本プランナー▸ 
AIアプリ 
AIニュース WebMCP：WebサイトにMCP対応を可能にし、AIアシスタントとWebアプリを連携
小编 ·
WebMCP：WebサイトにMCP対応を可能にし、AIアシスタントとWebアプリを連携
WebMCP はブラウザベースの MCP 実装ソリューションであり、aiアシスタントが標準化されたツールを通じて Web アプリケーションと対話できるようにします。MCP サーバーを Web ページに埋め込み、Web アプリケーションと直接統合します。API キーや OAuth 設定は不要で、ブラウザから直接アクセスしてリアルタイム同期が可能で、Web アプリケーションの状態と直接統合されます。クロスアプリケーションのワークフローをサポートし、Ai アシスタントが複数の異なる Web アプリケーション間で自動的にタスクを完了できるようにし、既存の MCP ソリューションがブラウザを回避するという問題を解決するとともに、ブラウザの認証とセキュリティモデルを活用します。
主な機能：
✅ ブラウザセッションと Cookie を使用して認証を行います。
✅ JSON-RPC インターフェースを通じて操作し、DOM 操作を回避します。
✅ Web アプリケーションの状態とリアルタイムで同期します。
✅ あらゆる JavaScript フレームワークまたは純粋な JavaScript に適用可能です。
✅ 実装コードは通常 50 行未満です。
✅ ブラウザの同一オリジンポリシーと権限に準拠しています。
プロジェクトの特徴：
✅ ブラウザの認証メカニズムを活用し、複雑な設定や API キーの管理が不要です。
✅ AI アシスタントが構造化データに直接アクセスし、対話効率を向上させます。
✅ クロスアプリケーションのワークフローをサポートし、各アプリケーションは独立した認証とアクセス制御を維持します。
✅ ブラウザのセキュリティモデル内で動作し、データの安全性を保証します。
プロジェクトアーキテクチャ：
Tab MCP Servers：Web ページ内で動作し、認証 API と対話します。
MCP-B Extension：タブサーバーと AI アシスタントを接続し、ツールを集約してリクエストをルーティングします。
Transport Layers：ブラウザのメッセージング API を通じて安全な通信を実現します。
技術スタック：
フロントエンド：React + TanStack Query + Shadcn UI。
バックエンド：Cloudflare Workers + Hono.js + PostgreSQL + Drizzle ORM。
データ同期：ElectricSQL を通じてリアルタイム同期を実現。
使用方法：
✅ 上級ユーザー向け：
依存関係のインストール：pnpm install
開発サーバーの起動：pnpm dev
プロジェクトのビルド：pnpm build
✅ 一般ユーザー向け：
Chrome Web Store からブラウザプラグイン拡張機能をインストールします。API キーの設定は不要で、AI アシスタントは既存のセッションを通じて Web サイトと対話できます。
プロジェクトアドレス：https://github.com/MiguelsPizza/WebMCP
公式サイトアドレス：https://mcp-b.ai/
