[Work-in-progress] Code Provider API with E2B

README.md

@@ -69,31 +69,32 @@ builders.
 ## What you can do with Onlook:
 
 - [x] Create Next.js app in seconds
-  - [x] Start from text or image
-  - [ ] Use prebuilt templates
-  - [ ] Import from Figma
-  - [ ] Start from GitHub repo
+    - [x] Start from text or image
+    - [ ] Use prebuilt templates
+    - [ ] Import from Figma
+    - [ ] Start from GitHub repo
 - [x] Visually edit your app
-  - [x] Use Figma-like UI
-  - [x] Preview your app in real-time
-  - [x] Manage brand assets and tokens
-  - [x] Create and navigate to Pages
-  - [x] Browse layers
-  - [x] Manage project Images
-  - [ ] Detect and use Components – _Previously in
-        [Onlook Desktop](https://github.com/onlook-dev/desktop)_
+    - [x] Use Figma-like UI
+    - [x] Preview your app in real-time
+    - [x] Manage brand assets and tokens
+    - [x] Create and navigate to Pages
+    - [x] Browse layers
+    - [x] Manage project Images
+    - [ ] Detect and use Components – _Previously in
+          [Onlook Desktop](https://github.com/onlook-dev/desktop)_
 - [x] Development Tools
-  - [x] Real-time code editor
-  - [x] Save and restore from checkpoints
-  - [x] Run commands via CLI
-  - [x] Connect with app marketplace
+
+    - [x] Real-time code editor
+    - [x] Save and restore from checkpoints
+    - [x] Run commands via CLI
+    - [x] Connect with app marketplace
 
 - [x] Deploy your app in seconds
-  - [x] Generate sharable links
-  - [x] Link your custom domain
+    - [x] Generate sharable links
+    - [x] Link your custom domain
 - [ ] Collaborate with your team
-  - [ ] Real-time editing
-  - [ ] Leave comments
+    - [ ] Real-time editing
+    - [ ] Leave comments
 
 ![Onlook-GitHub-Example](https://github.com/user-attachments/assets/642de37a-72cc-4056-8eb7-8eb42714cdc4)
 
@@ -182,6 +183,7 @@ For a full walkthrough, check out our
 #### Sandbox and hosting
 
 - [CodeSandboxSDK](https://codesandbox.io/docs/sdk) - Dev sandbox
+- [E2B](https://e2b.dev/docs) - Dev sandbox
 - [Freestyle](https://www.freestyle.sh/) - Hosting
 
 #### Runtime

apps/backend/supabase/config.toml

@@ -10,6 +10,8 @@ max_rows = 100
 [auth]
 site_url = "https://onlook.com"
 additional_redirect_urls = [
+    "https://onlook.internal",
+    "https://onlook.internal/auth/callback",
     "http://localhost:3000",
     "http://localhost:3000/auth/callback",
 ]

apps/coderouter/.env.example

@@ -0,0 +1,11 @@
+# Prefix the API paths
+URL_PATH_PREFIX="/coderouter"
+
+# Do not share this secret key - used to generate JWT token used in the client
+JWT_SECRET_KEY="Replace this with your own secret"
+
+# Insert your custom API key here and store in your other backend as well.
+# It'll be used for server-to-server authentication.
+CODEROUTER_API_KEY=""
+
+E2B_API_KEY="Get your API key at https://e2b.dev"

apps/coderouter/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

apps/coderouter/Dockerfile.dev

@@ -0,0 +1,14 @@
+FROM alpine:3.21.3
+
+WORKDIR /app
+
+COPY . .
+
+# ENV CARGO_HOME=/project/etc/cargo
+# ENV RUSTUP_HOME=/project/etc/rustup
+ENV BUN_INSTALL=/usr/local/bin/bun
+
+RUN apk add curl bash build-base
+RUN curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.5"
+
+CMD ["/usr/local/bin/bun/bin/bun", "dev"]

apps/coderouter/README.md

@@ -0,0 +1,46 @@
+# Bun + TypeScript API Starter (Hono + Drizzle)
+
+A batteries-included starter for building an API with **Bun**, **TypeScript**, **Hono**, and **Drizzle ORM**.  
+It includes: multi-database support (Postgres/MySQL/SQLite) with migrations, unit + functional tests,
+OpenAPI generation, Swagger UI, TypeDoc, and a top-tier GitHub toolchain (Actions, Codecov, Renovate, Biome, Dependabot, GitHub Pages).
+
+## Quickstart
+
+```bash
+bun install
+cp .env.example .env
+# choose a DB (sqlite by default)
+bun db:generate     # generate SQL from schema
+bun db:migrate      # run migrations
+bun dev             # start the API on http://localhost:3000
+```
+
+OpenAPI: http://localhost:3000/openapi.json  
+Docs (Swagger UI): http://localhost:3000/docs
+
+### Scripts
+- `bun dev` — run in watch mode
+- `bun start` — production start
+- `bun test` — run all tests with coverage
+- `bun lint` — Biome lint/format check
+- `bun fmt` — format files with Biome
+- `bun db:generate` — generate migrations via drizzle-kit
+- `bun db:migrate` — apply migrations
+- `bun openapi` — regenerate OpenAPI JSON
+- `bun docs` — build TypeDoc to `site/typedoc`
+
+### Multi-DB
+Set `DRIZZLE_DB` to `postgres` | `mysql` | `sqlite` and provide `DATABASE_URL` accordingly.
+SQLite works out-of-the-box (`DATABASE_URL=file:./dev.sqlite`).
+
+### GitHub Pages (Docs)
+The `pages.yml` workflow builds and deploys:
+- `/openapi.json` -> `/site/api/openapi.json`
+- Swagger UI -> `/site/api/`
+- TypeDoc -> `/site/typedoc/`
+A small `site/index.html` links to both.
+
+Enable Pages in **Settings → Pages** (source: GitHub Actions).
+
+## License
+MIT

apps/coderouter/biome.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
+	"formatter": { "enabled": true, "formatWithErrors": true },
+	"linter": { "enabled": true }
+}

apps/coderouter/bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+exact = false

apps/coderouter/codecov.yml

@@ -0,0 +1,6 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 60%
+        threshold: 5%

apps/coderouter/drizzle.config.ts

@@ -0,0 +1,15 @@
+import "dotenv/config";
+
+export default {
+	out: "./drizzle",
+	schema: "./src/db/schema.ts",
+	dialect:
+		process.env.DRIZZLE_DB === "postgres"
+			? "postgresql"
+			: process.env.DRIZZLE_DB === "mysql"
+				? "mysql"
+				: "sqlite",
+	dbCredentials: {
+		connectionString: process.env.DATABASE_URL,
+	},
+};

apps/coderouter/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "coderouter",
+	"version": "0.0.1",
+	"private": false,
+	"type": "module",
+	"scripts": {
+		"dev": "bun run --hot src/server.ts",
+		"start": "bun run src/server.ts",
+		"test": "bun test --coverage",
+		"lint": "biome check .",
+		"fmt": "biome format --write .",
+		"db:generate": "drizzle-kit generate",
+		"db:migrate": "bun run scripts/migrate.ts"
+	},
+	"dependencies": {
+		"@e2b/code-interpreter": "1.5.1",
+		"@hono/zod-openapi": "^1.1.0",
+		"@hono/zod-validator": "^0.2.1",
+		"@types/jsonwebtoken": "^9.0.10",
+		"better-sqlite3": "^9.4.3",
+		"dotenv": "^16.4.5",
+		"drizzle-kit": "^0.27.0",
+		"drizzle-orm": "^0.33.0",
+		"hono": "^4.9.2",
+		"jsonwebtoken": "^9.0.2",
+		"mysql2": "^3.9.7",
+		"pg": "^8.11.5",
+		"zod": "^4.0.17"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.1.4",
+		"@types/node": "^22.5.0",
+		"bun-types": "^1.2.20",
+		"supertest": "^7.0.0",
+		"typedoc": "^0.26.6",
+		"undici": "^6.19.8"
+	}
+}

apps/coderouter/renovate.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:recommended"],
+	"automerge": false
+}

apps/coderouter/scripts/migrate.ts

@@ -0,0 +1,9 @@
+import "dotenv/config";
+import { execSync } from "node:child_process";
+
+try {
+	execSync("bun x drizzle-kit migrate", { stdio: "inherit" });
+} catch (e) {
+	console.error("Migration failed", e);
+	process.exit(1);
+}

apps/coderouter/site/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Project Docs</title>
+  </head>
+  <body>
+    <h1>Project Documentation</h1>
+    <ul>
+      <li><a href="./api/">API (Swagger UI)</a></li>
+      <li><a href="./typedoc/">TypeDoc</a></li>
+    </ul>
+  </body>
+</html>

apps/coderouter/src/api/auth/sign/index.ts

@@ -0,0 +1,81 @@
+import { LocalHono } from "@/server";
+import { encodeJwtToken, verifyApiKeyFromHeader } from "@/util/auth";
+import { createRoute, z } from "@hono/zod-openapi";
+import { env } from "bun";
+
+export interface AuthSignInput {
+  sandboxId?: string;
+  userId?: string;
+}
+
+const BodySchema: z.ZodType<AuthSignInput> = z.object({
+  sandboxId: z.string().optional().openapi({
+    description:
+      "The ID of the sandbox. This is your own ID. It can be a UUID or any unique string. Required when using a sandbox.",
+    example: "00000000-0000-0000-0000-000000000000",
+  }),
+  userId: z.string().optional().openapi({
+    description:
+      "The ID of the user. This is your own ID. It can be a UUID or any unique string.",
+    example: "00000000-0000-0000-0000-000000000000",
+  }),
+});
+
+const ResponseSchema = z.object({
+  jwt: z.string().openapi({
+    description: `The JWT token to send when interacting with the API as header "X-Auth-Jwt.".`,
+  }),
+});
+
+const route = createRoute({
+  method: "post",
+  path: env.URL_PATH_PREFIX + "/api/auth/sign",
+  security: [{ apikey: [] }],
+  request: {
+    body: {
+      content: {
+        "application/json": {
+          schema: BodySchema,
+        },
+      },
+    },
+  },
+  responses: {
+    200: {
+      content: {
+        "application/json": {
+          schema: ResponseSchema,
+        },
+      },
+      description:
+        "Create a new sandbox. If the sandbox already exists, the system will resume the sandbox.",
+    },
+    401: {
+      content: {
+        "application/json": {
+          schema: z.object({ error: z.string() }),
+        },
+      },
+      description: "The API key is invalid.",
+    },
+  },
+});
+
+export function api_auth_sign(app: LocalHono) {
+  app.openapi(route, async (c) => {
+    if (!verifyApiKeyFromHeader(c.req.header("Authorization"))) {
+      return c.json({ error: "Unauthorized" }, 401);
+    }
+    const body = await c.req.valid("json");
+    const jwt = encodeJwtToken({
+      sandboxId: body.sandboxId,
+      userId: body.userId,
+    });
+    return c.json(
+      {
+        jwt,
+      },
+      200
+    );
+  });
+}

apps/coderouter/src/api/sandbox/create/index.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'bun:test';
+import { Hono } from 'hono';
+import { api_sandbox_create } from './index';
+
+describe('sandbox create endpoints', () => {
+    it('POST /coderouter/api/sandbox/create returns empty object', async () => {
+        const app = new Hono();
+        api_sandbox_create(app);
+
+        const response = await app.request(env.URL_PATH_PREFIX + '/api/sandbox/create', {
+            method: 'POST',
+        });
+
+        expect(response.status).toBe(201);
+        const body = await response.json();
+        expect(body).toEqual({});
+    });
+});