Skip to content

Commit 8a71032

Browse files
tonxxdtonxxd
committed
Fix OAuth flow and session API issues - skip ESLint for now
1 parent a2c7269 commit 8a71032

20 files changed

+3277
-146
lines changed

‎examples/react/README.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# MCP Use React Example
2+
3+
This is a React example that demonstrates how to use the `mcp-use` library in a React/browser application. The example shows how to:
4+
5+
- Import and initialize the MCPClient from `mcp-use/browser`
6+
- Connect to MCP servers via WebSocket or HTTP/SSE
7+
- Display available tools from connected servers
8+
- Handle loading states and errors
9+
10+
## Browser Compatibility
11+
12+
The browser version (`mcp-use/browser`) supports:
13+
14+
- ✅ **WebSocket connections**: Connect to MCP servers via WebSocket
15+
- ✅ **HTTP/SSE connections**: Connect to MCP servers via HTTP or Server-Sent Events
16+
- ❌ **Stdio connections**: Not supported (requires Node.js child_process)
17+
18+
Example configurations:
19+
20+
```typescript
21+
// WebSocket connection
22+
const config = {
23+
mcpServers: {
24+
myServer: {
25+
ws_url: 'ws://localhost:8080',
26+
authToken: 'optional-token'
27+
}
28+
}
29+
}
30+
31+
// HTTP connection (with automatic SSE fallback)
32+
const config = {
33+
mcpServers: {
34+
myServer: {
35+
url: 'http://localhost:8080',
36+
authToken: 'optional-token',
37+
preferSse: false // Set to true to force SSE
38+
}
39+
}
40+
}
41+
```
42+
43+
## Setup
44+
45+
1. First, build the main `mcp-use` library:
46+
47+
```bash
48+
cd ../../
49+
pnpm build
50+
```
51+
52+
2. Install dependencies for the React example:
53+
54+
```bash
55+
cd examples/react
56+
pnpm install
57+
```
58+
59+
3. Build the React example:
60+
61+
```bash
62+
pnpm build
63+
```
64+
65+
4. Preview the example:
66+
```bash
67+
pnpm preview
68+
# or use the simple server:
69+
pnpm serve
70+
```
71+
72+
## Development
73+
74+
To run in development mode:
75+
76+
```bash
77+
pnpm dev
78+
```
79+
80+
This will start a development server with hot reloading.
81+
82+
## Features
83+
84+
The React example includes:
85+
86+
- **MCPTools Component**: A React component that displays available tools from MCP servers
87+
- **Tool Display**: Shows tool names, descriptions, and input schemas
88+
- **Server Management**: Connect/disconnect from MCP servers
89+
- **Error Handling**: Displays connection errors and loading states
90+
- **Responsive UI**: Clean, modern interface for exploring MCP tools
91+
92+
## Configuration
93+
94+
The example uses a default configuration with a filesystem server. You can modify the `exampleConfig` in `react_example.tsx` to use different MCP servers.
95+
96+
## File Structure
97+
98+
- `index.tsx` - Entry point for the React application
99+
- `react_example.tsx` - Main React component with MCP integration
100+
- `react_example.html` - HTML template
101+
- `vite.config.ts` - Vite bundler configuration (includes browser polyfills)
102+
- `package.json` - Dependencies and scripts
103+
- `tsconfig.json` - TypeScript configuration
104+
105+
## Important Notes
106+
107+
### Vite Configuration
108+
109+
The `vite.config.ts` includes necessary polyfills for browser compatibility:
110+
111+
```typescript
112+
const config = {
113+
define: {
114+
'global': 'globalThis',
115+
'process.env.DEBUG': 'undefined',
116+
'process.platform': '""',
117+
'process.version': '""',
118+
'process.argv': '[]',
119+
}
120+
}
121+
```
122+
123+
These definitions ensure that Node.js-specific code paths are properly handled in the browser environment.
124+
125+
### Real MCP Client
126+
127+
This example uses the **actual** MCP client code from `mcp-use/browser`, not mocks. It includes:
128+
129+
- Real WebSocket and HTTP/SSE connectors
130+
- Full MCP protocol implementation
131+
- Actual tool listing and execution capabilities
132+
- Browser-safe logging (falls back to console)

‎examples/react/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MCP Tools Explorer - React Example</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
12+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
13+
sans-serif;
14+
-webkit-font-smoothing: antialiased;
15+
-moz-osx-font-smoothing: grayscale;
16+
background-color: #f5f5f5;
17+
}
18+
19+
#root {
20+
min-height: 100vh;
21+
}
22+
23+
.container {
24+
max-width: 1200px;
25+
margin: 0 auto;
26+
padding: 20px;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="root">
32+
<div class="container">
33+
<h1>Loading MCP Tools Explorer...</h1>
34+
<p>If this message persists, check the browser console for errors.</p>
35+
</div>
36+
</div>
37+
38+
<!-- React and ReactDOM will be loaded by the bundler -->
39+
<script type="module" src="./index.tsx"></script>
40+
</body>
41+
</html>

‎examples/react/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import ReactExample from './react_example'
4+
5+
const container = document.getElementById('root')
6+
if (container) {
7+
const root = createRoot(container)
8+
root.render(<ReactExample />)
9+
} else {
10+
console.error('Root element not found')
11+
}

0 commit comments

Comments
 (0)