MCP Fullstack

import React from 'react' import { useQuery } from '@tanstack/react-query' import { Globe, Monitor, Camera, Play } from 'lucide-react' export default function BrowserSessions() { const { data: sessionsData } = useQuery({ queryKey: ['sessions'], queryFn: async () => { const response = await fetch('/sessions') return response.json() }, refetchInterval: 3000 }) const browserSessions = sessionsData?.sessions?.filter((s: any) => s.type === 'browser') || [] return ( <div className="px-4 sm:px-6 lg:px-8"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Browser Sessions</h1> <p className="mt-2 text-sm text-gray-700 dark:text-gray-300"> Monitor and manage active browser automation sessions. </p> </div> </div> {browserSessions.length > 0 ? ( <div className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2"> {browserSessions.map((session: any) => ( <div key={session.id} className="bg-white dark:bg-gray-800 shadow rounded-lg border dark:border-gray-700"> <div className="px-6 py-4 border-b dark:border-gray-700"> <div className="flex items-center justify-between"> <div className="flex items-center space-x-3"> <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center"> <Globe className="w-5 h-5 text-blue-600" /> </div> <div> <h3 className="text-lg font-medium text-gray-900 dark:text-white"> Browser Session </h3> <p className="text-sm text-gray-500 dark:text-gray-400 font-mono"> {session.id.slice(0, 12)}... </p> </div> </div> <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300"> Active </span> </div> </div> <div className="p-6"> {/* Session placeholder content */} <div className="aspect-video bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center"> <div className="text-center"> <Monitor className="mx-auto h-8 w-8 text-gray-400 mb-2" /> <p className="text-sm text-gray-500 dark:text-gray-400"> Browser viewport placeholder </p> <p className="text-xs text-gray-400 mt-1"> Screenshots would appear here </p> </div> </div> <div className="mt-4 flex justify-between items-center"> <div className="flex space-x-2"> <button className="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-xs font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> <Camera className="w-3 h-3 mr-1" /> Screenshot </button> <button className="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-xs font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> <Play className="w-3 h-3 mr-1" /> Record </button> </div> <div className="text-xs text-gray-500 dark:text-gray-400"> Tools: {sessionsData?.stats?.tools_by_session?.[session.id] || 0} </div> </div> </div> </div> ))} </div> ) : ( <div className="mt-8 text-center py-12"> <div className="w-16 h-16 mx-auto bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4"> <Globe className="w-8 h-8 text-gray-400" /> </div> <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No browser sessions</h3> <p className="text-sm text-gray-500 dark:text-gray-400 mb-4"> Start a browser session using the browser.start_session tool to see it here. </p> <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 max-w-lg mx-auto"> <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">Example MCP call:</h4> <pre className="text-xs bg-white dark:bg-gray-900 p-3 rounded border text-left overflow-x-auto"> {`{ "jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": { "name": "browser.start_session", "arguments": { "opts": { "headless": false, "viewport": {"w": 1280, "h": 720} } } } }`} </pre> </div> </div> )} </div> ) }