Merge pull request #27 from e2b-dev/add-examples

Add example apps

Author: mlejva

README.md

@@ -6,9 +6,17 @@ Each sandbox is isolated from the others and can be customized with any dependen
 
 ![Desktop Sandbox](readme-assets/screenshot.png)
 
-### Example app using Computer Use with Anthropic's Claude
+## Examples
 
-Check out the [example open-source app](https://github.com/e2b-dev/secure-computer-use) in a separate repository.
+### Open computer use
+
+Check out the [example open-source app](https://github.com/e2b-dev/open-computer-use) in a separate repository.
+
+### Basic SDK usage examples
+
+Check out the examples directory for more examples on how to use the SDK:
+- [Python](./examples/basic-python)
+- [JavaScript](./examples/basic-javascript)
 
 ## 🚀 Getting started
 

examples/basic-javascript/.env.example

@@ -0,0 +1 @@
+E2B_API_KEY=your_api_key

examples/basic-javascript/README.md

@@ -0,0 +1,31 @@
+# Desktop Sandbox JavaScript Example
+
+This is a basic example of how to use the Desktop Sandbox JavaScript SDK with streaming and moving mouse around inside an Electron app.
+
+## How to run
+
+### 1. Create `.env` file
+
+```bash
+cp .env.example .env
+```
+
+### 2. Set `E2B_API_KEY` in `.env` file
+
+Get your API key at [e2b.dev/dashboard](https://e2b.dev/dashboard).
+
+```bash
+E2B_API_KEY="your_api_key"
+```
+
+### 3. Install dependencies
+
+```bash
+npm install
+```
+
+### 4. Run
+
+```bash
+npm start
+```

examples/basic-javascript/index.js

@@ -0,0 +1,104 @@
+import 'dotenv/config'
+import { app, BrowserWindow } from 'electron'
+import { Sandbox } from '@e2b/desktop'
+
+// Additional px to take into the account the window border at the top
+const windowFrameHeight = 29
+
+app.on('window-all-closed', () => {
+  app.quit()
+})
+
+function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * @param {string} streamUrl - The URL of the stream to load
+ * @param {number} width - The width of the window
+ * @param {number} height - The height of the window
+ */
+async function createWindow(streamUrl, width, height) {
+  const win = new BrowserWindow({
+    title: 'E2B Desktop',
+    width,
+    height: height + windowFrameHeight,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      webviewTag: true,
+    },
+  })
+
+  console.log('> Loading stream URL...')
+  await win.loadURL(streamUrl)
+  console.log(' - Stream URL loaded')
+}
+
+/**
+ * @param {import('@e2b/desktop').Sandbox} desktop - E2B desktop sandbox
+ * @param {number} width - The width of the window
+ * @param {number} height - The height of the window
+ */
+async function moveAround(desktop, width, height) {
+  console.log('\n> Randomly moving mouse and right clicking 5 times...')
+  for (let i = 0; i < 5; i++) {
+    const x = Math.floor(Math.random() * width)
+    const y = Math.floor(Math.random() * height)
+    await desktop.moveMouse(x, y)
+    console.log(` - Moved mouse to ${x}, ${y}`)
+    await desktop.rightClick()
+    console.log(` - Right clicked ${i}`)
+    console.log(' - Waiting 2 seconds...\n')
+    await wait(2000)
+  }
+}
+
+async function main() {
+  console.log('> Waiting for electron app to be ready...')
+  await app.whenReady()
+  console.log(' - Electron app is ready')
+
+  console.log('\n> Starting desktop sandbox...')
+  const desktop = await Sandbox.create()
+  console.log(' - Desktop sandbox started, ID:', desktop.sandboxId)
+
+  const size = await desktop.getScreenSize()
+  console.log(' - Desktop sandbox screen size:', size)
+
+  console.log('\n> Starting desktop stream...')
+  await desktop.stream.start()
+
+  console.log('\n> Waiting 5 seconds for the stream to load...')
+  for (let i = 5; i > 0; i--) {
+    console.log(` - ${i} seconds remaining until the next step...`)
+    await wait(1000)
+  }
+
+  const url = desktop.stream.getUrl()
+  console.log(' - Stream URL:', url)
+
+  console.log('\n> Creating browser window...')
+  createWindow(url, size.width, size.height)
+  console.log(' - Browser window created')
+
+  await moveAround(desktop, size.width, size.height)
+
+  console.log('\nPress enter to kill the sandbox and close the window...')
+  process.stdin.once('data', async () => {
+    console.log('\n> Stopping desktop stream...')
+    await desktop.stream.stop()
+    console.log(' - Desktop stream stopped')
+
+    console.log('\n> Closing browser window...')
+    console.log(' - Browser window closed')
+
+    console.log('\n> Killing desktop sandbox...')
+    await desktop.kill()
+    console.log(' - Desktop sandbox killed')
+
+    app.quit()
+  })
+}
+
+main().then().catch(console.error)