mcp-use · Pederzh · Oct 8, 2025 · Oct 7, 2025 · Oct 8, 2025
diff --git a/eslint.config.js b/eslint.config.js
@@ -5,6 +5,7 @@ export default antfu({
   typescript: true,
   rules: {
     'node/prefer-global/process': 'off',
+    'no-console': 'off',
   },
 }, {
   files: ['examples/**/*.ts'],

diff --git a/examples/react/README.md b/examples/react/README.md
@@ -0,0 +1,132 @@
+# MCP Use React Example
+
+This is a React example that demonstrates how to use the `mcp-use` library in a React/browser application. The example shows how to:
+
+- Import and initialize the MCPClient from `mcp-use/browser`
+- Connect to MCP servers via WebSocket or HTTP/SSE
+- Display available tools from connected servers
+- Handle loading states and errors
+
+## Browser Compatibility
+
+The browser version (`mcp-use/browser`) supports:
+
+- ✅ **WebSocket connections**: Connect to MCP servers via WebSocket
+- ✅ **HTTP/SSE connections**: Connect to MCP servers via HTTP or Server-Sent Events
+- ❌ **Stdio connections**: Not supported (requires Node.js child_process)
+
+Example configurations:
+
+```typescript
+// WebSocket connection
+const config = {
+  mcpServers: {
+    myServer: {
+      ws_url: 'ws://localhost:8080',
+      authToken: 'optional-token'
+    }
+  }
+}
+
+// HTTP connection (with automatic SSE fallback)
+const config = {
+  mcpServers: {
+    myServer: {
+      url: 'http://localhost:8080',
+      authToken: 'optional-token',
+      preferSse: false // Set to true to force SSE
+    }
+  }
+}
+```
+
+## Setup
+
+1. First, build the main `mcp-use` library:
+
+   ```bash
+   cd ../../
+   pnpm build
+   ```
+
+2. Install dependencies for the React example:
+
+   ```bash
+   cd examples/react
+   pnpm install
+   ```
+
+3. Build the React example:
+
+   ```bash
+   pnpm build
+   ```
+
+4. Preview the example:
+   ```bash
+   pnpm preview
+   # or use the simple server:
+   pnpm serve
+   ```
+
+## Development
+
+To run in development mode:
+
+```bash
+pnpm dev
+```
+
+This will start a development server with hot reloading.
+
+## Features
+
+The React example includes:
+
+- **MCPTools Component**: A React component that displays available tools from MCP servers
+- **Tool Display**: Shows tool names, descriptions, and input schemas
+- **Server Management**: Connect/disconnect from MCP servers
+- **Error Handling**: Displays connection errors and loading states
+- **Responsive UI**: Clean, modern interface for exploring MCP tools
+
+## Configuration
+
+The example uses a default configuration with a filesystem server. You can modify the `exampleConfig` in `react_example.tsx` to use different MCP servers.
+
+## File Structure
+
+- `index.tsx` - Entry point for the React application
+- `react_example.tsx` - Main React component with MCP integration
+- `react_example.html` - HTML template
+- `vite.config.ts` - Vite bundler configuration (includes browser polyfills)
+- `package.json` - Dependencies and scripts
+- `tsconfig.json` - TypeScript configuration
+
+## Important Notes
+
+### Vite Configuration
+
+The `vite.config.ts` includes necessary polyfills for browser compatibility:
+
+```typescript
+const config = {
+  define: {
+    'global': 'globalThis',
+    'process.env.DEBUG': 'undefined',
+    'process.platform': '""',
+    'process.version': '""',
+    'process.argv': '[]',
+  }
+}
+```
+
+These definitions ensure that Node.js-specific code paths are properly handled in the browser environment.
+
+### Real MCP Client
+
+This example uses the **actual** MCP client code from `mcp-use/browser`, not mocks. It includes:
+
+- Real WebSocket and HTTP/SSE connectors
+- Full MCP protocol implementation
+- Actual tool listing and execution capabilities
+- Browser-safe logging (falls back to console)
diff --git a/examples/react/index.html b/examples/react/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MCP Tools Explorer - React Example</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+          'Droid Sans', 'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background-color: #f5f5f5;
+      }
+
+      #root {
+        min-height: 100vh;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div class="container">
+        <h1>Loading MCP Tools Explorer...</h1>
+        <p>If this message persists, check the browser console for errors.</p>
+      </div>
+    </div>
+
+    <!-- React and ReactDOM will be loaded by the bundler -->
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/index.tsx b/examples/react/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import ReactExample from './react_example'
+
+const container = document.getElementById('root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<ReactExample />)
+}
+else {
+  console.error('Root element not found')
+}