Server-Sent Events(SSE)를 통해 Model Context Protocol (MCP) 서버와 상호작용하기 위한 사용하기 쉬운 인터페이스를 제공하는 현대 React 애플리케이션입니다.

데모

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

♨ 특징

• ** 실시간 통신**: MCP 서버에 직접 연결 -Interactive UI: React 및 Tailwind CSS로 내장된 깨끗하고 반응형 인터페이스
• Theme Support: 빛과 어두운 모드로 시스템 설정 감지
• Screenshot 미리보기: MCP 서버 응답의 라이브 브라우저 스크린샷 -Message History: 명확한 메시지 스레드와 Persistent 채팅 기록
• Request Management: 자주 묻는 질문
• ** 연결 관리**: Easy 서버 연결 구성

Pre Pre

• Node.js (v18 이상)
• pnpm (추천 패키지 관리자)
• 연결용 MCP 서버 실행
• Python 3.8+ (예 서버 실행)

---

⭐ 시작하기

1. ** 저장소를 복제 **

2. **모든 종점 **

3. ** 개발 서버 시작 **

4. **Proxy Server 시작 **

신청은 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."""