Server-Sent Events(SSE) を通じて、モデルコンテキストプロトコル(MCP)サーバーと相互作用するためのユーザーフレンドリーなインターフェイスを提供するモダンな React アプリケーション。

✔ デモ

[https://github.com/user-attachments/assets/52ab11ad-741f-4506-99ad-9f1972a3aad1]

OST の特徴

• リアルタイム通信: MCP サーバーへの直接 SSE 接続
• 内部UI: React と Tailwind CSS で構築されたクリーンで応答性の高いインターフェイス
• Theme サポート:システム好みの検出のライトそして暗いモード -スクリーンショットプレビュー: MCP サーバー対応のライブブラウザスクリーンショット
• メッセージ履歴: 明確なメッセージのスレッドで永続的なチャット履歴
• 要求管理: 進行中のリクエストとチャット履歴の削除
• 接続管理: 容易なサーバー接続構成

受託者

• Node.js(v18以降)
• pnpm(推奨パッケージマネージャ)
• 接続用のMCPサーバーの実行
• Python 3.8+ (例のサーバを実行する) ・

OST 始める

1. リポジトリのクローン

2.依存関係のインストール

3.開発サーバーの開始

4.プロキシサーバーの起動

[[http://localhost:5173]で申請ができます。

----- 使用法

Browser-use MCP Client

A modern React application that provides a user-friendly interface for interacting with Model Context Protocol (MCP) servers through Server-Sent Events (SSE).

🎥 Demo

https://github.com/user-attachments/assets/52ab11ad-741f-4506-99ad-9f1972a3aad1

🚀 Features

• Real-time Communication: Direct SSE connection to MCP servers
• Interactive UI: Clean and responsive interface built with React and Tailwind CSS
• Theme Support: Light and dark mode with system preference detection
• Screenshot Preview: Live browser screenshots from MCP server responses
• Message History: Persistent chat history with clear message threading
• Request Management: Cancel in-progress requests and clear chat history
• Connection Management: Easy server connection configuration

📋 Prerequisites

• Node.js (v18 or later)
• pnpm (recommended package manager)
• A running MCP server for connection
• Python 3.8+ (for running the example server)

🚀 Getting Started

1. Clone the Repository

   git clone 
   cd browser-use-mcp-client
   

2. Install Dependencies

   pnpm install
   

3. Start the Development Server

   pnpm dev
   

4. Start the Proxy Server

   ./proxy/index.js
   

The application will be available at http://localhost:5173

💻 Usage

🤖 Example MCP Server

Here’s an example of a Python-based MCP server that uses browser automation:

#!/usr/bin/env python3
import asyncio
from dotenv import load_dotenv
from typing import Awaitable, Callable
from mcp.server.fastmcp import FastMCP, Context
from browser_use import Agent, Browser, BrowserConfig
from langchain_google_genai import ChatGoogleGenerativeAI

# Load environment variables from .env file
load_dotenv()

# Initialize FastMCP server
mcp = FastMCP("browser-use")

browser = Browser(
    config=BrowserConfig(
        chrome_instance_path="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222",
        headless=True
    )
)

llm = ChatGoogleGenerativeAI(model="gemini-2.0-flash")
agent = None

@mcp.tool()
async def perform_search(task: str, context: Context):
    """Perform the actual search in the background."""
    async def step_handler(state, *args):
        if len(args) != 2:
            return
        await context.session.send_log_message(
            level="info",
            data={"screenshot": state.screenshot, "result": args[0]}
        )

    asyncio.create_task(
        run_browser_agent(task=task, on_step=step_handler)
    )
    return "Processing Request"

@mcp.tool()
async def stop_search(*, context: Context):
    """Stop a running browser agent search by task ID."""
    if agent is not None:
        await agent.stop()
    return "Running Agent stopped"

async def run_browser_agent(task: str, on_step: Callable[[], Awaitable[None]]):
    """Run the browser-use agent with the specified task."""