Skip to content

Commit bdeab7c

Browse files
mishushakovmishushakov
authored
Add MCP Examples (#71)
2 parents 824386d + 7cd2216 commit bdeab7c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+15641
-0
lines changed

‎README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,55 @@ Read more about E2B on the [E2B website](https://e2b.dev) and the official [E2B
160160
</tbody>
161161
</table>
162162

163+
**Model Context Protocol (MCP)**
164+
165+
<table>
166+
<thead>
167+
<tr>
168+
<th>Example</th>
169+
<th>Description</th>
170+
<th>TypeScript</th>
171+
</tr>
172+
</thead>
173+
<tbody>
174+
<tr>
175+
<td>MCP Client</td>
176+
<td>Basic MCP client connection to E2B sandbox</td>
177+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-client-js">TypeScript</a></td>
178+
</tr>
179+
<tr>
180+
<td>MCP Custom Server</td>
181+
<td>Connect to custom filesystem MCP server from GitHub</td>
182+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-custom-server-js">TypeScript</a></td>
183+
</tr>
184+
<tr>
185+
<td>MCP Custom Template</td>
186+
<td>Create custom E2B template with pre-installed MCP servers</td>
187+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-custom-template-js">TypeScript</a></td>
188+
</tr>
189+
<tr>
190+
<td>MCP Research Agent</td>
191+
<td>Research agent using arXiv and DuckDuckGo MCP servers</td>
192+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-research-agent-js">TypeScript</a></td>
193+
</tr>
194+
<tr>
195+
<td>MCP Claude Code</td>
196+
<td>Claude Code with MCP integration</td>
197+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-claude-code-js">TypeScript</a></td>
198+
</tr>
199+
<tr>
200+
<td>MCP Browserbase</td>
201+
<td>Web automation agent using Browserbase MCP server</td>
202+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-browserbase-js">TypeScript</a></td>
203+
</tr>
204+
<tr>
205+
<td>MCP Groq Exa</td>
206+
<td>AI research using Groq with Exa MCP server</td>
207+
<td><a href="https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/mcp-groq-exa-js">TypeScript</a></td>
208+
</tr>
209+
</tbody>
210+
</table>
211+
163212
**Example use cases**
164213

165214
- Upload dataset and analyze it with Llama 3 - [Python](https://github.com/e2b-dev/e2b-cookbook/tree/main/examples/upload-dataset-code-interpreter)

‎examples/mcp-browserbase-js/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Browserbase MCP Example
2+
3+
This example demonstrates how to use the Browserbase MCP server with E2B to create a web automation agent that can take screenshots and interact with web pages.
4+
5+
## Features
6+
7+
- Connect to Browserbase MCP server through E2B
8+
- Use OpenAI Agents to automate web tasks
9+
- Take screenshots of web pages
10+
- Stream results in real-time
11+
12+
## Prerequisites
13+
14+
- E2B API key
15+
- Browserbase API key
16+
- Browserbase project ID
17+
- Gemini API key (for Browserbase)
18+
- OpenAI API key
19+
20+
## Setup
21+
22+
1. Copy the environment template:
23+
```bash
24+
cp env.template .env
25+
```
26+
27+
2. Fill in your API keys in the `.env` file:
28+
```
29+
E2B_API_KEY=your_e2b_api_key
30+
BROWSERBASE_API_KEY=your_browserbase_api_key
31+
BROWSERBASE_PROJECT_ID=your_browserbase_project_id
32+
GEMINI_API_KEY=your_gemini_api_key
33+
OPENAI_API_KEY=your_openai_api_key
34+
```
35+
36+
3. Install dependencies:
37+
```bash
38+
npm install
39+
```
40+
41+
4. Run the example:
42+
```bash
43+
npm start
44+
```
45+
46+
## What it does
47+
48+
The example creates an E2B sandbox with the Browserbase MCP server, connects an OpenAI Agent to it, and then asks the agent to take a screenshot of the E2B landing page and describe what it's about.
49+
50+
## Learn more
51+
52+
- [E2B Documentation](https://e2b.dev/docs)
53+
- [Browserbase Documentation](https://browserbase.com)
54+
- [OpenAI Agents Documentation](https://platform.openai.com/docs/agents)

‎examples/mcp-browserbase-js/env.template‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Environment variables for Browserbase MCP example
2+
3+
# E2B API key - get from https://e2b.dev/docs/api-key
4+
E2B_API_KEY=
5+
6+
# Browserbase API key - get from https://browserbase.com
7+
BROWSERBASE_API_KEY=
8+
9+
# Browserbase project ID - get from your Browserbase dashboard
10+
BROWSERBASE_PROJECT_ID=
11+
12+
# Gemini API key for Browserbase - get from https://ai.google.dev/
13+
GEMINI_API_KEY=
14+
15+
# OpenAI API key for agents - get from https://platform.openai.com/api-keys
16+
OPENAI_API_KEY=

‎examples/mcp-browserbase-js/index.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import 'dotenv/config';
2+
import Sandbox from 'e2b';
3+
import { Agent, run, MCPServerStreamableHttp } from '@openai/agents';
4+
5+
async function runBrowserbaseExample() {
6+
console.log('Creating E2B sandbox with Browserbase MCP server...');
7+
8+
// Create E2B sandbox with Browserbase MCP server
9+
const sandbox = await Sandbox.create({
10+
mcp: {
11+
browserbase: {
12+
apiKey: process.env.BROWSERBASE_API_KEY!,
13+
geminiApiKey: process.env.GEMINI_API_KEY!,
14+
projectId: process.env.BROWSERBASE_PROJECT_ID!,
15+
},
16+
},
17+
timeoutMs: 600_000, // 10 minutes
18+
});
19+
20+
const mcpUrl = sandbox.getMcpUrl();
21+
console.log(`Sandbox created with MCP URL: ${mcpUrl}`);
22+
23+
// Set up MCP server connection
24+
const mcpServer = new MCPServerStreamableHttp({
25+
url: mcpUrl,
26+
name: 'E2B Browserbase Gateway',
27+
requestInit: {
28+
headers: {
29+
'Authorization': `Bearer ${await sandbox.getMcpToken()}`
30+
}
31+
},
32+
toolFilter: async (_, tool) => {
33+
console.log(`Calling tool: ${tool.name}`);
34+
return true;
35+
},
36+
});
37+
38+
// Create OpenAI agent
39+
const agent = new Agent({
40+
name: 'Web Automation Assistant',
41+
model: 'gpt-4o', // Using gpt-4o for compatibility
42+
mcpServers: [mcpServer],
43+
});
44+
45+
console.log('Connecting to MCP server...');
46+
await mcpServer.connect();
47+
console.log('Connected to MCP server successfully');
48+
49+
console.log('Starting web automation task...');
50+
const taskPrompt = 'Make a screenshot of the e2b.dev landing page and tell me what it is about.';
51+
52+
const result = await run(
53+
agent,
54+
taskPrompt,
55+
{
56+
stream: true,
57+
}
58+
);
59+
60+
console.log('\nWeb Automation Results:');
61+
result
62+
.toTextStream({ compatibleWithNodeStreams: true })
63+
.pipe(process.stdout);
64+
65+
await result.completed;
66+
console.log('\nWeb automation completed successfully!');
67+
68+
// Cleanup
69+
console.log('\nClosing MCP server connection...');
70+
await mcpServer.close();
71+
console.log('MCP server closed successfully');
72+
73+
console.log('Cleaning up sandbox...');
74+
await sandbox.kill();
75+
console.log('Sandbox closed successfully');
76+
}
77+
78+
// Run the browserbase example
79+
runBrowserbaseExample().catch((error) => {
80+
console.error('Failed to run browserbase example:', error);
81+
process.exit(1);
82+
});

0 commit comments

Comments
 (0)