diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4203871..18da3c0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -34,3 +34,28 @@ jobs:
 
       - name: Run tests
         run: npm run test:run
+
+  e2e:
+    runs-on: ubuntu-latest
+    needs: test
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: npx playwright test e2e/
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..b3d2f5a
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,68 @@
+# almostnode
+
+## What This Is
+
+almostnode is a **real competitor to WebContainers (StackBlitz)**. It runs Node.js natively in the browser — virtual filesystem, npm package installation, dev servers, the works.
+
+## Core Principle
+
+**Never write library-specific shim code. Fix the platform instead.**
+
+When a package doesn't work, the fix goes into the generic shims (fs, path, crypto, etc.), not into a package-specific adapter. Every demo should use real npm packages installed via `PackageManager`, served via `/_npm/` bundling, and running through the standard runtime. No CDN shortcuts, no manual protocol reimplementations, no fake adapters.
+
+## Architecture
+
+- **Runtime** (`src/runtime.ts`) — JS execution engine with `require()`, ESM-to-CJS transforms, 43 built-in module shims
+- **VirtualFS** (`src/virtual-fs.ts`) — In-memory filesystem, exposed as `require('fs')`
+- **PackageManager** (`src/npm/`) — Real npm packages downloaded, extracted, ESM-to-CJS transformed via esbuild-wasm
+- **Service Worker** — Network interception for HTTP servers (`/__virtual__/{port}/`)
+- **Dev Servers** — `NextDevServer` (Pages + App Router), `ViteDevServer` (React + HMR)
+- **just-bash** — Bash emulator with custom commands (`node`, `npm`, `convex`)
+- **Code Transforms** (`src/frameworks/code-transforms.ts`) — CSS Modules (css-tree AST), ESM-to-CJS (acorn AST), React Refresh, npm import redirect
+
+### Next.js Dev Server (split across files)
+
+- `src/frameworks/next-dev-server.ts` — Orchestrator (~1360 lines)
+- `src/frameworks/next-route-resolver.ts` — Route resolution (~600 lines)
+- `src/frameworks/next-api-handler.ts` — API route handlers (~350 lines)
+- `src/frameworks/next-shims.ts` — Shim string constants (~1040 lines)
+- `src/frameworks/next-html-generator.ts` — HTML page generation (~560 lines)
+- `src/frameworks/next-config-parser.ts` — next.config.js parsing (AST + regex fallback)
+
+## Commands
+
+```bash
+npm run dev          # Vite dev server (port 5173)
+npm run test:run     # Unit tests (vitest, ~2250 tests, ~10s)
+npm run test:e2e     # E2E tests (playwright, ~105 tests)
+npm run build        # Build for production
+```
+
+## Testing
+
+- Unit tests: `tests/` directory, run with `npm run test:run`
+- E2E tests: `e2e/` directory, run with `npx playwright test e2e/`
+- Run a single E2E file: `npx playwright test e2e/vite-demo.spec.ts`
+- Test harnesses live in `examples/` (HTML files with VFS setup)
+
+## Key Technical Details
+
+- **`/_npm/` endpoint**: Bundles npm packages from VFS as ESM for browser consumption via esbuild
+- **`/_next/route-info`**: Server endpoint returning resolved route info (page, layouts, params) — used by client-side navigation
+- **Virtual prefix**: `/__virtual__/{port}/` — all imports go through this for service worker interception
+- **`isBrowser` flag**: In test env (jsdom), `isBrowser=false` — transforms run differently
+- **ESM-to-CJS**: Happens both at install time (esbuild-wasm) and at runtime (in `loadModule()`)
+- **Route groups**: `(groupName)` directories are transparent in URLs, resolved server-side
+
+## Where to Find More Context
+
+- **`README.md`** — Public API docs, usage examples, comparison with WebContainers, sandbox setup
+- **`CHANGELOG.md`** — Version history and what changed
+- **`examples/`** — Working demo HTML files (next-demo, vite-demo, express-demo, etc.) — read these to understand how the platform is used end-to-end
+- **`e2e/`** — Playwright E2E tests that exercise each demo — read these to understand what each demo should do
+
+When working on a specific demo or feature, read the corresponding example HTML and E2E test first.
+
+## Release Process
+
+Always bump version in `package.json` and update `CHANGELOG.md` before pushing. Follow [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) format, Semantic Versioning.
diff --git a/e2e/agent-workbench.spec.ts b/e2e/agent-workbench.spec.ts
new file mode 100644
index 0000000..6634b93
--- /dev/null
+++ b/e2e/agent-workbench.spec.ts
@@ -0,0 +1,175 @@
+import { test, expect } from '@playwright/test';
+
+const API_KEY = process.env.OPENAI_API_KEY || '';
+const PROXY_URL = encodeURIComponent('http://localhost:8787/?');
+
+test.describe('Agent Workbench with /_npm/ bundling', () => {
+  let pageErrors: string[] = [];
+
+  test.beforeEach(async ({ page }) => {
+    pageErrors = [];
+    page.on('console', (msg) => {
+      console.log(`[Browser ${msg.type()}]`, msg.text());
+    });
+    page.on('pageerror', (error) => {
+      console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
+    });
+  });
+
+  test('should load workbench and install packages', async ({ page }) => {
+    await page.goto('/examples/agent-workbench.html');
+
+    // Wait for all packages to be installed and workbench ready
+    await expect(page.locator('#logs')).toContainText('Workbench ready!', { timeout: 30000 });
+    await expect(page.locator('#logs')).toContainText('All packages installed');
+    await expect(page.locator('#logs')).toContainText('@ai-sdk/react');
+  });
+
+  test('should serve /_npm/ bundles with correct exports', async ({ page }) => {
+    await page.goto('/examples/agent-workbench.html');
+    await expect(page.locator('#logs')).toContainText('Workbench ready!', { timeout: 30000 });
+
+    // Start agent to activate the iframe + service worker
+    await page.fill('#setupKeyInput', API_KEY || 'sk-fake-key-for-testing');
+    await page.click('#setupKeyBtn');
+    await expect(page.locator('#logs')).toContainText('Agent ready', { timeout: 10000 });
+
+    // Wait a bit for SW to be fully ready
+    await page.waitForTimeout(3000);
+
+    // Fetch the /_npm/@ai-sdk/react bundle directly via the service worker
+    const bundleInfo = await page.evaluate(async () => {
+      try {
+        const res = await fetch('/__virtual__/3004/_npm/@ai-sdk/react');
+        const text = await res.text();
+        // Find all lines containing 'react' (not inside function bodies)
+        const lines = text.split('\n');
+        const reactLines = lines
+          .map((l, i) => ({ line: i+1, text: l.trim() }))
+          .filter(l => /\breact\b/.test(l.text) && l.text.length < 200)
+          .slice(0, 30);
+        return {
+          status: res.status,
+          length: text.length,
+          first2000: text.slice(0, 2000),
+          last2000: text.slice(-2000),
+          hasExportUseChat: text.includes('export var useChat'),
+          hasImportReact: text.includes('from "react"') || text.includes("from 'react'"),
+          hasRequireReact: text.includes('require("react")') || text.includes("require('react')"),
+          has__require: text.includes('__require'),
+          reactLines: reactLines,
+        };
+      } catch (e) {
+        return { error: String(e) };
+      }
+    });
+
+    console.log('[Test] Bundle info:', {
+      length: bundleInfo.length,
+      hasExportUseChat: (bundleInfo as any).hasExportUseChat,
+      has__require: (bundleInfo as any).has__require,
+    });
+    expect(bundleInfo.status).toBe(200);
+    expect(bundleInfo.length).toBeGreaterThan(500); // Real bundle, not error message
+    expect((bundleInfo as any).hasExportUseChat).toBe(true);
+  });
+
+  test('should serve /_npm/ bundles from VFS via esbuild', async ({ page }) => {
+    await page.goto('/examples/agent-workbench.html');
+
+    // Wait for workbench ready
+    await expect(page.locator('#logs')).toContainText('Workbench ready!', { timeout: 30000 });
+
+    // Enter API key and start agent
+    await page.fill('#setupKeyInput', API_KEY || 'sk-fake-key-for-testing');
+    await page.click('#setupKeyBtn');
+
+    // Wait for agent ready
+    await expect(page.locator('#logs')).toContainText('Agent ready', { timeout: 10000 });
+
+    // The overlay should be hidden
+    await expect(page.locator('#setupOverlay')).toHaveClass(/hidden/);
+
+    // Wait for iframe to load
+    const iframe = page.frameLocator('#preview-iframe');
+
+    // Monitor network requests for /_npm/ endpoint
+    const npmRequests: string[] = [];
+    page.on('request', (req) => {
+      if (req.url().includes('/_npm/')) {
+        npmRequests.push(req.url());
+      }
+    });
+
+    const npmResponses: { url: string; status: number }[] = [];
+    page.on('response', (res) => {
+      if (res.url().includes('/_npm/')) {
+        npmResponses.push({ url: res.url(), status: res.status() });
+      }
+    });
+
+    // Wait for the page to render in iframe — this triggers /_npm/@ai-sdk/react loading
+    // The chat UI uses useChat from @ai-sdk/react which is now served via /_npm/
+    await page.waitForTimeout(10000);
+
+    // Check that the iframe loaded something (not blank)
+    const iframeEl = page.locator('#preview-iframe');
+    await expect(iframeEl).toBeVisible();
+
+    // The chat form MUST be visible — proves React mounted with @ai-sdk/react
+    const chatForm = iframe.locator('form');
+    await expect(chatForm).toBeVisible({ timeout: 15000 });
+    console.log('[Test] Chat form is visible in iframe — /_npm/ bundling works!');
+
+    // Verify no npm bundle requests failed
+    const failedNpm = npmResponses.filter(r => r.status >= 400);
+    expect(failedNpm).toEqual([]);
+
+    // No page errors during rendering
+    const relevantErrors = pageErrors.filter(e =>
+      !e.includes('favicon') && !e.includes('robots.txt')
+    );
+    expect(relevantErrors).toEqual([]);
+  });
+
+  test('should send a message and get AI response', async ({ page }) => {
+    test.skip(!API_KEY, 'OPENAI_API_KEY not set');
+    test.setTimeout(90000);
+
+    await page.goto(`/examples/agent-workbench.html?corsProxy=${PROXY_URL}`);
+    await expect(page.locator('#logs')).toContainText('Workbench ready!', { timeout: 30000 });
+
+    // Start agent
+    await page.fill('#setupKeyInput', API_KEY);
+    await page.click('#setupKeyBtn');
+    await expect(page.locator('#logs')).toContainText('Agent ready', { timeout: 10000 });
+
+    // Wait for iframe chat UI to load
+    const iframe = page.frameLocator('#preview-iframe');
+    const chatInput = iframe.locator('input[type="text"], textarea').first();
+    await expect(chatInput).toBeVisible({ timeout: 30000 });
+
+    // Type a message
+    await chatInput.fill('say hello in one word');
+
+    // Submit the form
+    const submitBtn = iframe.locator('button[type="submit"], form button').first();
+    await submitBtn.click();
+
+    // Wait for response (either AI response or error from CORS)
+    await page.waitForTimeout(15000);
+
+    // User message must be visible
+    const userMessage = iframe.locator('text=say hello in one word');
+    await expect(userMessage).toBeVisible({ timeout: 5000 });
+
+    // Should have a real AI response, not an error
+    const pageText = await iframe.locator('body').innerText();
+    console.log('[Test] Chat text:', pageText.substring(0, 500));
+    expect(pageText).toContain('say hello in one word');
+    expect(pageText).not.toContain('Failed to fetch');
+    // AI should have responded with something beyond just the user message
+    expect(pageText.length).toBeGreaterThan(40);
+  });
+});
diff --git a/e2e/convex-app-demo.spec.ts b/e2e/convex-app-demo.spec.ts
index df6edbb..3f73f23 100644
--- a/e2e/convex-app-demo.spec.ts
+++ b/e2e/convex-app-demo.spec.ts
@@ -1,201 +1,142 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Convex App Demo', () => {
+  // Collect page errors — asserted at the end of critical tests
+  let pageErrors: string[] = [];
+
   test.beforeEach(async ({ page }) => {
-    // Listen to console messages for debugging
+    pageErrors = [];
     page.on('console', (msg) => {
       console.log(`[Browser ${msg.type()}]`, msg.text());
     });
-
-    // Listen to page errors
     page.on('pageerror', (error) => {
       console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
     });
   });
 
   test('should load the demo page', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-
-    // Check the title
-    await expect(page.locator('header h1')).toContainText('Convex App Demo');
-
-    // Check that buttons exist
+    await expect(page.locator('.demo-topbar .title')).toContainText('Convex App');
     await expect(page.locator('#refreshBtn')).toBeVisible();
-    await expect(page.locator('#openBtn')).toBeVisible();
+    await expect(page.locator('#setupOverlay')).toBeVisible();
+    await expect(page.locator('#setupKeyInput')).toBeVisible();
   });
 
-  test('should initialize and show Running status', async ({ page }) => {
+  test('should initialize and show Running status with expected logs', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Wait for initialization - should show "Running" when ready
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
-
-    // Buttons should be enabled when running
-    await expect(page.locator('#refreshBtn')).not.toBeDisabled();
-    await expect(page.locator('#openBtn')).not.toBeDisabled();
-  });
-
-  test('should show project files in console', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
-
-    // Check console output has key messages
+    // Verify key initialization messages appeared in order
     const logs = page.locator('#logs');
     await expect(logs).toContainText('Project files created');
-    await expect(logs).toContainText('Demo ready');
     await expect(logs).toContainText('/convex/schema.ts');
     await expect(logs).toContainText('/convex/todos.ts');
+    await expect(logs).toContainText('Convex package installed');
+    await expect(logs).toContainText('Service Worker ready');
+    await expect(logs).toContainText('Demo ready');
   });
 
-  test('should load iframe with preview', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
-
-    // Check that iframe is visible
-    const iframe = page.locator('#preview-iframe');
-    await expect(iframe).toBeVisible({ timeout: 10000 });
-
-    // Get iframe src
-    const iframeSrc = await iframe.getAttribute('src');
-    console.log('[Iframe src]', iframeSrc);
-    expect(iframeSrc).toContain('__virtual__/3002');
-  });
-
-  test('should render home page in iframe', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
-
-    // Wait for iframe to fully load
-    await page.waitForTimeout(5000);
-
-    const iframe = page.locator('#preview-iframe');
-    const iframeHandle = await iframe.elementHandle();
-    const frame = await iframeHandle?.contentFrame();
-
-    if (frame) {
-      // Wait for React to render - when Convex isn't connected, shows "Connect to Convex"
-      try {
-        await frame.waitForSelector('h2', { timeout: 15000 });
-        const h2Text = await frame.locator('h2').first().textContent();
-        console.log('[H2 content]', h2Text);
-        expect(h2Text).toContain('Connect to Convex');
-      } catch {
-        // Fallback - check that at least the page was served
-        const html = await frame.content();
-        console.log('[Fallback - HTML length]', html.length);
-        expect(html.length).toBeGreaterThan(100);
-      }
-    }
-  });
-
-  test('should fetch home page via fetch API', async ({ page }) => {
+  test('should bundle convex/react npm module without errors', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Fetch the virtual URL
+    // Directly fetch the npm module that caused the bug.
+    // If resolvePackageEntry fails on nested exports, this returns 500.
     const result = await page.evaluate(async () => {
-      try {
-        const response = await fetch('/__virtual__/3002/');
-        const text = await response.text();
-        return {
-          ok: response.ok,
-          status: response.status,
-          contentType: response.headers.get('content-type'),
-          textLength: text.length,
-          hasReact: text.includes('react'),
-          hasTailwind: text.includes('tailwind'),
-        };
-      } catch (error) {
-        return { error: error instanceof Error ? error.message : String(error) };
-      }
+      const res = await fetch('/__virtual__/3002/_npm/convex/react');
+      const text = await res.text();
+      return {
+        status: res.status,
+        contentType: res.headers.get('content-type'),
+        length: text.length,
+        startsWithExport: text.includes('export '),
+        hasError: text.includes('Failed to bundle'),
+      };
     });
 
-    console.log('[Fetch result]', result);
-
-    expect(result.ok).toBe(true);
+    console.log('[/_npm/convex/react]', { status: result.status, length: result.length });
     expect(result.status).toBe(200);
-    expect(result.textLength).toBeGreaterThan(100);
+    expect(result.contentType).toContain('javascript');
+    expect(result.hasError).toBe(false);
+    expect(result.startsWithExport).toBe(true);
+    expect(result.length).toBeGreaterThan(500); // real bundle, not an error message
   });
 
-  test('should serve tasks page', async ({ page }) => {
+  test('should bundle convex/server npm module without errors', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Fetch the tasks page
     const result = await page.evaluate(async () => {
-      const response = await fetch('/__virtual__/3002/tasks');
+      const res = await fetch('/__virtual__/3002/_npm/convex/server');
+      const text = await res.text();
       return {
-        status: response.status,
-        ok: response.ok,
-        contentType: response.headers.get('content-type'),
-        textLength: (await response.text()).length,
+        status: res.status,
+        contentType: res.headers.get('content-type'),
+        length: text.length,
+        hasError: text.includes('Failed to bundle'),
       };
     });
 
-    console.log('[Tasks page result]', result);
+    console.log('[/_npm/convex/server]', { status: result.status, length: result.length });
     expect(result.status).toBe(200);
-    expect(result.textLength).toBeGreaterThan(100);
+    expect(result.contentType).toContain('javascript');
+    expect(result.hasError).toBe(false);
+    expect(result.length).toBeGreaterThan(500);
   });
 
-  test('should serve about page', async ({ page }) => {
+  test('should render React app in iframe with "Connect to Convex" message', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Fetch the about page
-    const result = await page.evaluate(async () => {
-      const response = await fetch('/__virtual__/3002/about');
-      return {
-        status: response.status,
-        ok: response.ok,
-        contentType: response.headers.get('content-type'),
-        textLength: (await response.text()).length,
-      };
-    });
+    // Wait for iframe to appear
+    const iframe = page.locator('#preview-iframe');
+    await expect(iframe).toBeVisible({ timeout: 10000 });
 
-    console.log('[About page result]', result);
-    expect(result.status).toBe(200);
-    expect(result.textLength).toBeGreaterThan(100);
+    // Get iframe content frame
+    const iframeHandle = await iframe.elementHandle();
+    const frame = await iframeHandle?.contentFrame();
+    expect(frame).toBeTruthy();
+
+    // The React app should render. Without a Convex URL, it shows "Connect to Convex".
+    // This is the CRITICAL assertion — if JS imports fail (convex/react 500),
+    // React never mounts and this h2 never appears.
+    await frame!.waitForSelector('h2', { timeout: 20000 });
+    const h2Text = await frame!.locator('h2').first().textContent();
+    expect(h2Text).toContain('Connect to Convex');
+
+    // No page errors should have occurred during rendering
+    const relevantErrors = pageErrors.filter(e =>
+      !e.includes('favicon') && !e.includes('robots.txt')
+    );
+    expect(relevantErrors).toEqual([]);
   });
 
-  test('should call API health route', async ({ page }) => {
+  test('should serve home page HTML with React bootstrap', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Call API route
     const result = await page.evaluate(async () => {
-      const response = await fetch('/__virtual__/3002/api/health');
-      let data;
-      try {
-        data = await response.json();
-      } catch {
-        data = await response.text();
-      }
+      const res = await fetch('/__virtual__/3002/');
+      const text = await res.text();
       return {
-        status: response.status,
-        ok: response.ok,
-        contentType: response.headers.get('content-type'),
-        data,
+        status: res.status,
+        contentType: res.headers.get('content-type'),
+        length: text.length,
+        hasReact: text.includes('react'),
       };
     });
 
-    console.log('[API Health Result]', result);
-    // API routes should return JSON
-    if (result.ok) {
-      expect(result.contentType).toContain('json');
-    }
+    expect(result.status).toBe(200);
+    expect(result.contentType).toContain('text/html');
+    expect(result.hasReact).toBe(true);
+    expect(result.length).toBeGreaterThan(200);
   });
 
   test('Service Worker should be registered', async ({ page }) => {
     await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
 
-    // Check if SW is registered
     const swRegistered = await page.evaluate(async () => {
       if ('serviceWorker' in navigator) {
         const registrations = await navigator.serviceWorker.getRegistrations();
@@ -206,18 +147,4 @@ test.describe('Convex App Demo', () => {
 
     expect(swRegistered).toBe(true);
   });
-
-  test('refresh button should work', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 30000 });
-
-    // Wait for iframe to load
-    await page.waitForTimeout(2000);
-
-    // Click refresh button
-    await page.click('#refreshBtn');
-
-    // Check that "Refreshing" message appears in logs
-    await expect(page.locator('#logs')).toContainText('Refreshing preview');
-  });
 });
diff --git a/e2e/convex-deploy.spec.ts b/e2e/convex-deploy.spec.ts
index 9e3a614..41814d2 100644
--- a/e2e/convex-deploy.spec.ts
+++ b/e2e/convex-deploy.spec.ts
@@ -26,6 +26,13 @@ test.describe('Convex Deployment', () => {
 
     // Attach logs to test info for debugging
     (page as any).__consoleLogs = consoleLogs;
+
+    // Navigate and wait for init, then dismiss setup overlay so #deployBtn is clickable
+    await page.goto('/examples/demo-convex-app.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
+    await page.evaluate(() => {
+      document.getElementById('setupOverlay')?.classList.add('hidden');
+    });
   });
 
   test('should deploy schema and functions to Convex', async ({ page }) => {
@@ -36,11 +43,6 @@ test.describe('Convex Deployment', () => {
       return;
     }
 
-    // Go to the demo page
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
     console.log('✓ Demo initialized and running');
 
     // Check initial log messages
@@ -147,11 +149,6 @@ test.describe('Convex Deployment', () => {
   });
 
   test('should handle invalid deploy key', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
-
     // Enter an invalid key
     await page.fill('#convexKey', 'invalid-key');
     await page.click('#deployBtn');
@@ -165,11 +162,6 @@ test.describe('Convex Deployment', () => {
   });
 
   test('should show error for empty deploy key', async ({ page }) => {
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
-
     // Click deploy without entering key
     await page.click('#deployBtn');
 
@@ -186,11 +178,6 @@ test.describe('Convex Deployment', () => {
       return;
     }
 
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
-
     // First deployment
     await page.fill('#convexKey', deployKey);
     await page.click('#deployBtn');
@@ -235,10 +222,6 @@ test.describe('Convex Deployment', () => {
       return;
     }
 
-    await page.goto('/examples/demo-convex-app.html');
-
-    // Wait for initialization
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
     console.log('✓ Demo initialized');
 
     // 1. Initial deployment
@@ -337,141 +320,4 @@ test.describe('Convex Deployment', () => {
     console.log('\n=== Re-deployment File Changes Test Complete ===');
   });
 
-  test('deployment serves modified mutation via HTTP API', async ({ page, request }) => {
-    const deployKey = process.env.CONVEX_DEPLOY_KEY;
-
-    if (!deployKey) {
-      test.skip();
-      return;
-    }
-
-    // Parse deploy key to get deployment URL
-    const keyMatch = deployKey.match(/^(dev|prod):([^|]+)\|(.+)$/);
-    expect(keyMatch).toBeTruthy();
-    const deploymentName = keyMatch![2];
-    const convexApiBase = `https://${deploymentName}.convex.cloud`;
-
-    // 1. Navigate and wait for app to initialize
-    await page.goto('/examples/demo-convex-app.html');
-    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 60000 });
-    console.log('✓ Demo initialized');
-
-    // 2. Initial deployment (baseline)
-    await page.fill('#convexKey', deployKey);
-    await page.click('#deployBtn');
-    await expect(page.locator('#logs')).toContainText('[STATUS:COMPLETE]', { timeout: 120000 });
-    console.log('✓ Initial deployment complete');
-
-    // 3. Modify the create mutation to append " hello there" to titles
-    await page.evaluate(() => {
-      const vfs = (window as any).__vfs__;
-      const content = vfs.readFileSync('/convex/todos.ts', 'utf8');
-      const modified = content.replace(
-        'title: args.title,',
-        'title: args.title + " hello there",'
-      );
-      vfs.writeFileSync('/convex/todos.ts', modified);
-      console.log('Modified /convex/todos.ts: create mutation now appends " hello there"');
-    });
-    console.log('✓ Modified create mutation');
-
-    // 4. Re-deploy with the modification
-    await page.click('#deployBtn');
-    const logs = page.locator('#logs');
-    await expect(async () => {
-      const logsText = await logs.textContent();
-      const completeCount = (logsText?.match(/\[STATUS:COMPLETE\]/g) || []).length;
-      expect(completeCount).toBeGreaterThanOrEqual(2);
-    }).toPass({ timeout: 120000 });
-    console.log('✓ Re-deployment complete');
-
-    // Wait for functions to be live on the backend
-    await page.waitForTimeout(3000);
-
-    // 5. Call the Convex HTTP API to create a test todo
-    const testTitle = `e2e-test-${Date.now()}`;
-    console.log(`Creating todo with title: "${testTitle}"`);
-
-    const createResponse = await request.post(`${convexApiBase}/api/mutation`, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Convex ${deployKey}`,
-      },
-      data: {
-        path: 'todos:create',
-        args: { title: testTitle, priority: 'low' },
-        format: 'json',
-      },
-    });
-
-    console.log(`Create response status: ${createResponse.status()}`);
-    const createBody = await createResponse.text();
-    console.log(`Create response body: ${createBody}`);
-    expect(createResponse.ok()).toBe(true);
-
-    // 6. Query todos to find our todo and verify it has " hello there" appended
-    const listResponse = await request.post(`${convexApiBase}/api/query`, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Convex ${deployKey}`,
-      },
-      data: {
-        path: 'todos:list',
-        args: {},
-        format: 'json',
-      },
-    });
-
-    expect(listResponse.ok()).toBe(true);
-    const listResult = await listResponse.json();
-    console.log(`List response: ${JSON.stringify(listResult).substring(0, 500)}`);
-
-    // The response format is { status: "success", value: [...] }
-    const todos = listResult.value || listResult;
-    const ourTodo = (Array.isArray(todos) ? todos : []).find((t: any) =>
-      t.title && t.title.includes(testTitle)
-    );
-
-    expect(ourTodo).toBeTruthy();
-    expect(ourTodo.title).toBe(`${testTitle} hello there`);
-    console.log(`✓ Found todo with title: "${ourTodo.title}" — mutation modification is live!`);
-
-    // 7. Cleanup: remove the test todo
-    if (ourTodo?._id) {
-      const removeResponse = await request.post(`${convexApiBase}/api/mutation`, {
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Convex ${deployKey}`,
-        },
-        data: {
-          path: 'todos:remove',
-          args: { id: ourTodo._id },
-          format: 'json',
-        },
-      });
-      console.log(`Cleanup remove status: ${removeResponse.status()}`);
-    }
-
-    // 8. Restore the original todos.ts
-    await page.evaluate(() => {
-      const vfs = (window as any).__vfs__;
-      const content = vfs.readFileSync('/convex/todos.ts', 'utf8');
-      const restored = content.replace(
-        'title: args.title + " hello there",',
-        'title: args.title,'
-      );
-      vfs.writeFileSync('/convex/todos.ts', restored);
-    });
-
-    // 9. Re-deploy to restore original state
-    await page.click('#deployBtn');
-    await expect(async () => {
-      const logsText = await logs.textContent();
-      const completeCount = (logsText?.match(/\[STATUS:COMPLETE\]/g) || []).length;
-      expect(completeCount).toBeGreaterThanOrEqual(3);
-    }).toPass({ timeout: 120000 });
-    console.log('✓ Restored original mutation and re-deployed');
-
-    console.log('\n=== Deployment HTTP API Verification Test Complete ===');
-  });
 });
diff --git a/e2e/cors-proxy-server.mjs b/e2e/cors-proxy-server.mjs
new file mode 100644
index 0000000..ab2039a
--- /dev/null
+++ b/e2e/cors-proxy-server.mjs
@@ -0,0 +1,100 @@
+/**
+ * Simple CORS proxy for E2E tests.
+ * Forwards requests to the target URL and adds CORS headers.
+ *
+ * Usage: node e2e/cors-proxy-server.mjs
+ * Listens on port 8787 by default.
+ *
+ * Proxy URL format: http://localhost:8787/?https%3A%2F%2Fapi.openai.com%2F...
+ */
+
+import { createServer } from 'node:http';
+
+const PORT = parseInt(process.env.CORS_PROXY_PORT || '8787', 10);
+
+const server = createServer(async (req, res) => {
+  // CORS preflight
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200, {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': '*',
+      'Access-Control-Max-Age': '86400',
+    });
+    res.end();
+    return;
+  }
+
+  // Extract target URL from query string
+  const targetUrl = decodeURIComponent(req.url.slice(2)); // skip /?
+  if (!targetUrl || !targetUrl.startsWith('http')) {
+    res.writeHead(400, { 'Content-Type': 'text/plain' });
+    res.end('Bad Request: provide target URL as query parameter');
+    return;
+  }
+
+  try {
+    // Read request body
+    const chunks = [];
+    for await (const chunk of req) {
+      chunks.push(chunk);
+    }
+    const body = chunks.length > 0 ? Buffer.concat(chunks) : undefined;
+
+    // Forward headers (exclude host and origin)
+    const headers = {};
+    for (const [key, value] of Object.entries(req.headers)) {
+      if (['host', 'origin', 'referer', 'connection'].includes(key)) continue;
+      headers[key] = value;
+    }
+
+    // Forward request to target
+    const response = await fetch(targetUrl, {
+      method: req.method,
+      headers,
+      body,
+    });
+
+    // Build response headers with CORS
+    const responseHeaders = {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': '*',
+      'Access-Control-Expose-Headers': '*',
+    };
+
+    // Copy relevant response headers
+    for (const [key, value] of response.headers.entries()) {
+      if (['content-encoding', 'transfer-encoding', 'connection'].includes(key)) continue;
+      responseHeaders[key] = value;
+    }
+
+    // Stream response back
+    res.writeHead(response.status, responseHeaders);
+
+    if (response.body) {
+      const reader = response.body.getReader();
+      const pump = async () => {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          res.write(value);
+        }
+        res.end();
+      };
+      pump().catch(() => res.end());
+    } else {
+      res.end();
+    }
+  } catch (err) {
+    res.writeHead(502, {
+      'Content-Type': 'text/plain',
+      'Access-Control-Allow-Origin': '*',
+    });
+    res.end(`Proxy error: ${err.message}`);
+  }
+});
+
+server.listen(PORT, () => {
+  console.log(`CORS proxy listening on http://localhost:${PORT}`);
+});
diff --git a/e2e/express-demo.spec.ts b/e2e/express-demo.spec.ts
new file mode 100644
index 0000000..10afe38
--- /dev/null
+++ b/e2e/express-demo.spec.ts
@@ -0,0 +1,119 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Express Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    page.on('console', (msg) => {
+      console.log(`[Browser ${msg.type()}]`, msg.text());
+    });
+    page.on('pageerror', (error) => {
+      console.error('[Page Error]', error.message);
+    });
+  });
+
+  test('should load the demo page', async ({ page }) => {
+    await page.goto('/examples/express-demo.html');
+
+    // Check the title in topbar
+    await expect(page.locator('.demo-topbar .title')).toContainText('Express');
+
+    // Check that Run Server button exists
+    await expect(page.locator('#runBtn')).toBeVisible();
+
+    // Check editor has Express code
+    const editor = page.locator('#editor');
+    const content = await editor.inputValue();
+    expect(content).toContain("require('express')");
+    expect(content).toContain('app.listen');
+  });
+
+  test('should install express and start server', async ({ page }) => {
+    await page.goto('/examples/express-demo.html');
+
+    // Click Run Server
+    await page.click('#runBtn');
+
+    // Wait for server to be ready (includes express install)
+    await expect(page.locator('#status')).toContainText('Running', { timeout: 60000 });
+
+    // Terminal should show success
+    const terminal = page.locator('#terminal');
+    await expect(terminal).toContainText('Express server running on port 3000', { timeout: 60000 });
+  });
+
+  test('should load HTML page in preview iframe', async ({ page }) => {
+    await page.goto('/examples/express-demo.html');
+
+    // Start server
+    await page.click('#runBtn');
+    await expect(page.locator('#status')).toContainText('Running', { timeout: 60000 });
+
+    // Wait for preview to load
+    await page.waitForTimeout(2000);
+
+    // Check iframe loaded Express content
+    const iframe = page.locator('#preview');
+    const iframeHandle = await iframe.elementHandle();
+    const frame = await iframeHandle?.contentFrame();
+    expect(frame).toBeTruthy();
+
+    const html = await frame!.content();
+    console.log('[Iframe HTML length]', html.length);
+    expect(html).toContain('Express');
+    expect(html.length).toBeGreaterThan(100);
+  });
+
+  test('should navigate to API route via link click', async ({ page }) => {
+    await page.goto('/examples/express-demo.html');
+
+    // Start server
+    await page.click('#runBtn');
+    await expect(page.locator('#status')).toContainText('Running', { timeout: 60000 });
+
+    // Wait for preview to load
+    await page.waitForTimeout(2000);
+
+    // Terminal should log the GET / request
+    const terminal = page.locator('#terminal');
+    await expect(terminal).toContainText('GET /', { timeout: 5000 });
+
+    // Access iframe — must succeed
+    const iframe = page.locator('#preview');
+    const iframeHandle = await iframe.elementHandle();
+    const frame = await iframeHandle?.contentFrame();
+    expect(frame).toBeTruthy();
+
+    // The /api/users link must exist
+    const usersLink = frame!.locator('a[href="/api/users"]');
+    await expect(usersLink).toBeVisible({ timeout: 5000 });
+    await usersLink.click();
+
+    // Wait for navigation
+    await expect(terminal).toContainText('Navigating to /api/users', { timeout: 5000 });
+    await page.waitForTimeout(2000);
+
+    // The preview should now show JSON with users
+    const updatedHandle = await page.locator('#preview').elementHandle();
+    const updatedFrame = await updatedHandle?.contentFrame();
+    expect(updatedFrame).toBeTruthy();
+
+    const html = await updatedFrame!.content();
+    expect(html).toContain('Alice');
+    expect(html).toContain('Bob');
+  });
+
+  test('should handle re-running the server', async ({ page }) => {
+    await page.goto('/examples/express-demo.html');
+
+    // First run
+    await page.click('#runBtn');
+    await expect(page.locator('#status')).toContainText('Running', { timeout: 60000 });
+
+    // Run again (should reset and restart)
+    await page.click('#runBtn');
+    await expect(page.locator('#status')).toContainText('Running', { timeout: 60000 });
+
+    // Terminal should show the server is running
+    const terminal = page.locator('#terminal');
+    await expect(terminal).toContainText('Express server running on port 3000');
+  });
+});
diff --git a/e2e/next-demo.spec.ts b/e2e/next-demo.spec.ts
index c523cad..cbf47af 100644
--- a/e2e/next-demo.spec.ts
+++ b/e2e/next-demo.spec.ts
@@ -1,23 +1,24 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Next.js Demo with Service Worker', () => {
+  let pageErrors: string[] = [];
+
   test.beforeEach(async ({ page }) => {
-    // Listen to console messages for debugging
+    pageErrors = [];
     page.on('console', (msg) => {
       console.log(`[Browser ${msg.type()}]`, msg.text());
     });
-
-    // Listen to page errors
     page.on('pageerror', (error) => {
       console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
     });
   });
 
   test('should load the demo page', async ({ page }) => {
     await page.goto('/examples/next-demo.html');
 
-    // Check the title
-    await expect(page.locator('h1')).toContainText('Next.js');
+    // Check the title in topbar
+    await expect(page.locator('.demo-topbar .title')).toContainText('Next.js');
 
     // Check that buttons exist
     await expect(page.locator('#save-btn')).toBeVisible();
@@ -75,15 +76,13 @@ test.describe('Next.js Demo with Service Worker', () => {
     const iframeHandle = await iframe.elementHandle();
     const frame = await iframeHandle?.contentFrame();
 
-    if (frame) {
-      const html = await frame.content();
-      console.log('[Iframe HTML length]', html.length);
+    expect(frame).toBeTruthy();
 
-      // Check for __next container
-      const hasNext = await frame.locator('#__next').count();
-      console.log('[Iframe has #__next]', hasNext);
-      expect(hasNext).toBeGreaterThan(0);
-    }
+    // Check for __next container — proves React rendered
+    await frame!.waitForSelector('#__next', { timeout: 10000 });
+    const hasNext = await frame!.locator('#__next').count();
+    console.log('[Iframe has #__next]', hasNext);
+    expect(hasNext).toBeGreaterThan(0);
   });
 
   test('should show console output', async ({ page }) => {
@@ -94,7 +93,7 @@ test.describe('Next.js Demo with Service Worker', () => {
 
     // Check console output has initialization messages
     const output = page.locator('#output');
-    await expect(output).toContainText('Demo ready');
+    await expect(output).toContainText('Click Start Preview to launch');
   });
 
   test('should load editor with file content', async ({ page }) => {
@@ -145,21 +144,13 @@ test.describe('Next.js Demo with Service Worker', () => {
     const iframeHandle = await iframe.elementHandle();
     const frame = await iframeHandle?.contentFrame();
 
-    if (frame) {
-      // Wait for React to render (with longer timeout and error handling)
-      try {
-        await frame.waitForSelector('h1', { timeout: 15000 });
-        const h1Text = await frame.locator('h1').first().textContent();
-        console.log('[Initial H1]', h1Text);
-        // The h1 should exist if React rendered
-        expect(h1Text).toBeTruthy();
-      } catch {
-        // If React didn't render in time, check that at least the page was served
-        const html = await frame.content();
-        console.log('[Fallback - checking HTML was served]', html.length > 0);
-        expect(html.length).toBeGreaterThan(100);
-      }
-    }
+    expect(frame).toBeTruthy();
+
+    // Wait for React to render — no fallback, must succeed
+    await frame!.waitForSelector('h1', { timeout: 15000 });
+    const h1Text = await frame!.locator('h1').first().textContent();
+    console.log('[Initial H1]', h1Text);
+    expect(h1Text).toBeTruthy();
   });
 
   test('should handle client-side navigation WITHOUT full reload', async ({ page }) => {
@@ -267,10 +258,8 @@ test.describe('Next.js Demo with Service Worker', () => {
     });
 
     console.log('[API Result]', result);
-    // API routes should at least return a JSON response (200 or 500)
+    expect(result.status).toBe(200);
     expect(result.contentType).toContain('json');
-    // The simplified API handler implementation may return different statuses
-    expect([200, 500]).toContain(result.status);
   });
 
   test('should serve static files from public directory', async ({ page }) => {
@@ -398,8 +387,7 @@ test.describe('Next.js Demo with Service Worker', () => {
 
     if (!content.includes(originalText)) {
       console.log('[Content snippet]', content.substring(0, 500));
-      // Skip if text not found - file structure may differ
-      return;
+      throw new Error(`Expected editor to contain "${originalText}" but it was not found`);
     }
 
     const newContent = content.replace(originalText, newText);
diff --git a/e2e/next-features.spec.ts b/e2e/next-features.spec.ts
index c7be7a3..538a525 100644
--- a/e2e/next-features.spec.ts
+++ b/e2e/next-features.spec.ts
@@ -12,7 +12,10 @@ import { test, expect } from '@playwright/test';
 const VIRTUAL_PREFIX = '/__virtual__/3002';
 
 test.describe('Next.js New Features E2E', () => {
+  let pageErrors: string[] = [];
+
   test.beforeEach(async ({ page }) => {
+    pageErrors = [];
     page.on('console', (msg) => {
       if (msg.type() === 'error') {
         console.log(`[Browser ERROR]`, msg.text());
@@ -21,6 +24,7 @@ test.describe('Next.js New Features E2E', () => {
 
     page.on('pageerror', (error) => {
       console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
     });
 
     // Navigate to test harness
@@ -369,19 +373,11 @@ test.describe('Next.js New Features E2E', () => {
       const iframe = page.locator('#preview-frame');
       const iframeHandle = await iframe.elementHandle();
       const frame = await iframeHandle?.contentFrame();
+      expect(frame).toBeTruthy();
 
-      if (frame) {
-        try {
-          await frame.waitForSelector('#__next', { timeout: 15000 });
-          const hasNext = await frame.locator('#__next').count();
-          console.log('[Iframe has #__next]', hasNext);
-          expect(hasNext).toBeGreaterThan(0);
-        } catch {
-          const html = await frame.content();
-          console.log('[Iframe fallback - HTML length]', html.length);
-          expect(html.length).toBeGreaterThan(100);
-        }
-      }
+      await frame!.waitForSelector('#__next', { timeout: 15000 });
+      const hasNext = await frame!.locator('#__next').count();
+      expect(hasNext).toBeGreaterThan(0);
     });
 
     test('should render home page heading in iframe', async ({ page }) => {
@@ -390,19 +386,12 @@ test.describe('Next.js New Features E2E', () => {
       const iframe = page.locator('#preview-frame');
       const iframeHandle = await iframe.elementHandle();
       const frame = await iframeHandle?.contentFrame();
+      expect(frame).toBeTruthy();
 
-      if (frame) {
-        try {
-          await frame.waitForSelector('#home-heading', { timeout: 15000 });
-          const headingText = await frame.locator('#home-heading').textContent();
-          console.log('[Home heading]', headingText);
-          expect(headingText).toContain('Features Test Home');
-        } catch {
-          const html = await frame.content();
-          console.log('[Fallback - checking HTML served]', html.length);
-          expect(html.length).toBeGreaterThan(100);
-        }
-      }
+      await frame!.waitForSelector('#home-heading', { timeout: 15000 });
+      const headingText = await frame!.locator('#home-heading').textContent();
+      console.log('[Home heading]', headingText);
+      expect(headingText).toContain('Features Test Home');
     });
 
     test('should render CSS module page with scoped classes in iframe', async ({ page }) => {
@@ -417,31 +406,23 @@ test.describe('Next.js New Features E2E', () => {
       const iframe = page.locator('#preview-frame');
       const iframeHandle = await iframe.elementHandle();
       const frame = await iframeHandle?.contentFrame();
-
-      if (frame) {
-        try {
-          await frame.waitForSelector('#css-title', { timeout: 15000 });
-          const title = await frame.locator('#css-title').textContent();
-          console.log('[CSS Module iframe title]', title);
-          expect(title).toContain('CSS Modules Test');
-
-          // Check that the className has scoped class name
-          const className = await frame.locator('#css-title').getAttribute('class');
-          console.log('[CSS Module className]', className);
-          expect(className).toMatch(/title_[a-z0-9]+/);
-
-          // Check that the styles object is rendered
-          const classesJson = await frame.locator('#css-classes').textContent();
-          console.log('[CSS Module classes JSON]', classesJson);
-          expect(classesJson).toContain('title');
-          expect(classesJson).toContain('card');
-        } catch (e) {
-          console.log('[CSS Module iframe error]', e);
-          const html = await frame.content();
-          console.log('[CSS Module iframe HTML length]', html.length);
-          expect(html.length).toBeGreaterThan(100);
-        }
-      }
+      expect(frame).toBeTruthy();
+
+      await frame!.waitForSelector('#css-title', { timeout: 15000 });
+      const title = await frame!.locator('#css-title').textContent();
+      console.log('[CSS Module iframe title]', title);
+      expect(title).toContain('CSS Modules Test');
+
+      // Check that the className has scoped class name
+      const className = await frame!.locator('#css-title').getAttribute('class');
+      console.log('[CSS Module className]', className);
+      expect(className).toMatch(/title_[a-z0-9]+/);
+
+      // Check that the styles object is rendered
+      const classesJson = await frame!.locator('#css-classes').textContent();
+      console.log('[CSS Module classes JSON]', classesJson);
+      expect(classesJson).toContain('title');
+      expect(classesJson).toContain('card');
     });
 
     test('should render route group page in iframe', async ({ page }) => {
@@ -456,21 +437,12 @@ test.describe('Next.js New Features E2E', () => {
       const iframe = page.locator('#preview-frame');
       const iframeHandle = await iframe.elementHandle();
       const frame = await iframeHandle?.contentFrame();
+      expect(frame).toBeTruthy();
 
-      if (frame) {
-        try {
-          await frame.waitForSelector('#about-heading', { timeout: 15000 });
-          const heading = await frame.locator('#about-heading').textContent();
-          console.log('[Route Group iframe heading]', heading);
-          expect(heading).toContain('About Page');
-        } catch (e) {
-          console.log('[Route Group iframe error]', e);
-          const html = await frame.content();
-          console.log('[Route Group iframe HTML length]', html.length);
-          // At minimum, HTML should be served
-          expect(html.length).toBeGreaterThan(100);
-        }
-      }
+      await frame!.waitForSelector('#about-heading', { timeout: 15000 });
+      const heading = await frame!.locator('#about-heading').textContent();
+      console.log('[Route Group iframe heading]', heading);
+      expect(heading).toContain('About Page');
     });
   });
 });
diff --git a/e2e/vercel-ai-sdk-demo.spec.ts b/e2e/vercel-ai-sdk-demo.spec.ts
new file mode 100644
index 0000000..5a825a4
--- /dev/null
+++ b/e2e/vercel-ai-sdk-demo.spec.ts
@@ -0,0 +1,155 @@
+import { test, expect } from '@playwright/test';
+
+const API_KEY = process.env.OPENAI_API_KEY || '';
+const PROXY_URL = encodeURIComponent('http://localhost:8787/?');
+
+test.describe('Vercel AI SDK Demo', () => {
+  let pageErrors: string[] = [];
+
+  test.beforeEach(async ({ page }) => {
+    pageErrors = [];
+    page.on('console', (msg) => {
+      console.log(`[Browser ${msg.type()}]`, msg.text());
+    });
+    page.on('pageerror', (error) => {
+      console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
+    });
+  });
+
+  test('should load the demo page', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('.demo-topbar .title')).toContainText('Vercel AI SDK');
+    await expect(page.locator('#setupOverlay')).toBeVisible();
+    await expect(page.locator('#setupKeyInput')).toBeVisible();
+    await expect(page.locator('#setupKeyBtn')).toBeVisible();
+  });
+
+  test('should initialize dev server and show Running status', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    const logs = page.locator('#logs');
+    await expect(logs).toContainText('All packages installed');
+    await expect(logs).toContainText('Service Worker ready');
+    await expect(logs).toContainText('Demo ready');
+  });
+
+  test('should bundle @ai-sdk/react npm module without errors', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    // Directly fetch the bundled npm module. If resolution/bundling fails, returns 500.
+    const result = await page.evaluate(async () => {
+      const res = await fetch('/__virtual__/3003/_npm/@ai-sdk/react');
+      const text = await res.text();
+      return {
+        status: res.status,
+        contentType: res.headers.get('content-type'),
+        length: text.length,
+        hasExport: text.includes('export '),
+        hasError: text.includes('Failed to bundle'),
+      };
+    });
+
+    console.log('[/_npm/@ai-sdk/react]', { status: result.status, length: result.length });
+    expect(result.status).toBe(200);
+    expect(result.contentType).toContain('javascript');
+    expect(result.hasError).toBe(false);
+    expect(result.hasExport).toBe(true);
+    expect(result.length).toBeGreaterThan(500);
+  });
+
+  test('should bundle ai npm module without errors', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    const result = await page.evaluate(async () => {
+      const res = await fetch('/__virtual__/3003/_npm/ai');
+      const text = await res.text();
+      return {
+        status: res.status,
+        contentType: res.headers.get('content-type'),
+        length: text.length,
+        hasError: text.includes('Failed to bundle'),
+      };
+    });
+
+    console.log('[/_npm/ai]', { status: result.status, length: result.length });
+    expect(result.status).toBe(200);
+    expect(result.contentType).toContain('javascript');
+    expect(result.hasError).toBe(false);
+    expect(result.length).toBeGreaterThan(500);
+  });
+
+  test('should render chat interface in iframe', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    // Enter API key and connect
+    await page.fill('#setupKeyInput', API_KEY || 'sk-fake-key-for-testing');
+    await page.click('#setupKeyBtn');
+    await expect(page.locator('#setupOverlay')).toHaveClass(/hidden/, { timeout: 5000 });
+
+    // Wait for iframe
+    const iframe = page.locator('#previewContainer iframe');
+    await expect(iframe).toBeVisible({ timeout: 10000 });
+
+    // Get iframe content — React must render the chat UI
+    const iframeHandle = await iframe.elementHandle();
+    const frame = await iframeHandle?.contentFrame();
+    expect(frame).toBeTruthy();
+
+    // The chat page shows "Start a conversation" when empty.
+    // This proves React mounted AND @ai-sdk/react loaded (useChat hook didn't crash).
+    await frame!.waitForSelector('input[type="text"]', { timeout: 20000 });
+    const bodyText = await frame!.locator('body').innerText();
+    expect(bodyText).toContain('Start a conversation');
+
+    // No page errors from failed imports or runtime crashes
+    const relevantErrors = pageErrors.filter(e =>
+      !e.includes('favicon') && !e.includes('robots.txt')
+    );
+    expect(relevantErrors).toEqual([]);
+  });
+
+  test('should enable Connect button when API key is entered', async ({ page }) => {
+    await page.goto('/examples/demo-vercel-ai-sdk.html');
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    await expect(page.locator('#setupKeyBtn')).toBeDisabled();
+    await page.fill('#setupKeyInput', 'sk-test-fake-key');
+    await expect(page.locator('#setupKeyBtn')).not.toBeDisabled();
+  });
+
+  test('should send message and get AI response', async ({ page }) => {
+    test.skip(!API_KEY, 'OPENAI_API_KEY not set — skipping live chat test');
+    test.setTimeout(90000);
+
+    await page.goto(`/examples/demo-vercel-ai-sdk.html?corsProxy=${PROXY_URL}`);
+    await expect(page.locator('#statusText')).toContainText('Running', { timeout: 120000 });
+
+    // Connect with real API key
+    await page.fill('#setupKeyInput', API_KEY);
+    await page.click('#setupKeyBtn');
+    await expect(page.locator('#setupOverlay')).toHaveClass(/hidden/, { timeout: 5000 });
+
+    // Wait for chat UI in iframe
+    const iframe = page.frameLocator('#previewContainer iframe');
+    const chatInput = iframe.locator('input[type="text"]').first();
+    await expect(chatInput).toBeVisible({ timeout: 30000 });
+
+    // Send a message
+    await chatInput.fill('say hello in one word');
+    const submitBtn = iframe.locator('button[type="submit"]').first();
+    await submitBtn.click();
+
+    // Wait for AI response
+    await page.waitForTimeout(15000);
+
+    const chatText = await iframe.locator('body').innerText();
+    console.log('[Test] Chat text:', chatText.substring(0, 500));
+    expect(chatText).toContain('say hello in one word');
+    expect(chatText.length).toBeGreaterThan(50);
+  });
+});
diff --git a/e2e/vite-demo.spec.ts b/e2e/vite-demo.spec.ts
index 887365f..12a5c51 100644
--- a/e2e/vite-demo.spec.ts
+++ b/e2e/vite-demo.spec.ts
@@ -1,23 +1,24 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Vite Demo with Service Worker', () => {
+  let pageErrors: string[] = [];
+
   test.beforeEach(async ({ page }) => {
-    // Listen to console messages for debugging
+    pageErrors = [];
     page.on('console', (msg) => {
       console.log(`[Browser ${msg.type()}]`, msg.text());
     });
-
-    // Listen to page errors
     page.on('pageerror', (error) => {
       console.error('[Page Error]', error.message);
+      pageErrors.push(error.message);
     });
   });
 
   test('should load the demo page', async ({ page }) => {
     await page.goto('/examples/vite-demo.html');
 
-    // Check the title
-    await expect(page.locator('h1')).toContainText('Vite Demo');
+    // Check the title in topbar
+    await expect(page.locator('.demo-topbar .title')).toContainText('Vite');
 
     // Check that buttons exist
     await expect(page.locator('#save-btn')).toBeVisible();
@@ -97,29 +98,14 @@ test.describe('Vite Demo with Service Worker', () => {
     const iframeHandle = await iframe.elementHandle();
     const frame = await iframeHandle?.contentFrame();
 
-    if (frame) {
-      // Get full HTML first for debugging
-      const html = await frame.content();
-      console.log('[Iframe HTML length]', html.length);
-      console.log('[Iframe HTML snippet]', html.substring(0, 500));
-
-      // Check for #root
-      const hasRoot = await frame.locator('#root').count();
-      console.log('[Iframe has #root]', hasRoot);
-
-      if (hasRoot > 0) {
-        const rootContent = await frame.locator('#root').innerHTML();
-        console.log('[Iframe #root content]', rootContent.substring(0, 300));
-        expect(rootContent.length).toBeGreaterThanOrEqual(0);
-      } else {
-        // If no root, check what's in body
-        const bodyContent = await frame.locator('body').innerHTML();
-        console.log('[Iframe body content]', bodyContent.substring(0, 500));
-        throw new Error('No #root element found in iframe');
-      }
-    } else {
-      throw new Error('Could not access iframe content');
-    }
+    expect(frame).toBeTruthy();
+
+    // Must have #root — proves Vite HTML was served correctly
+    await frame!.waitForSelector('#root', { timeout: 10000 });
+    const rootContent = await frame!.locator('#root').innerHTML();
+    console.log('[Iframe #root content length]', rootContent.length);
+    // React should have rendered something into #root
+    expect(rootContent.length).toBeGreaterThan(0);
   });
 
   test('should show console output', async ({ page }) => {
@@ -187,51 +173,6 @@ test.describe('Vite Demo with Service Worker', () => {
     expect(swRegistered).toBe(true);
   });
 
-  test('SW debug mode should show what SW receives', async ({ page }) => {
-    page.on('console', (msg) => console.log(`[Console ${msg.type()}]`, msg.text()));
-
-    // Go to demo and start the server to register SW
-    await page.goto('/examples/vite-demo.html');
-    await expect(page.locator('#status-text')).toContainText('Ready', { timeout: 10000 });
-    await page.click('#run-btn');
-    await expect(page.locator('#status-text')).toContainText('Dev server running', { timeout: 30000 });
-
-    // Now test the SW with debug mode
-    const result = await page.evaluate(async () => {
-      const response = await fetch('/__virtual__/3000/?__sw_debug__');
-      const text = await response.text();
-      return {
-        status: response.status,
-        text: text,
-      };
-    });
-
-    console.log('[SW Debug Result]', result.text);
-    expect(result.status).toBe(200);
-  });
-
-  test('SW test mode should return hardcoded response', async ({ page }) => {
-    // Go to demo and start the server to register SW
-    await page.goto('/examples/vite-demo.html');
-    await expect(page.locator('#status-text')).toContainText('Ready', { timeout: 10000 });
-    await page.click('#run-btn');
-    await expect(page.locator('#status-text')).toContainText('Dev server running', { timeout: 30000 });
-
-    // Now test the SW with test mode
-    const result = await page.evaluate(async () => {
-      const response = await fetch('/__virtual__/3000/?__sw_test__');
-      const text = await response.text();
-      return {
-        status: response.status,
-        text: text,
-      };
-    });
-
-    console.log('[SW Test Result]', result);
-    expect(result.status).toBe(200);
-    expect(result.text).toContain('SW Test OK');
-  });
-
   test('should not have esbuild initialization errors in iframe', async ({ page }) => {
     const errors: string[] = [];
     const iframeErrors: string[] = [];
@@ -289,37 +230,22 @@ test.describe('Vite Demo with Service Worker', () => {
     const iframeHandle = await iframe.elementHandle();
     const frame = await iframeHandle?.contentFrame();
 
-    if (frame) {
-      // Get the iframe HTML
-      const html = await frame.content();
-      console.log('[Iframe HTML length]', html.length);
-      console.log('[Iframe HTML snippet]', html.substring(0, 500));
+    expect(frame).toBeTruthy();
 
-      // Check if there are any script errors visible in the iframe
-      const bodyText = await frame.locator('body').innerText().catch(() => '');
-      console.log('[Iframe body text]', bodyText.substring(0, 500));
+    // Verify React rendered into #root
+    await frame!.waitForSelector('#root', { timeout: 10000 });
+    const rootContent = await frame!.locator('#root').innerHTML();
+    expect(rootContent.length).toBeGreaterThan(0);
 
-      // Check for #root
-      const hasRoot = await frame.locator('#root').count();
-      console.log('[Iframe has #root]', hasRoot);
-
-      // Check if React app rendered
-      const rootContent = await frame.locator('#root').innerHTML().catch(() => '');
-      console.log('[Iframe #root content length]', rootContent.length);
-      console.log('[Iframe #root content]', rootContent.substring(0, 300));
-    }
+    // No esbuild initialization errors
+    const esbuildErrors = errors.filter(e => e.includes('Cannot call') && e.includes('initialize'));
+    expect(esbuildErrors).toEqual([]);
 
-    // Log all errors for debugging
-    console.log('[All main page errors]', errors);
-
-    // Check for esbuild initialization error
-    const hasEsbuildError = errors.some(e => e.includes('Cannot call') && e.includes('initialize'));
-
-    if (hasEsbuildError) {
-      console.log('[ERROR] Found esbuild initialization error!');
-    }
-
-    expect(hasEsbuildError).toBe(false);
+    // No other page errors (excluding expected ones)
+    const unexpectedErrors = errors.filter(e =>
+      !e.includes('favicon') && !e.includes('robots.txt')
+    );
+    expect(unexpectedErrors).toEqual([]);
   });
 
   test('should fetch virtual URL via fetch API', async ({ page }) => {
@@ -329,66 +255,42 @@ test.describe('Vite Demo with Service Worker', () => {
     await page.click('#run-btn');
     await expect(page.locator('#status-text')).toContainText('Dev server running', { timeout: 30000 });
 
-    // Now try to fetch the virtual URL directly from the page
+    // Fetch the virtual URL and verify it's a real Vite HTML page
     const result = await page.evaluate(async () => {
-      try {
-        const response = await fetch('/__virtual__/3000/');
-        const text = await response.text();
-        return {
-          ok: response.ok,
-          status: response.status,
-          contentType: response.headers.get('content-type'),
-          textLength: text.length,
-          textSnippet: text.substring(0, 500),
-        };
-      } catch (error) {
-        return { error: error instanceof Error ? error.message : String(error) };
-      }
+      const response = await fetch('/__virtual__/3000/');
+      const text = await response.text();
+      return {
+        ok: response.ok,
+        status: response.status,
+        contentType: response.headers.get('content-type'),
+        length: text.length,
+        hasRoot: text.includes('id="root"'),
+        hasScript: text.includes('<script'),
+      };
     });
 
-    console.log('[Fetch result]', JSON.stringify(result, null, 2));
-
+    console.log('[Fetch result]', { status: result.status, length: result.length });
     expect(result.ok).toBe(true);
     expect(result.status).toBe(200);
-    expect(result.textLength).toBeGreaterThan(100);
+    expect(result.contentType).toContain('text/html');
+    expect(result.hasRoot).toBe(true);
+    expect(result.hasScript).toBe(true);
   });
 
-  test('should access virtual URL directly', async ({ page }) => {
-    // First, go to demo and start the server
+  test('should access virtual URL directly in new tab', async ({ page }) => {
     await page.goto('/examples/vite-demo.html');
     await expect(page.locator('#status-text')).toContainText('Ready', { timeout: 10000 });
     await page.click('#run-btn');
     await expect(page.locator('#status-text')).toContainText('Dev server running', { timeout: 30000 });
 
-    // Now try to access the virtual URL directly in a new page
+    // Open virtual URL directly in a new page
     const newPage = await page.context().newPage();
-
-    // Listen to console for debugging
-    newPage.on('console', (msg) => {
-      console.log(`[Virtual Page ${msg.type()}]`, msg.text());
-    });
-
-    newPage.on('pageerror', (error) => {
-      console.error('[Virtual Page Error]', error.message);
-    });
-
     await newPage.goto('http://localhost:5173/__virtual__/3000/');
-
-    // Wait for the page to load
     await newPage.waitForTimeout(3000);
 
-    // Check the title
-    const title = await newPage.title();
-    console.log('[Virtual Page Title]', title);
-
-    // Check for React root
+    // Must have React #root
     const hasRoot = await newPage.locator('#root').count();
-    console.log('[Has #root]', hasRoot);
-
-    // Get the page content
-    const html = await newPage.content();
-    console.log('[Page HTML length]', html.length);
-    console.log('[Page HTML snippet]', html.substring(0, 500));
+    expect(hasRoot).toBeGreaterThan(0);
 
     await newPage.close();
   });
diff --git a/examples/agent-workbench.html b/examples/agent-workbench.html
new file mode 100644
index 0000000..2adbcda
--- /dev/null
+++ b/examples/agent-workbench.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent Workbench — almostnode</title>
+    <link rel="stylesheet" href="./shared-styles.css" />
+    <style>
+      .layout {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 44px);
+      }
+
+      /* ── Loading state ── */
+      .loading-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        font-family: var(--mono);
+        font-size: 0.72rem;
+        color: var(--text-dim);
+      }
+      .spinner {
+        width: 32px;
+        height: 32px;
+        border: 2px solid var(--border);
+        border-top-color: var(--accent);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 12px;
+      }
+      @keyframes spin { to { transform: rotate(360deg); } }
+
+      /* ── Console (bottom) ── */
+      .console-panel {
+        border-top: 1px solid var(--border);
+        height: 120px;
+        display: flex;
+        flex-direction: column;
+        background: var(--surface);
+      }
+      .console-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 6px 16px;
+        border-bottom: 1px solid var(--border);
+        background: rgba(0,0,0,0.2);
+      }
+
+      /* ── Setup overlay ── */
+      .setup-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.85);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+      }
+      .setup-overlay.hidden { display: none; }
+      .setup-dialog {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        padding: 32px;
+        max-width: 440px;
+        width: 90%;
+      }
+      .setup-dialog h2 {
+        font-family: var(--mono);
+        font-size: 0.9rem;
+        color: var(--text-bright);
+        margin-bottom: 8px;
+      }
+      .setup-dialog p {
+        font-size: 0.8rem;
+        color: var(--text-dim);
+        line-height: 1.6;
+        margin-bottom: 16px;
+      }
+      .setup-dialog .privacy-note {
+        font-family: var(--mono);
+        font-size: 0.65rem;
+        color: var(--accent-dim);
+        background: var(--accent-bg);
+        border: 1px solid var(--accent-border);
+        padding: 8px 12px;
+        margin-bottom: 16px;
+        line-height: 1.5;
+      }
+      .setup-dialog input {
+        width: 100%;
+        padding: 10px 12px;
+        font-family: var(--mono);
+        font-size: 0.78rem;
+        border: 1px solid var(--border);
+        background: var(--black);
+        color: var(--text);
+        margin-bottom: 12px;
+        outline: none;
+      }
+      .setup-dialog input:focus { border-color: var(--accent-border); }
+      .setup-dialog input::placeholder { color: var(--text-dim); }
+      .setup-dialog button {
+        width: 100%;
+        padding: 10px;
+        font-family: var(--mono);
+        font-size: 0.78rem;
+        font-weight: 600;
+        background: var(--accent);
+        color: var(--black);
+        border: none;
+        cursor: pointer;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .setup-dialog button:hover { background: #00ffaa; }
+      .setup-dialog button:disabled { opacity: 0.4; cursor: not-allowed; }
+    </style>
+  </head>
+  <body>
+    <div class="demo-topbar">
+      <a href="../index.html" class="back">&larr; demos</a>
+      <span class="sep">/</span>
+      <a href="../index.html" class="logo">almostnode</a>
+      <span class="sep">/</span>
+      <span class="title">Agent Workbench</span>
+      <span class="tag">next.js &middot; ai sdk &middot; streamText &middot; tool-calling</span>
+    </div>
+
+    <div class="layout">
+      <!-- App iframe (the entire chat + preview runs inside virtual Next.js) -->
+      <div id="previewContainer" style="flex:1;display:flex;flex-direction:column;">
+        <div class="loading-content">
+          <div class="spinner"></div>
+          <p>Starting dev server...</p>
+        </div>
+      </div>
+
+      <!-- Console -->
+      <div class="console-panel">
+        <div class="console-header">
+          <span class="panel-label">Console</span>
+        </div>
+        <div class="terminal" id="logs"></div>
+      </div>
+    </div>
+
+    <!-- Setup Overlay -->
+    <div class="setup-overlay" id="setupOverlay">
+      <div class="setup-dialog">
+        <h2>OpenAI API Key Required</h2>
+        <p>This demo uses an AI coding agent powered by OpenAI. Enter your API key to get started.</p>
+        <div class="privacy-note">Your key stays in your browser and is sent directly to OpenAI via a CORS proxy. It is never stored or sent to our servers.</div>
+        <input type="password" id="setupKeyInput" placeholder="sk-..." autofocus />
+        <button id="setupKeyBtn" disabled>Start Agent</button>
+      </div>
+    </div>
+
+    <script type="module" src="/src/agent-workbench-entry.ts"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index df71060..8e0aac0 100644
--- a/index.html
+++ b/index.html
@@ -1374,6 +1374,12 @@ <h3>Vercel AI SDK</h3>
           <span class="demo-tag">next.js · ai sdk · openai</span>
         </a>
 
+        <a class="demo-card" href="./examples/agent-workbench.html">
+          <h3>Agent Workbench</h3>
+          <p>AI coding agent that builds Next.js pages live — with file editing, bash, and HMR preview.</p>
+          <span class="demo-tag">ai agent · tool-calling · next.js</span>
+        </a>
+
       </div>
     </div>
 
diff --git a/package-lock.json b/package-lock.json
index 0e0ae43..9612856 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
   "name": "almostnode",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "almostnode",
-      "version": "0.2.11",
+      "version": "0.2.13",
       "license": "MIT",
       "dependencies": {
+        "@ai-sdk/openai": "^3.0.28",
+        "@ai-sdk/react": "^3.0.87",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
+        "ai": "^6.0.85",
         "brotli": "^1.3.3",
         "brotli-wasm": "^3.0.1",
         "comlink": "^4.4.2",
@@ -21,15 +24,18 @@
         "pako": "^2.1.0",
         "resolve.exports": "^2.0.3",
         "vite-plugin-top-level-await": "^1.6.0",
-        "vite-plugin-wasm": "^3.5.0"
+        "vite-plugin-wasm": "^3.5.0",
+        "zod": "^4.3.6"
       },
       "devDependencies": {
         "@playwright/test": "^1.58.0",
         "@types/css-tree": "^2.3.11",
         "@types/node": "^25.0.10",
         "@types/pako": "^2.0.4",
+        "dotenv": "^17.3.1",
         "esbuild": "^0.27.2",
         "jsdom": "^27.4.0",
+        "react-dom": "^19.2.4",
         "typescript": "^5.9.3",
         "vite": "^5.4.0",
         "vitest": "^4.0.18"
@@ -45,6 +51,86 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@ai-sdk/gateway": {
+      "version": "3.0.45",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-3.0.45.tgz",
+      "integrity": "sha512-ZB6kHV+D8mLCRnkpWotLCV/rZK4NiODxx4Kv7JdT9QmQknbG/scbE4iyoT4JLFdULA8Y/IVbMvyE0Nwq3Dceqw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.8",
+        "@ai-sdk/provider-utils": "4.0.15",
+        "@vercel/oidc": "3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/openai": {
+      "version": "3.0.28",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-3.0.28.tgz",
+      "integrity": "sha512-m2Dm6fwUzMksqnPrd5f/WZ4cZ9GTZHpzsVO6jxKQwwc84gFHzAFZmUCG0C5mV7XlPOw4mwaiYV3HfLiEfphvvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.8",
+        "@ai-sdk/provider-utils": "4.0.15"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-3.0.8.tgz",
+      "integrity": "sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-4.0.15.tgz",
+      "integrity": "sha512-8XiKWbemmCbvNN0CLR9u3PQiet4gtEVIrX4zzLxnCj06AwsEDJwJVBbKrEI4t6qE8XRSIvU2irka0dcpziKW6w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.8",
+        "@standard-schema/spec": "^1.1.0",
+        "eventsource-parser": "^3.0.6"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/react": {
+      "version": "3.0.87",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-3.0.87.tgz",
+      "integrity": "sha512-qa4Ywm08g27Voys1xuF2WeX3s8shd4hLJCCxi/Ws6cUZsWpMnFW2rtEfCcKRlWyJ4NRypauiNmcvQKz4v6u0/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "4.0.15",
+        "ai": "6.0.85",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ~19.0.1 || ~19.1.2 || ^19.2.1"
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.1.tgz",
@@ -730,6 +816,15 @@
         "node": ">= 20.19.0"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.58.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.0.tgz",
@@ -1092,7 +1187,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@swc/core": {
@@ -1385,6 +1479,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vercel/oidc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.1.0.tgz",
+      "integrity": "sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "4.0.18",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
@@ -1515,6 +1618,24 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ai": {
+      "version": "6.0.85",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-6.0.85.tgz",
+      "integrity": "sha512-2bP7M+OcNQGSIH8I3jdujUadxj4tAwuHBvLhpmDSlcjRXXry3zNGEajjjRraOjObHMO/Yqa37PJWhPVHIHt2TQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/gateway": "3.0.45",
+        "@ai-sdk/provider": "3.0.8",
+        "@ai-sdk/provider-utils": "4.0.15",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
     "node_modules/amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -1765,6 +1886,15 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1783,6 +1913,19 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -1864,6 +2007,15 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/expand-template": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
@@ -2092,6 +2244,12 @@
         }
       }
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/just-bash": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/just-bash/-/just-bash-2.7.0.tgz",
@@ -2509,6 +2667,29 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -2619,6 +2800,13 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -2776,6 +2964,19 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/swr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.4.0.tgz",
+      "integrity": "sha512-sUlC20T8EOt1pHmDiqueUWMmRRX03W7w5YxovWX7VR2KHEPCTMly85x05vpkP5i6Bu4h44ePSMD9Tc+G2MItFw==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -2811,6 +3012,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/throttleit": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -2973,6 +3186,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3783,6 +4005,15 @@
       "funding": {
         "url": "https://github.com/sponsors/eemeli"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index eb129a7..1909caf 100644
--- a/package.json
+++ b/package.json
@@ -85,10 +85,13 @@
     "prepublishOnly": "npm run test:run && npm run build:publish"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^3.0.28",
+    "@ai-sdk/react": "^3.0.87",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "acorn": "^8.15.0",
     "acorn-jsx": "^5.3.2",
+    "ai": "^6.0.85",
     "brotli": "^1.3.3",
     "brotli-wasm": "^3.0.1",
     "comlink": "^4.4.2",
@@ -97,15 +100,18 @@
     "pako": "^2.1.0",
     "resolve.exports": "^2.0.3",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0"
+    "vite-plugin-wasm": "^3.5.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.0",
     "@types/css-tree": "^2.3.11",
     "@types/node": "^25.0.10",
     "@types/pako": "^2.0.4",
+    "dotenv": "^17.3.1",
     "esbuild": "^0.27.2",
     "jsdom": "^27.4.0",
+    "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vite": "^5.4.0",
     "vitest": "^4.0.18"
diff --git a/playwright.config.ts b/playwright.config.ts
index 0133430..2a9b521 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
@@ -10,12 +11,20 @@ export default defineConfig({
     screenshot: 'only-on-failure',
     trace: 'on-first-retry',
   },
-  webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:5173/examples/vite-demo.html',
-    reuseExistingServer: !process.env.CI,
-    timeout: 30000,
-  },
+  webServer: [
+    {
+      command: 'npm run dev',
+      url: 'http://localhost:5173/examples/vite-demo.html',
+      reuseExistingServer: !process.env.CI,
+      timeout: 30000,
+    },
+    {
+      command: 'node e2e/cors-proxy-server.mjs',
+      url: 'http://localhost:8787',
+      reuseExistingServer: !process.env.CI,
+      timeout: 10000,
+    },
+  ],
   projects: [
     {
       name: 'chromium',
diff --git a/src/agent-workbench-entry.ts b/src/agent-workbench-entry.ts
new file mode 100644
index 0000000..41a5162
--- /dev/null
+++ b/src/agent-workbench-entry.ts
@@ -0,0 +1,199 @@
+/**
+ * Agent Workbench Entry Point
+ *
+ * Architecture:
+ * - The entire app (chat UI + preview) runs inside almostnode's virtual Next.js
+ * - Chat page (/app/page.tsx) uses useChat from @ai-sdk/react (loaded from esm.sh)
+ * - API route (/pages/api/chat.ts) uses streamText with tool-calling
+ * - AI SDK packages (ai, @ai-sdk/openai, zod) are installed via PackageManager
+ * - Tools operate on VFS directly (read, write, replace, list, bash)
+ */
+
+import { VirtualFS } from './virtual-fs';
+import { NextDevServer } from './frameworks/next-dev-server';
+import { getServerBridge } from './server-bridge';
+import { createAgentWorkbenchProject } from './agent-workbench-project';
+import { initChildProcess, exec as cpExec } from './shims/child_process';
+import { PackageManager } from './npm/index';
+
+// ── Constants ──
+
+const CORS_PROXY = new URLSearchParams(window.location.search).get('corsProxy') || 'https://corsproxy.io/?';
+const PORT = 3004;
+
+// ── Logging (outside React) ──
+
+const logsEl = document.getElementById('logs') as HTMLDivElement;
+
+function log(message: string, type: 'info' | 'error' | 'warn' | 'success' = 'info') {
+  const line = document.createElement('div');
+  const time = new Date().toLocaleTimeString();
+  line.textContent = `[${time}] ${message}`;
+  line.className = type;
+  logsEl.appendChild(line);
+  logsEl.scrollTop = logsEl.scrollHeight;
+}
+
+// ── Create __project__ module (VFS operations for the API route) ──
+
+function createProjectModule(vfs: VirtualFS) {
+  return {
+    readFile: (path: string) => vfs.readFileSync(path, 'utf8') as string,
+    writeFile: (path: string, content: string) => vfs.writeFileSync(path, content),
+    existsSync: (path: string) => vfs.existsSync(path),
+    listFiles: (dir: string) => vfs.readdirSync(dir),
+    statSync: (path: string) => vfs.statSync(path),
+    mkdirSync: (dir: string, opts?: { recursive?: boolean }) => vfs.mkdirSync(dir, opts),
+    runCommand: (command: string): Promise<string> => {
+      return new Promise<string>((resolve) => {
+        const timeout = setTimeout(() => {
+          resolve('Error: Command timed out (10s)');
+        }, 10000);
+        cpExec(command, { cwd: '/' }, (error, stdout, stderr) => {
+          clearTimeout(timeout);
+          if (error) {
+            resolve(stderr ? `Error: ${stderr}` : `Error: ${error.message}`);
+          } else {
+            const output = (stdout || '') + (stderr ? `\n[stderr] ${stderr}` : '');
+            resolve(output || '(no output)');
+          }
+        });
+      });
+    },
+    log: (msg: string) => log(msg, 'success'),
+  };
+}
+
+// ── Bootstrap ──
+
+async function main() {
+  try {
+    log('Creating virtual file system...');
+    const vfs = new VirtualFS();
+
+    log('Setting up starter project...');
+    createAgentWorkbenchProject(vfs);
+    initChildProcess(vfs);
+    log('Project files created', 'success');
+
+    // Install AI SDK packages via PackageManager
+    log('Installing npm packages...');
+    const pm = new PackageManager(vfs, { cwd: '/' });
+
+    // Install zod v4 (provides both zod/v3 and zod/v4 sub-paths needed by
+    // @ai-sdk/provider-utils). The AI SDK server-side code runs in VFS so it
+    // uses the real npm-installed zod, not esm.sh.
+    // @ai-sdk/react is installed locally and served via /_npm/ (not esm.sh)
+    // to avoid esm.sh resolution bugs with zod/v4 sub-path exports.
+    const packages = ['zod', 'ai@5', '@ai-sdk/openai@2', '@ai-sdk/react@2'];
+    for (const pkg of packages) {
+      log(`Installing ${pkg}...`);
+      await pm.install(pkg, {
+        onProgress: (msg) => log(msg),
+        transform: true,
+      });
+    }
+    log('All packages installed', 'success');
+
+    log('Starting Next.js dev server...');
+
+    const projectModule = createProjectModule(vfs);
+
+    const apiModules: Record<string, unknown> = {
+      '__project__': projectModule,
+    };
+
+    const devServer = new NextDevServer(vfs, {
+      port: PORT,
+      root: '/',
+      preferAppRouter: true,
+      apiModules,
+      corsProxy: CORS_PROXY,
+    });
+
+    const bridge = getServerBridge();
+
+    try {
+      log('Initializing Service Worker...');
+      await bridge.initServiceWorker();
+      log('Service Worker ready', 'success');
+    } catch (error) {
+      log(`Service Worker warning: ${error}`, 'warn');
+    }
+
+    bridge.registerServer(devServer as any, PORT);
+    devServer.start();
+
+    const serverUrl = bridge.getServerUrl(PORT) + '/';
+    log(`Server running at: ${serverUrl}`, 'success');
+
+    // Create preview iframe
+    const previewContainer = document.getElementById('previewContainer') as HTMLDivElement;
+    previewContainer.innerHTML = '';
+    const iframe = document.createElement('iframe');
+    iframe.src = serverUrl;
+    iframe.id = 'preview-iframe';
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframe.style.border = 'none';
+    iframe.setAttribute(
+      'sandbox',
+      'allow-forms allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-modals'
+    );
+
+    iframe.onload = () => {
+      if (iframe?.contentWindow && devServer) {
+        devServer.setHMRTarget(iframe.contentWindow);
+      }
+    };
+
+    previewContainer.appendChild(iframe);
+
+    // Setup overlay handlers
+    const setupOverlay = document.getElementById('setupOverlay') as HTMLDivElement;
+    const setupKeyInput = document.getElementById('setupKeyInput') as HTMLInputElement;
+    const setupKeyBtn = document.getElementById('setupKeyBtn') as HTMLButtonElement;
+
+    setupKeyInput.oninput = () => {
+      setupKeyBtn.disabled = !setupKeyInput.value.trim();
+    };
+
+    const startAgent = (key: string) => {
+      const sanitizedKey = key.trim().replace(/[^\x00-\x7F]/g, '');
+      if (!sanitizedKey) {
+        log('Please enter an API key', 'error');
+        return;
+      }
+      if (!sanitizedKey.startsWith('sk-')) {
+        log('Warning: OpenAI keys typically start with "sk-"', 'warn');
+      }
+
+      // Pass API key to the virtual environment via env vars.
+      // The API route reads process.env.OPENAI_API_KEY and configures the
+      // CORS proxy itself — no need to inject pre-configured modules.
+      devServer.setEnv('OPENAI_API_KEY', sanitizedKey);
+
+      setupOverlay.classList.add('hidden');
+      log('Agent ready — enter a message in the chat', 'success');
+    };
+
+    setupKeyBtn.onclick = () => {
+      startAgent(setupKeyInput.value);
+    };
+
+    setupKeyInput.onkeydown = (e) => {
+      if (e.key === 'Enter' && setupKeyInput.value.trim()) {
+        startAgent(setupKeyInput.value);
+      }
+    };
+
+    log('Workbench ready!', 'success');
+    log('Enter your OpenAI API key to start.');
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    log(`Error: ${errorMessage}`, 'error');
+    console.error(error);
+  }
+}
+
+main();
diff --git a/src/agent-workbench-project.ts b/src/agent-workbench-project.ts
new file mode 100644
index 0000000..867e599
--- /dev/null
+++ b/src/agent-workbench-project.ts
@@ -0,0 +1,455 @@
+/**
+ * Agent Workbench - Virtual Project Seed
+ *
+ * Creates a Next.js project in VFS with:
+ * - Chat UI using useChat from @ai-sdk/react (App Router client page, loaded from esm.sh)
+ * - API route using streamText + Pages Router streaming (server, proven pattern)
+ * - Tools: read_file, write_file, replace_in_file, list_files, run_bash
+ */
+
+import { VirtualFS } from './virtual-fs';
+
+const PACKAGE_JSON = {
+  name: 'agent-workbench-app',
+  version: '0.1.0',
+  private: true,
+  scripts: {
+    dev: 'next dev',
+    build: 'next build',
+    start: 'next start',
+  },
+  dependencies: {
+    next: '^14.0.0',
+    react: '^18.2.0',
+    'react-dom': '^18.2.0',
+    ai: '^6.0.0',
+    '@ai-sdk/react': '^3.0.0',
+  },
+};
+
+// ── API Route (/pages/api/chat.ts) — Pages Router for proven streaming ──
+
+const API_ROUTE = `import { streamText, tool, stepCountIs, convertToModelMessages } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
+import { z } from 'zod';
+import { readFile, writeFile, existsSync, listFiles, statSync, mkdirSync, runCommand, log } from '__project__';
+
+var CORS_PROXY = process.env.CORS_PROXY_URL || 'https://corsproxy.io/?';
+
+var openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY || '',
+  fetch: function(url, init) {
+    var proxiedUrl = CORS_PROXY + encodeURIComponent(String(url));
+    return globalThis.fetch(proxiedUrl, init);
+  },
+});
+
+var SYSTEM_PROMPT = 'You are a frontend developer agent. You help users build and modify a Next.js App Router application running in the browser.\\n\\nAvailable tools:\\n- read_file: Read file contents at a given path\\n- write_file: Create or overwrite a file (parent directories are created automatically)\\n- replace_in_file: Make a targeted text replacement in a file (first occurrence)\\n- list_files: List files and directories at a path\\n- run_bash: Run a shell command (e.g. ls, cat, echo, node scripts)\\n\\nThe project uses Next.js App Router. Current structure:\\n- /app/layout.tsx — Root layout\\n- /app/page.tsx — Root page (the chat UI, but you can replace it)\\n- /public/ — Static assets\\n- /package.json — Project config\\n\\nGuidelines:\\n- You can modify ANY file in the project, including the root page (/app/page.tsx) and layout\\n- The only protected file is /pages/api/chat.ts (the agent API route)\\n- Create new pages under /app/ (e.g. /app/about/page.tsx, /app/dashboard/page.tsx)\\n- After creating a page, tell the user to type the path (e.g. /about) in the preview URL bar and click Go\\n- Use inline styles for styling\\n- Write clean, modern React (JSX/TSX) code\\n- Keep responses concise — explain what you did briefly';
+
+function validatePath(path, isWrite) {
+  if (!path.startsWith('/')) return 'Path must be absolute (start with /)';
+  if (path.includes('..')) return 'Path must not contain ..';
+  if (path.startsWith('/node_modules')) return 'Cannot access /node_modules';
+  if (isWrite && path === '/pages/api/chat.ts') return 'Cannot modify the agent API route';
+  return null;
+}
+
+var agentTools = {
+  read_file: tool({
+    description: 'Read the contents of a file at the given path',
+    inputSchema: z.object({
+      path: z.string().describe('Absolute path to the file (e.g. /app/page.tsx)'),
+    }),
+    execute: async function(args) {
+      var err = validatePath(args.path, false);
+      if (err) return 'Error: ' + err;
+      if (!existsSync(args.path)) return 'Error: File not found: ' + args.path;
+      return readFile(args.path);
+    },
+  }),
+
+  write_file: tool({
+    description: 'Write content to a file. Creates the file if it does not exist, or overwrites it. Parent directories are created automatically.',
+    inputSchema: z.object({
+      path: z.string().describe('Absolute path to the file'),
+      content: z.string().describe('Full file content to write'),
+    }),
+    execute: async function(args) {
+      var err = validatePath(args.path, true);
+      if (err) return 'Error: ' + err;
+      if (args.content.length > 50000) return 'Error: File content too large (max 50KB)';
+      var dir = args.path.substring(0, args.path.lastIndexOf('/'));
+      if (dir && !existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+      writeFile(args.path, args.content);
+      log('File written: ' + args.path + ' (' + args.content.length + ' chars)');
+      return 'File written successfully';
+    },
+  }),
+
+  replace_in_file: tool({
+    description: 'Replace the first occurrence of old_text with new_text in a file. Use this for targeted edits instead of rewriting the whole file.',
+    inputSchema: z.object({
+      path: z.string().describe('Absolute path to the file'),
+      old_text: z.string().describe('Exact text to find in the file'),
+      new_text: z.string().describe('Replacement text'),
+    }),
+    execute: async function(args) {
+      var err = validatePath(args.path, true);
+      if (err) return 'Error: ' + err;
+      if (!existsSync(args.path)) return 'Error: File not found: ' + args.path;
+      var fileContent = readFile(args.path);
+      if (!fileContent.includes(args.old_text)) return 'Error: old_text not found in file';
+      var newContent = fileContent.replace(args.old_text, args.new_text);
+      writeFile(args.path, newContent);
+      log('File edited: ' + args.path);
+      return 'Replacement made successfully';
+    },
+  }),
+
+  list_files: tool({
+    description: 'List files and directories at the given path. Directories end with /',
+    inputSchema: z.object({
+      path: z.string().describe('Directory path to list (e.g. / or /app)'),
+    }),
+    execute: async function(args) {
+      var err = validatePath(args.path, false);
+      if (err) return 'Error: ' + err;
+      if (!existsSync(args.path)) return 'Error: Directory not found: ' + args.path;
+      var entries = listFiles(args.path);
+      var result = entries.map(function(entry) {
+        var fullPath = args.path.endsWith('/') ? args.path + entry : args.path + '/' + entry;
+        try {
+          var stat = statSync(fullPath);
+          return stat.isDirectory() ? entry + '/' : entry;
+        } catch (e) {
+          return entry;
+        }
+      });
+      return result.join('\\n') || '(empty directory)';
+    },
+  }),
+
+  run_bash: tool({
+    description: 'Run a shell command in the virtual environment. Supports basic commands like ls, cat, echo, mkdir, cp, mv, node. Output is captured and returned.',
+    inputSchema: z.object({
+      command: z.string().describe('The shell command to run (e.g. "ls -la /app")'),
+    }),
+    execute: async function(args) {
+      if (!args.command) return 'Error: No command provided';
+      log('Bash: ' + args.command);
+      var result = await runCommand(args.command);
+      return result;
+    },
+  }),
+};
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    var uiMessages = req.body.messages;
+    if (!uiMessages || !Array.isArray(uiMessages)) {
+      return res.status(400).json({ error: 'Invalid messages format' });
+    }
+
+    var messages = await convertToModelMessages(uiMessages);
+
+    var result = streamText({
+      model: openai('gpt-4.1'),
+      system: SYSTEM_PROMPT,
+      messages: messages,
+      tools: agentTools,
+      stopWhen: stepCountIs(15),
+      onStepFinish: function(step) {
+        if (step.toolCalls && step.toolCalls.length > 0) {
+          log(step.toolCalls.map(function(tc) { return tc.toolName; }).join(', ') + ' (' + (step.usage.totalTokens || 0) + ' tokens)');
+        }
+      },
+      onError: function(info) {
+        log('Stream error: ' + info.error);
+      },
+    });
+
+    return result.toUIMessageStreamResponse();
+  } catch (error) {
+    log('API error: ' + (error && error.message ? error.message : String(error)));
+    if (!res.headersSent) {
+      res.status(500).json({ error: error && error.message ? error.message : 'Internal server error' });
+    }
+  }
+}
+`;
+
+// ── Page (/app/page.tsx) — Chat UI with embedded preview ──
+// This runs entirely inside the virtual Next.js via esm.sh imports.
+
+const PAGE = `'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useChat } from '@ai-sdk/react';
+
+function formatToolArgs(toolName, args) {
+  if (!args) return '';
+  if (toolName === 'write_file') return args.path + ' (' + (args.content || '').length + ' chars)';
+  if (toolName === 'run_bash') return args.command || '';
+  if (toolName === 'replace_in_file') return args.path || '';
+  return args.path || JSON.stringify(args).slice(0, 120);
+}
+
+export default function AgentWorkbench() {
+  var loc = typeof window !== 'undefined' ? window.location : null;
+  var basePath = loc
+    ? (loc.pathname.endsWith('/') ? loc.pathname.slice(0, -1) : loc.pathname)
+    : '';
+
+  var [input, setInput] = useState('');
+  var [pathInput, setPathInput] = useState('/welcome');
+  var [previewSrc, setPreviewSrc] = useState(basePath + '/welcome');
+  var bottomRef = useRef(null);
+  var iframeRef = useRef(null);
+
+  var { messages, sendMessage, status, error } = useChat({
+    api: basePath + '/api/chat',
+  });
+
+  var isLoading = status === 'submitted' || status === 'streaming';
+
+  useEffect(function() {
+    if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Relay HMR messages from parent window to preview iframe
+  useEffect(function() {
+    function onMessage(event) {
+      if (event.data && event.data.channel === 'next-hmr' && iframeRef.current && iframeRef.current.contentWindow) {
+        try { iframeRef.current.contentWindow.postMessage(event.data, '*'); } catch(e) {}
+      }
+    }
+    window.addEventListener('message', onMessage);
+    return function() { window.removeEventListener('message', onMessage); };
+  }, []);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    sendMessage({ text: input });
+    setInput('');
+  }
+
+  function navigatePreview(path) {
+    if (!path) return;
+    var p = path.startsWith('/') ? path : '/' + path;
+    setPathInput(p);
+    setPreviewSrc(basePath + p);
+  }
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', fontFamily: 'system-ui, -apple-system, sans-serif', background: '#0a0a0a', color: '#e0e0e0' }}>
+      {/* Chat panel */}
+      <div style={{ width: 420, minWidth: 320, display: 'flex', flexDirection: 'column', borderRight: '1px solid #1e1e1e' }}>
+        {/* Header */}
+        <div style={{ padding: '10px 16px', borderBottom: '1px solid #1e1e1e', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <span style={{ fontSize: 11, fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Agent Chat</span>
+          <span style={{ fontSize: 10, color: '#444' }}>gpt-4.1</span>
+        </div>
+
+        {/* Messages */}
+        <div style={{ flex: 1, overflowY: 'auto', padding: 12, scrollbarWidth: 'thin' }}>
+          {messages.length === 0 && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', textAlign: 'center', padding: 24, color: '#666' }}>
+              <p style={{ fontSize: 14, color: '#aaa', marginBottom: 6, fontWeight: 500 }}>What do you want to build?</p>
+              <p style={{ fontSize: 12, lineHeight: 1.7, maxWidth: 280 }}>I can create pages, components, and layouts. The preview updates live via HMR.</p>
+            </div>
+          )}
+
+          {messages.map(function(m) {
+            return (
+              <div key={m.id} style={{ marginBottom: 10 }}>
+                {m.role === 'user' ? (
+                  <div style={{ background: 'rgba(0,255,136,0.05)', border: '1px solid rgba(0,255,136,0.12)', padding: '8px 12px', fontSize: 13, color: '#00ff88', lineHeight: 1.5, marginLeft: 32 }}>
+                    {m.parts && m.parts.filter(function(p) { return p.type === 'text'; }).map(function(p, i) {
+                      return <span key={i}>{p.text}</span>;
+                    })}
+                  </div>
+                ) : (
+                  <div>
+                    {m.parts && m.parts.map(function(part, i) {
+                      if (part.type === 'text' && part.text) {
+                        return (
+                          <div key={i} style={{ padding: '8px 12px', background: '#111', border: '1px solid #1e1e1e', marginBottom: 4, whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 13, lineHeight: 1.6 }}>
+                            {part.text}
+                          </div>
+                        );
+                      }
+                      var toolMatch = part.type && part.type.match(/^tool-(.+)$/);
+                      if (toolMatch) {
+                        var toolName = toolMatch[1];
+                        var done = part.state === 'result';
+                        return (
+                          <div key={i} style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, margin: '4px 0', padding: '6px 10px', background: '#111', border: '1px solid #1e1e1e', borderLeft: '3px solid ' + (done ? '#00ff88' : '#333') }}>
+                            <div style={{ fontWeight: 600, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.04em', color: '#00aa66', marginBottom: 2 }}>{toolName}</div>
+                            <div style={{ color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{formatToolArgs(toolName, part.args)}</div>
+                            {done && <div style={{ color: '#444', marginTop: 3, maxHeight: 48, overflow: 'hidden', whiteSpace: 'pre-wrap', wordBreak: 'break-all', fontSize: 10 }}>{String(part.result).slice(0, 200)}</div>}
+                          </div>
+                        );
+                      }
+                      return null;
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+
+          {isLoading && messages.length > 0 && (
+            <div style={{ fontSize: 12, color: '#666', fontStyle: 'italic', padding: '8px 12px' }}>Thinking...</div>
+          )}
+
+          {error && (
+            <div style={{ fontSize: 12, color: '#ff6b6b', padding: '8px 12px', background: 'rgba(255,107,107,0.05)', border: '1px solid rgba(255,107,107,0.12)' }}>{error.message}</div>
+          )}
+
+          <div ref={bottomRef} />
+        </div>
+
+        {/* Input */}
+        <form onSubmit={handleSubmit} style={{ padding: '10px 12px', borderTop: '1px solid #1e1e1e', background: '#0d0d0d', display: 'flex', gap: 6 }}>
+          <input
+            type="text"
+            value={input}
+            onChange={function(e) { setInput(e.target.value); }}
+            placeholder="Ask the agent to build something..."
+            disabled={isLoading}
+            style={{ flex: 1, padding: '9px 12px', background: '#151515', border: '1px solid #2a2a2a', color: '#e5e5e5', fontSize: 13, outline: 'none', fontFamily: 'inherit' }}
+          />
+          <button
+            type="submit"
+            disabled={isLoading || !input.trim()}
+            style={{ padding: '9px 16px', background: (isLoading || !input.trim()) ? '#333' : '#00ff88', color: '#000', border: 'none', fontWeight: 600, fontSize: 12, cursor: (isLoading || !input.trim()) ? 'default' : 'pointer' }}
+          >Send</button>
+        </form>
+      </div>
+
+      {/* Preview panel */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#111' }}>
+        {/* Preview URL bar */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderBottom: '1px solid #1e1e1e', background: '#0d0d0d' }}>
+          <span style={{ fontSize: 10, color: '#555', fontFamily: 'ui-monospace, monospace', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', flexShrink: 0 }}>Preview</span>
+          <input
+            type="text"
+            value={pathInput}
+            onChange={function(e) { setPathInput(e.target.value); }}
+            onKeyDown={function(e) { if (e.key === 'Enter') navigatePreview(pathInput); }}
+            placeholder="/about"
+            style={{ flex: 1, padding: '5px 10px', background: '#151515', border: '1px solid #2a2a2a', color: '#e5e5e5', fontSize: 12, fontFamily: 'ui-monospace, monospace', outline: 'none' }}
+          />
+          <button
+            onClick={function() { navigatePreview(pathInput); }}
+            style={{ padding: '5px 12px', background: '#1e1e1e', color: '#999', border: 'none', fontSize: 11, cursor: 'pointer', fontFamily: 'ui-monospace, monospace' }}
+          >Go</button>
+          <button
+            onClick={function() { if (iframeRef.current) iframeRef.current.src = iframeRef.current.src; }}
+            style={{ padding: '5px 8px', background: '#1e1e1e', color: '#999', border: 'none', fontSize: 13, cursor: 'pointer' }}
+          >\\u21bb</button>
+        </div>
+
+        {/* Preview content */}
+        <div style={{ flex: 1 }}>
+          <iframe
+            ref={iframeRef}
+            src={previewSrc}
+            style={{ width: '100%', height: '100%', border: 'none', background: '#fff' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+
+export function createAgentWorkbenchProject(vfs: VirtualFS): void {
+  vfs.writeFileSync('/package.json', JSON.stringify(PACKAGE_JSON, null, 2));
+
+  vfs.mkdirSync('/app', { recursive: true });
+  vfs.mkdirSync('/pages/api', { recursive: true });
+  vfs.mkdirSync('/public', { recursive: true });
+
+  vfs.writeFileSync(
+    '/tsconfig.json',
+    JSON.stringify(
+      {
+        compilerOptions: {
+          target: 'es5',
+          lib: ['dom', 'dom.iterable', 'esnext'],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: true,
+          noEmit: true,
+          esModuleInterop: true,
+          module: 'esnext',
+          moduleResolution: 'bundler',
+          resolveJsonModule: true,
+          isolatedModules: true,
+          jsx: 'preserve',
+          paths: { '@/*': ['./*'] },
+        },
+        include: ['**/*.ts', '**/*.tsx'],
+        exclude: ['node_modules'],
+      },
+      null,
+      2
+    )
+  );
+
+  vfs.writeFileSync(
+    '/app/layout.tsx',
+    `import React from 'react';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <style>{\`html, body, #__next { margin: 0; padding: 0; height: 100%; } *, *::before, *::after { box-sizing: border-box; }\`}</style>
+      <div style={{
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        minHeight: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+        {children}
+      </div>
+    </>
+  );
+}
+`
+  );
+
+  vfs.writeFileSync('/app/page.tsx', PAGE);
+  vfs.writeFileSync('/pages/api/chat.ts', API_ROUTE);
+
+  // Welcome page — shown in the preview iframe by default
+  vfs.mkdirSync('/app/welcome', { recursive: true });
+  vfs.writeFileSync(
+    '/app/welcome/page.tsx',
+    `import React from 'react';
+
+export default function WelcomePage() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#fafafa', color: '#333' }}>
+      <div style={{ textAlign: 'center', maxWidth: 420, padding: 32 }}>
+        <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 8 }}>Welcome</h1>
+        <p style={{ fontSize: 14, color: '#666', lineHeight: 1.6 }}>
+          Ask the agent to create a page, then navigate here to see it.
+        </p>
+      </div>
+    </div>
+  );
+}
+`
+  );
+
+  vfs.writeFileSync('/public/favicon.ico', 'favicon');
+}
diff --git a/src/convex-app-demo-entry.ts b/src/convex-app-demo-entry.ts
index c43ceae..c7a38af 100644
--- a/src/convex-app-demo-entry.ts
+++ b/src/convex-app-demo-entry.ts
@@ -7,7 +7,6 @@ import { VirtualFS } from './virtual-fs';
 import { Runtime } from './runtime';
 import { NextDevServer } from './frameworks/next-dev-server';
 import { getServerBridge } from './server-bridge';
-import { Buffer } from './shims/stream';
 import { createConvexAppProject } from './convex-app-demo';
 import { PackageManager } from './npm/index';
 
@@ -1112,18 +1111,16 @@ async function main() {
     buildFileTree();
     log('File editor ready', 'success');
 
-    setStatus('Initializing runtime...', 'loading');
-    log('Initializing runtime...');
-    const runtime = new Runtime(vfs, {
-      cwd: '/',
-      env: { NODE_ENV: 'development' },
-      onConsole: (method, args) => {
-        const msg = args.map(a => String(a)).join(' ');
-        if (method === 'error') log(msg, 'error');
-        else if (method === 'warn') log(msg, 'warn');
-        else log(msg);
-      },
+    // Install convex at root so NextDevServer's getInstalledPackages() finds it
+    // (CLI install goes to /project/node_modules/ which the dev server doesn't see)
+    setStatus('Installing packages...', 'loading');
+    log('Installing convex package at root...');
+    const rootPm = new PackageManager(vfs, { cwd: '/' });
+    await rootPm.install('convex', {
+      onProgress: (msg) => log(msg),
+      transform: true,
     });
+    log('Convex package installed', 'success');
 
     setStatus('Starting dev server...', 'loading');
     log('Starting Next.js dev server...');
@@ -1134,7 +1131,6 @@ async function main() {
       root: '/',
       preferAppRouter: true,
     });
-    const server = devServer;
 
     const bridge = getServerBridge();
 
@@ -1146,25 +1142,8 @@ async function main() {
       log(`Service Worker warning: ${error}`, 'warn');
     }
 
-    // Create HTTP server wrapper
-    const httpServer = {
-      listening: true,
-      address: () => ({ port, address: '0.0.0.0', family: 'IPv4' }),
-      async handleRequest(
-        method: string,
-        url: string,
-        headers: Record<string, string>,
-        body?: string | Buffer
-      ) {
-        const bodyBuffer = body
-          ? typeof body === 'string' ? Buffer.from(body) : body
-          : undefined;
-        return server.handleRequest(method, url, headers, bodyBuffer);
-      },
-    };
-
-    bridge.registerServer(httpServer as any, port);
-    server.start();
+    bridge.registerServer(devServer as any, port);
+    devServer.start();
 
     serverUrl = bridge.getServerUrl(port) + '/';
     log(`Server running at: ${serverUrl}`, 'success');
diff --git a/src/frameworks/code-transforms.ts b/src/frameworks/code-transforms.ts
index 224cc81..27679cc 100644
--- a/src/frameworks/code-transforms.ts
+++ b/src/frameworks/code-transforms.ts
@@ -206,6 +206,8 @@ function resolveNpmPackage(
   packageName: string,
   extraLocalPackages?: Set<string>,
   dependencies?: Record<string, string>,
+  esmShDeps?: string,
+  installedPackages?: Set<string>,
 ): string | null {
   // Skip relative, absolute, URL, and virtual paths
   if (packageName.startsWith('.') || packageName.startsWith('/') ||
@@ -228,6 +230,11 @@ function resolveNpmPackage(
   if (LOCAL_PACKAGES.has(scopedBasePkg)) return null;
   if (extraLocalPackages?.has(scopedBasePkg)) return null;
 
+  // Serve from VFS bundle if package is installed locally
+  if (installedPackages?.has(scopedBasePkg)) {
+    return `/_npm/${packageName}`;
+  }
+
   // Build versioned esm.sh URL. Include major version from package.json
   // dependencies when available — esm.sh requires this for subpath exports.
   let esmPkg = packageName;
@@ -243,7 +250,8 @@ function resolveNpmPackage(
     }
   }
 
-  return `https://esm.sh/${esmPkg}?external=react`;
+  const depsParam = esmShDeps ? `&deps=${esmShDeps}` : '';
+  return `https://esm.sh/${esmPkg}?external=react${depsParam}`;
 }
 
 /**
@@ -256,17 +264,21 @@ function resolveNpmPackage(
  *   Used by frameworks that add their own import map entries (e.g., Convex demo).
  * @param dependencies - Dependency versions from package.json (e.g., {"ai": "^4.0.0"}).
  *   Used to include major version in esm.sh URLs for correct subpath resolution.
+ * @param installedPackages - Packages installed in VFS node_modules. These are
+ *   served from /_npm/ instead of esm.sh, giving us full control over resolution.
  */
 export function redirectNpmImports(
   code: string,
   additionalLocalPackages?: string[],
   dependencies?: Record<string, string>,
+  esmShDeps?: string,
+  installedPackages?: Set<string>,
 ): string {
   const extraSet = additionalLocalPackages?.length ? new Set(additionalLocalPackages) : undefined;
   try {
-    return redirectNpmImportsAst(code, extraSet, dependencies);
+    return redirectNpmImportsAst(code, extraSet, dependencies, esmShDeps, installedPackages);
   } catch {
-    return redirectNpmImportsRegex(code, extraSet, dependencies);
+    return redirectNpmImportsRegex(code, extraSet, dependencies, esmShDeps, installedPackages);
   }
 }
 
@@ -274,6 +286,8 @@ function redirectNpmImportsAst(
   code: string,
   extraLocalPackages?: Set<string>,
   dependencies?: Record<string, string>,
+  esmShDeps?: string,
+  installedPackages?: Set<string>,
 ): string {
   const ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
 
@@ -282,7 +296,7 @@ function redirectNpmImportsAst(
 
   function processSource(sourceNode: any) {
     if (!sourceNode || sourceNode.type !== 'Literal') return;
-    const resolved = resolveNpmPackage(sourceNode.value, extraLocalPackages, dependencies);
+    const resolved = resolveNpmPackage(sourceNode.value, extraLocalPackages, dependencies, esmShDeps, installedPackages);
     if (resolved) {
       // Replace the string literal (including quotes) — sourceNode.start/end include quotes
       replacements.push([sourceNode.start, sourceNode.end, JSON.stringify(resolved)]);
@@ -315,10 +329,12 @@ function redirectNpmImportsRegex(
   code: string,
   extraLocalPackages?: Set<string>,
   dependencies?: Record<string, string>,
+  esmShDeps?: string,
+  installedPackages?: Set<string>,
 ): string {
   const importPattern = /(from\s*['"])([^'"./][^'"]*?)(['"])/g;
   return code.replace(importPattern, (match, prefix, packageName, suffix) => {
-    const resolved = resolveNpmPackage(packageName, extraLocalPackages, dependencies);
+    const resolved = resolveNpmPackage(packageName, extraLocalPackages, dependencies, esmShDeps, installedPackages);
     if (!resolved) return match;
     return `${prefix}${resolved}${suffix}`;
   });
diff --git a/src/frameworks/next-api-handler.ts b/src/frameworks/next-api-handler.ts
index 5ede308..5e36070 100644
--- a/src/frameworks/next-api-handler.ts
+++ b/src/frameworks/next-api-handler.ts
@@ -298,8 +298,9 @@ export async function executeApiHandler(
   req: MockRequest,
   res: MockResponse | StreamingMockResponse,
   env: Record<string, string> | undefined,
-  builtinModules: Record<string, unknown>
-): Promise<void> {
+  builtinModules: Record<string, unknown>,
+  vfsRequire?: (id: string) => unknown
+): Promise<unknown> {
   try {
     const require = (id: string): unknown => {
       // Handle node: prefix
@@ -307,6 +308,10 @@ export async function executeApiHandler(
       if (builtinModules[modId]) {
         return builtinModules[modId];
       }
+      // Fall back to VFS-based require (npm packages from node_modules)
+      if (vfsRequire) {
+        return vfsRequire(modId);
+      }
       throw new Error(`Module not found: ${id}`);
     };
 
@@ -340,12 +345,15 @@ export async function executeApiHandler(
     }
 
     // Call the handler - it may be async
-    const result = (handler as (req: unknown, res: unknown) => unknown)(req, res);
+    let result = (handler as (req: unknown, res: unknown) => unknown)(req, res);
 
     // If the handler returns a promise, wait for it
     if (result instanceof Promise) {
-      await result;
+      result = await result;
     }
+
+    // Return the handler's return value so callers can detect Response objects
+    return result;
   } catch (error) {
     console.error('[NextDevServer] API handler error:', error);
     throw error;
diff --git a/src/frameworks/next-dev-server.ts b/src/frameworks/next-dev-server.ts
index 5e83ef4..284dcfe 100644
--- a/src/frameworks/next-dev-server.ts
+++ b/src/frameworks/next-dev-server.ts
@@ -50,6 +50,8 @@ import {
   createBuiltinModules,
   executeApiHandler,
 } from './next-api-handler';
+import { createVfsRequire, type VfsModule } from './vfs-require';
+import { bundleNpmModuleForBrowser, clearNpmBundleCache, initNpmServe } from './npm-serve';
 import { ESBUILD_WASM_ESM_CDN, ESBUILD_WASM_BINARY_CDN } from '../config/cdn';
 
 // Check if we're in a real browser environment (not jsdom or Node.js)
@@ -129,6 +131,12 @@ export interface NextDevServerOptions extends DevServerOptions {
   additionalImportMap?: Record<string, string>;
   /** Additional packages that should NOT be redirected to esm.sh CDN (e.g., packages in the import map) */
   additionalLocalPackages?: string[];
+  /** Extra modules to inject into API route handlers (available via require()) */
+  apiModules?: Record<string, unknown>;
+  /** Pin dependency versions in esm.sh URLs (e.g., 'zod@3.23.8' adds &deps=zod@3.23.8) */
+  esmShDeps?: string;
+  /** CORS proxy URL prefix for API route handlers (available as process.env.CORS_PROXY_URL) */
+  corsProxy?: string;
 }
 
 /**
@@ -182,6 +190,32 @@ export class NextDevServer extends DevServer {
   /** Path aliases from tsconfig.json (e.g., @/* -> ./*) */
   private pathAliases: Map<string, string> = new Map();
 
+  /** Shared module cache for VFS-based require (persists across API requests) */
+  private vfsModuleCache: Record<string, VfsModule> = {};
+
+  /**
+   * Create a VFS-based require function for API route handlers.
+   * Resolves npm packages from /node_modules/ in VFS.
+   */
+  private createApiVfsRequire(builtinModules: Record<string, unknown>): (id: string) => unknown {
+    const env: Record<string, string> = { ...this.options.env };
+    if (this.options.corsProxy) {
+      env.CORS_PROXY_URL = this.options.corsProxy;
+    }
+    const { require: vfsRequire } = createVfsRequire(this.vfs, '/', {
+      builtinModules,
+      process: {
+        env,
+        cwd: () => '/',
+        platform: 'browser',
+        version: 'v18.0.0',
+        versions: { node: '18.0.0' },
+      },
+      moduleCache: this.vfsModuleCache,
+    });
+    return vfsRequire;
+  }
+
   /** Cached Tailwind config script (injected before CDN) */
   private tailwindConfigScript: string = '';
 
@@ -206,6 +240,16 @@ export class NextDevServer extends DevServer {
   constructor(vfs: VirtualFS, options: NextDevServerOptions) {
     super(vfs, options);
     this.options = options;
+
+    // Initialize esbuild VFS so /_npm/ bundling can resolve from node_modules
+    initNpmServe(vfs);
+
+    // Inject CORS proxy URL into env so API handlers get it via process.env
+    if (options.corsProxy) {
+      if (!this.options.env) this.options.env = {};
+      this.options.env.CORS_PROXY_URL = options.corsProxy;
+    }
+
     this.pagesDir = options.pagesDir || '/pages';
     this.appDir = options.appDir || '/app';
     this.publicDir = options.publicDir || '/public';
@@ -490,6 +534,11 @@ export class NextDevServer extends DevServer {
       return this.serveStaticAsset(pathname);
     }
 
+    // Serve npm packages bundled from VFS node_modules
+    if (pathname.startsWith('/_npm/')) {
+      return this.serveNpmModule(pathname);
+    }
+
     // App Router API routes (route.ts/route.js) - check before Pages Router API routes
     if (this.useAppRouter) {
       const appRouteFile = resolveAppRouteHandler(this.appDir, pathname, this.routeCtx);
@@ -593,7 +642,7 @@ export class NextDevServer extends DevServer {
     const route = resolveAppRoute(this.appDir, pathname, this.routeCtx);
 
     const info = route
-      ? { params: route.params, found: true }
+      ? { params: route.params, found: true, page: route.page, layouts: route.layouts }
       : { params: {}, found: false };
 
     const json = JSON.stringify(info);
@@ -707,7 +756,28 @@ export class NextDevServer extends DevServer {
       const builtins = await createBuiltinModules(
         () => import('../shims/fs').then(m => m.createFsShim(this.vfs))
       );
-      await executeApiHandler(transformed, req, res, this.options.env, builtins);
+      if (this.options.apiModules) {
+        Object.assign(builtins, this.options.apiModules);
+      }
+      const vfsRequire = this.createApiVfsRequire(builtins);
+      const result = await executeApiHandler(transformed, req, res, this.options.env, builtins, vfsRequire);
+
+      // If the handler returned a Response object, convert it to ResponseData
+      if (result instanceof Response) {
+        const respHeaders: Record<string, string> = {};
+        result.headers.forEach((value: string, key: string) => {
+          respHeaders[key] = value;
+        });
+        const bodyBytes = result.body
+          ? new Uint8Array(await new Response(result.body).arrayBuffer())
+          : new Uint8Array(0);
+        return {
+          statusCode: result.status,
+          statusMessage: result.statusText || 'OK',
+          headers: respHeaders,
+          body: Buffer.from(bodyBytes),
+        };
+      }
 
       // Wait for async handlers (like those using https.get with callbacks)
       // with a reasonable timeout
@@ -750,17 +820,23 @@ export class NextDevServer extends DevServer {
 
       // Create module context and execute the route handler
       const builtinModules = await createBuiltinModules();
+      if (this.options.apiModules) {
+        Object.assign(builtinModules, this.options.apiModules);
+      }
+      const vfsRequire = this.createApiVfsRequire(builtinModules);
 
       const require = (id: string): unknown => {
         const modId = id.startsWith('node:') ? id.slice(5) : id;
         if (builtinModules[modId]) return builtinModules[modId];
-        throw new Error(`Module not found: ${id}`);
+        return vfsRequire(modId);
       };
 
       const moduleObj = { exports: {} as Record<string, unknown> };
       const exports = moduleObj.exports;
+      const env: Record<string, string> = { ...this.options.env };
+      if (this.options.corsProxy) env.CORS_PROXY_URL = this.options.corsProxy;
       const process = {
-        env: { ...this.options.env },
+        env,
         cwd: () => '/',
         platform: 'browser',
         version: 'v18.0.0',
@@ -861,9 +937,25 @@ export class NextDevServer extends DevServer {
     onEnd: () => void
   ): Promise<void> {
     const urlObj = new URL(url, 'http://localhost');
-    const pathname = urlObj.pathname;
+    let pathname = urlObj.pathname;
+
+    // Strip virtual prefix if present (same as handleRequest)
+    const virtualPrefixMatch = pathname.match(/^\/__virtual__\/\d+/);
+    if (virtualPrefixMatch) {
+      pathname = pathname.slice(virtualPrefixMatch[0].length) || '/';
+    }
+
+    // Check App Router route handlers first (they return Response objects with ReadableStream bodies)
+    if (this.useAppRouter) {
+      const appRouteFile = resolveAppRouteHandler(this.appDir, pathname, this.routeCtx);
+      if (appRouteFile) {
+        return this.handleAppRouteHandlerStreaming(
+          method, pathname, headers, body, appRouteFile, urlObj.search, onStart, onChunk, onEnd
+        );
+      }
+    }
 
-    // Only handle API routes
+    // Pages Router API routes
     if (!pathname.startsWith('/api/')) {
       onStart(404, 'Not Found', { 'Content-Type': 'application/json' });
       onChunk(JSON.stringify({ error: 'Not found' }));
@@ -890,9 +982,34 @@ export class NextDevServer extends DevServer {
       const builtins = await createBuiltinModules(
         () => import('../shims/fs').then(m => m.createFsShim(this.vfs))
       );
-      await executeApiHandler(transformed, req, res, this.options.env, builtins);
+      if (this.options.apiModules) {
+        Object.assign(builtins, this.options.apiModules);
+      }
+      const vfsRequire = this.createApiVfsRequire(builtins);
+      const result = await executeApiHandler(transformed, req, res, this.options.env, builtins, vfsRequire);
+
+      // If the handler returned a Response object (Web API style), stream it
+      // directly. This lets Pages Router handlers use `return new Response()`
+      // or return AI SDK's `toUIMessageStreamResponse()` without manual SSE splitting.
+      if (result instanceof Response) {
+        const respHeaders: Record<string, string> = {};
+        result.headers.forEach((value: string, key: string) => {
+          respHeaders[key] = value;
+        });
+        onStart(result.status, result.statusText || 'OK', respHeaders);
+        if (result.body) {
+          const reader = result.body.getReader();
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            onChunk(value);
+          }
+        }
+        onEnd();
+        return;
+      }
 
-      // Wait for the response to end
+      // Wait for the response to end (classic req/res pattern)
       if (!res.isEnded()) {
         const timeout = new Promise<void>((_, reject) => {
           setTimeout(() => reject(new Error('API handler timeout')), 30000);
@@ -907,6 +1024,123 @@ export class NextDevServer extends DevServer {
     }
   }
 
+  /**
+   * Handle App Router route handler with streaming support.
+   * Executes the handler, and if it returns a Response with a ReadableStream body,
+   * pipes the stream through the onStart/onChunk/onEnd callbacks.
+   */
+  private async handleAppRouteHandlerStreaming(
+    method: string,
+    pathname: string,
+    headers: Record<string, string>,
+    body: Buffer | undefined,
+    routeFile: string,
+    search: string | undefined,
+    onStart: (statusCode: number, statusMessage: string, headers: Record<string, string>) => void,
+    onChunk: (chunk: string | Uint8Array) => void,
+    onEnd: () => void
+  ): Promise<void> {
+    try {
+      const code = this.vfs.readFileSync(routeFile, 'utf8');
+      const transformed = await this.transformApiHandler(code, routeFile);
+
+      const builtinModules = await createBuiltinModules(
+        () => import('../shims/fs').then(m => m.createFsShim(this.vfs))
+      );
+      if (this.options.apiModules) {
+        Object.assign(builtinModules, this.options.apiModules);
+      }
+      const vfsRequire = this.createApiVfsRequire(builtinModules);
+
+      const require = (id: string): unknown => {
+        const modId = id.startsWith('node:') ? id.slice(5) : id;
+        if (builtinModules[modId]) return builtinModules[modId];
+        return vfsRequire(modId);
+      };
+
+      const moduleObj = { exports: {} as Record<string, unknown> };
+      const exports = moduleObj.exports;
+      const env: Record<string, string> = { ...this.options.env };
+      if (this.options.corsProxy) env.CORS_PROXY_URL = this.options.corsProxy;
+      const process = {
+        env,
+        cwd: () => '/',
+        platform: 'browser',
+        version: 'v18.0.0',
+        versions: { node: '18.0.0' },
+      };
+
+      const fn = new Function('exports', 'require', 'module', 'process', transformed);
+      fn(exports, require, moduleObj, process);
+
+      // Get the handler for the HTTP method
+      const methodUpper = method.toUpperCase();
+      const handler = moduleObj.exports[methodUpper] || moduleObj.exports[methodUpper.toLowerCase()];
+
+      if (typeof handler !== 'function') {
+        onStart(405, 'Method Not Allowed', { 'Content-Type': 'application/json' });
+        onChunk(JSON.stringify({ error: `Method ${method} not allowed` }));
+        onEnd();
+        return;
+      }
+
+      // Create a Web API Request object
+      const requestUrl = new URL(pathname + (search || ''), 'http://localhost');
+      const requestInit: RequestInit = {
+        method: methodUpper,
+        headers: new Headers(headers),
+      };
+      if (body && methodUpper !== 'GET' && methodUpper !== 'HEAD') {
+        requestInit.body = body;
+      }
+      const request = new Request(requestUrl.toString(), requestInit);
+
+      // Extract route params
+      const route = resolveAppRoute(this.appDir, pathname, this.routeCtx);
+      const params = route?.params || {};
+
+      // Call the handler
+      const response = await handler(request, { params: Promise.resolve(params) });
+
+      if (response instanceof Response) {
+        const respHeaders: Record<string, string> = {};
+        response.headers.forEach((value: string, key: string) => {
+          respHeaders[key] = value;
+        });
+
+        if (response.body) {
+          // Stream the response body through callbacks
+          onStart(response.status, response.statusText || 'OK', respHeaders);
+          const reader = response.body.getReader();
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+              onChunk(value);
+            }
+          } finally {
+            onEnd();
+          }
+        } else {
+          // No body
+          onStart(response.status, response.statusText || 'OK', respHeaders);
+          onEnd();
+        }
+      } else {
+        // Non-Response return value
+        const json = JSON.stringify(response || {});
+        onStart(200, 'OK', { 'Content-Type': 'application/json; charset=utf-8' });
+        onChunk(json);
+        onEnd();
+      }
+    } catch (error) {
+      console.error('[NextDevServer] App Route streaming error:', error);
+      onStart(500, 'Internal Server Error', { 'Content-Type': 'application/json' });
+      onChunk(JSON.stringify({ error: error instanceof Error ? error.message : 'Internal Server Error' }));
+      onEnd();
+    }
+  }
+
   /**
    * Handle page route requests
    */
@@ -1161,8 +1395,82 @@ export class NextDevServer extends DevServer {
     return deps;
   }
 
+  /** Cached set of packages installed in VFS node_modules */
+  private _installedPackages: Set<string> | undefined;
+
+  /** Scan /node_modules/ in VFS to build a set of installed package names. */
+  private getInstalledPackages(): Set<string> {
+    if (this._installedPackages) return this._installedPackages;
+    const pkgs = new Set<string>();
+    const nmDir = '/node_modules';
+    try {
+      if (!this.vfs.existsSync(nmDir)) {
+        this._installedPackages = pkgs;
+        return pkgs;
+      }
+      const entries = this.vfs.readdirSync(nmDir) as string[];
+      for (const entry of entries) {
+        if (entry.startsWith('.')) continue;
+        if (entry.startsWith('@')) {
+          // Scoped package — list sub-entries
+          const scopeDir = nmDir + '/' + entry;
+          try {
+            const scopeEntries = this.vfs.readdirSync(scopeDir) as string[];
+            for (const sub of scopeEntries) {
+              pkgs.add(entry + '/' + sub);
+            }
+          } catch { /* ignore */ }
+        } else {
+          pkgs.add(entry);
+        }
+      }
+    } catch { /* ignore */ }
+    this._installedPackages = pkgs;
+    return pkgs;
+  }
+
+  /** Invalidate installed packages cache (call after npm install). */
+  clearInstalledPackagesCache(): void {
+    this._installedPackages = undefined;
+    this._dependencies = undefined;
+    clearNpmBundleCache();
+  }
+
+  /**
+   * Serve a bundled npm module from VFS node_modules.
+   * /_npm/@ai-sdk/react → esbuild bundles @ai-sdk/react as ESM
+   */
+  private async serveNpmModule(pathname: string): Promise<ResponseData> {
+    const specifier = pathname.slice('/_npm/'.length);
+    if (!specifier) {
+      return this.notFound(pathname);
+    }
+
+    try {
+      const code = await bundleNpmModuleForBrowser(specifier);
+      return {
+        statusCode: 200,
+        statusMessage: 'OK',
+        headers: {
+          'Content-Type': 'application/javascript; charset=utf-8',
+          'Cache-Control': 'public, max-age=31536000, immutable',
+        },
+        body: Buffer.from(code),
+      };
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      console.error(`[NextDevServer] Failed to bundle npm module '${specifier}':`, msg);
+      return {
+        statusCode: 500,
+        statusMessage: 'Internal Server Error',
+        headers: { 'Content-Type': 'text/plain' },
+        body: Buffer.from(`Failed to bundle '${specifier}': ${msg}`),
+      };
+    }
+  }
+
   private redirectNpmImports(code: string): string {
-    return _redirectNpmImports(code, this.options.additionalLocalPackages, this.getDependencies());
+    return _redirectNpmImports(code, this.options.additionalLocalPackages, this.getDependencies(), this.options.esmShDeps, this.getInstalledPackages());
   }
 
   private stripCssImports(code: string, currentFile?: string): string {
diff --git a/src/frameworks/next-html-generator.ts b/src/frameworks/next-html-generator.ts
index 39a0562..b976a7c 100644
--- a/src/frameworks/next-html-generator.ts
+++ b/src/frameworks/next-html-generator.ts
@@ -54,29 +54,16 @@ export async function generateAppRouterHtml(
     }
   }
 
-  // Build the nested component structure
-  // Layouts wrap the page from outside in
-  const pageModulePath = virtualPrefix + route.page; // route.page already starts with /
-  const layoutImports = route.layouts
-    .map((layout, i) => `import Layout${i} from '${virtualPrefix}${layout}';`)
-    .join('\n    ');
-
   // Build convention file paths for the inline script
   const loadingModulePath = route.loading ? `${virtualPrefix}${route.loading}` : '';
   const errorModulePath = route.error ? `${virtualPrefix}${route.error}` : '';
   const notFoundModulePath = route.notFound ? `${virtualPrefix}${route.notFound}` : '';
 
-  // Build nested JSX: Layout0 > Layout1 > ... > Page
-  let nestedJsx = 'React.createElement(Page)';
-  for (let i = route.layouts.length - 1; i >= 0; i--) {
-    nestedJsx = `React.createElement(Layout${i}, null, ${nestedJsx})`;
-  }
-
   // Build additional import map entries from context
   const additionalImportMapEntries = ctx.additionalImportMap
-    ? ',' + Object.entries(ctx.additionalImportMap)
-        .map(([key, value]) => `\n      "${key}": "${value}"`)
-        .join(',')
+    ? Object.entries(ctx.additionalImportMap)
+        .map(([key, value]) => `\n      "${key}": "${value}",`)
+        .join('')
     : '';
 
   // Generate env script for NEXT_PUBLIC_* variables
@@ -140,71 +127,45 @@ export async function generateAppRouterHtml(
     const errorModulePath = '${errorModulePath}';
     const notFoundModulePath = '${notFoundModulePath}';
 
-    // Route params cache for client-side navigation
-    const routeParamsCache = new Map();
-    routeParamsCache.set(initialPathname, initialRouteParams);
+    // Route info cache: pathname -> Promise<{ found, params, page, layouts }>
+    // Uses promise-based caching to deduplicate concurrent requests
+    const routeInfoCache = new Map();
 
-    // Extract route params from server for client-side navigation
-    async function extractRouteParams(pathname) {
-      // Strip virtual base if present
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-
-      // Check cache first
-      if (routeParamsCache.has(route)) {
-        return routeParamsCache.get(route);
-      }
+    // Pre-seed cache with server-resolved initial route data
+    routeInfoCache.set(initialPathname, Promise.resolve({
+      found: true,
+      params: initialRouteParams,
+      page: '${route.page}',
+      layouts: ${JSON.stringify(route.layouts)},
+    }));
 
-      try {
-        const response = await fetch(virtualBase + '/_next/route-info?pathname=' + encodeURIComponent(route));
-        const info = await response.json();
-        routeParamsCache.set(route, info.params || {});
-        return info.params || {};
-      } catch (e) {
-        console.error('[Router] Failed to extract route params:', e);
-        return {};
-      }
-    }
-
-    // Convert URL path to app router page module path
-    function getAppPageModulePath(pathname) {
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-      // App Router: / -> /app/page, /about -> /app/about/page
-      const pagePath = route === '/' ? '/app/page' : '/app' + route + '/page';
-      return virtualBase + '/_next/app' + pagePath + '.js';
-    }
-
-    // Get layout paths for a route
-    function getLayoutPaths(pathname) {
+    // Resolve route via server — handles route groups, dynamic segments, catch-all, etc.
+    function resolveRoute(pathname) {
       let route = pathname;
       if (route.startsWith(virtualBase)) {
         route = route.slice(virtualBase.length);
       }
       route = route.replace(/^\\/+/, '/') || '/';
 
-      // Build layout paths from root to current route
-      const layouts = [virtualBase + '/_next/app/app/layout.js'];
-      if (route !== '/') {
-        const segments = route.split('/').filter(Boolean);
-        let currentPath = '/app';
-        for (const segment of segments) {
-          currentPath += '/' + segment;
-          layouts.push(virtualBase + '/_next/app' + currentPath + '/layout.js');
-        }
+      if (!routeInfoCache.has(route)) {
+        routeInfoCache.set(route,
+          fetch(virtualBase + '/_next/route-info?pathname=' + encodeURIComponent(route))
+            .then(r => r.json())
+            .catch(e => {
+              console.error('[Router] Failed to resolve route:', e);
+              routeInfoCache.delete(route);
+              return { found: false, params: {}, page: null, layouts: [] };
+            })
+        );
       }
-      return layouts;
+      return routeInfoCache.get(route);
     }
 
     // Dynamic page loader with retry (SW may need time to recover after idle termination)
     async function loadPage(pathname) {
-      const modulePath = getAppPageModulePath(pathname);
+      const info = await resolveRoute(pathname);
+      if (!info.found || !info.page) return null;
+      const modulePath = virtualBase + '/_next/app' + info.page;
       for (let attempt = 0; attempt < 3; attempt++) {
         try {
           const module = await import(/* @vite-ignore */ modulePath + (attempt > 0 ? '?retry=' + attempt : ''));
@@ -221,7 +182,8 @@ export async function generateAppRouterHtml(
     // Load layouts (with caching)
     const layoutCache = new Map();
     async function loadLayouts(pathname) {
-      const layoutPaths = getLayoutPaths(pathname);
+      const info = await resolveRoute(pathname);
+      const layoutPaths = (info.layouts || []).map(l => virtualBase + '/_next/app' + l);
       const layouts = [];
       for (const path of layoutPaths) {
         if (layoutCache.has(path)) {
@@ -312,8 +274,8 @@ export async function generateAppRouterHtml(
       React.useEffect(() => {
         // Update route params when pathname changes
         let cancelled = false;
-        extractRouteParams(pathname).then(routeParams => {
-          if (!cancelled) setParams(Promise.resolve(routeParams));
+        resolveRoute(pathname).then(info => {
+          if (!cancelled) setParams(Promise.resolve(info.params || {}));
         });
         return () => { cancelled = true; };
       }, [pathname]);
@@ -369,8 +331,8 @@ export async function generateAppRouterHtml(
           if (newPath !== path) {
             console.log('[Router] Path changed, loading new page...');
             setPath(newPath);
-            const [P, L, routeParams] = await Promise.all([loadPage(newPath), loadLayouts(newPath), extractRouteParams(newPath)]);
-            window.__NEXT_ROUTE_PARAMS__ = routeParams;
+            const [P, L, routeInfo] = await Promise.all([loadPage(newPath), loadLayouts(newPath), resolveRoute(newPath)]);
+            window.__NEXT_ROUTE_PARAMS__ = routeInfo.params || {};
             console.log('[Router] Page loaded:', !!P, 'Layouts:', L.length);
             if (P) setPage(() => P);
             setLayouts(L);
@@ -450,9 +412,9 @@ export async function generatePageHtml(
 
   // Build additional import map entries from context
   const pagesAdditionalEntries = ctx.additionalImportMap
-    ? ',' + Object.entries(ctx.additionalImportMap)
-        .map(([key, value]) => `\n      "${key}": "${value}"`)
-        .join(',')
+    ? Object.entries(ctx.additionalImportMap)
+        .map(([key, value]) => `\n      "${key}": "${value}",`)
+        .join('')
     : '';
 
   return `<!DOCTYPE html>
diff --git a/src/frameworks/npm-serve.ts b/src/frameworks/npm-serve.ts
new file mode 100644
index 0000000..33ce8aa
--- /dev/null
+++ b/src/frameworks/npm-serve.ts
@@ -0,0 +1,290 @@
+/**
+ * NPM package bundling for browser consumption.
+ *
+ * Bundles npm packages installed in VFS node_modules into single ESM files
+ * using esbuild-wasm. This replaces esm.sh CDN for packages that are
+ * locally installed, giving us full control over resolution (no CDN bugs).
+ *
+ * React packages are kept external — they continue to load from esm.sh
+ * so the entire app shares one React instance.
+ */
+
+import { build, setVFS, type BuildResult } from '../shims/esbuild';
+import type { VirtualFS } from '../virtual-fs';
+
+/** Packages that must stay external (loaded via import map / esm.sh). */
+const ALWAYS_EXTERNAL = [
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom/client',
+];
+
+/** In-memory cache: specifier → bundled ESM code. */
+const bundleCache = new Map<string, string>();
+
+/** VFS instance for resolving package entry points. */
+let moduleVFS: VirtualFS | null = null;
+
+/** Clear the bundle cache (e.g., after npm install). */
+export function clearNpmBundleCache(): void {
+  bundleCache.clear();
+}
+
+/**
+ * Ensure the esbuild VFS plugin can access our virtual file system.
+ * Must be called before bundleNpmModuleForBrowser.
+ */
+export function initNpmServe(vfs: VirtualFS): void {
+  setVFS(vfs);
+  moduleVFS = vfs;
+}
+
+/**
+ * Resolve a package specifier to its CJS entry point in VFS.
+ * Prefers `require` condition over `import` to avoid .mjs files
+ * (which were ESM→CJS transformed but keep the .mjs extension,
+ * confusing esbuild's module format detection).
+ */
+/**
+ * Recursively resolve nested export conditions to a file path string.
+ * Handles doubly-nested conditions like convex uses:
+ *   { "import": { "types": "...", "import": "./dist/esm/server/index.js" },
+ *     "require": { "types": "...", "require": "./dist/cjs/server/index.js" } }
+ *
+ * Prefers require > import > module > default (CJS-first to avoid .mjs issues).
+ * Skips 'types' condition (resolves to .d.ts files).
+ */
+const CJS_CONDITION_PRIORITY = ['require', 'import', 'module', 'default'] as const;
+
+function resolveExportEntry(entry: unknown): string | undefined {
+  if (typeof entry === 'string') return entry;
+  if (typeof entry === 'object' && entry !== null) {
+    const obj = entry as Record<string, unknown>;
+    for (const condition of CJS_CONDITION_PRIORITY) {
+      const value = obj[condition];
+      if (value !== undefined) {
+        const result = resolveExportEntry(value);
+        if (result) return result;
+      }
+    }
+  }
+  return undefined;
+}
+
+/** Check that a VFS path is an existing file (not a directory). */
+function isFile(path: string): boolean {
+  if (!moduleVFS) return false;
+  if (!moduleVFS.existsSync(path)) return false;
+  try { return !moduleVFS.statSync(path).isDirectory(); } catch { return false; }
+}
+
+function resolvePackageEntry(specifier: string): string | null {
+  if (!moduleVFS) return null;
+
+  const parts = specifier.split('/');
+  const isScoped = parts[0].startsWith('@');
+  const pkgName = isScoped ? parts.slice(0, 2).join('/') : parts[0];
+  const subPath = isScoped ? parts.slice(2).join('/') : parts.slice(1).join('/');
+
+  const pkgDir = '/node_modules/' + pkgName;
+  const pkgJsonPath = pkgDir + '/package.json';
+  if (!moduleVFS.existsSync(pkgJsonPath)) return null;
+
+  try {
+    const pkgJson = JSON.parse(moduleVFS.readFileSync(pkgJsonPath, 'utf8'));
+    const exports = pkgJson.exports;
+
+    if (exports && typeof exports === 'object') {
+      const key = subPath ? './' + subPath : '.';
+      const entry = (exports as Record<string, unknown>)[key];
+      if (entry) {
+        const resolved = resolveExportEntry(entry);
+        if (resolved) {
+          const fullPath = pkgDir + '/' + resolved.replace(/^\.\//, '');
+          if (isFile(fullPath)) return fullPath;
+        }
+      }
+    }
+
+    // Fallback to main/module fields
+    if (!subPath) {
+      const mainEntry = pkgJson.main || pkgJson.module;
+      if (mainEntry) {
+        const fullPath = pkgDir + '/' + mainEntry.replace(/^\.\//, '');
+        if (isFile(fullPath)) return fullPath;
+      }
+      // Default: index.js
+      const defaultPath = pkgDir + '/index.js';
+      if (isFile(defaultPath)) return defaultPath;
+    } else {
+      // Direct path for subpath imports
+      const directPath = pkgDir + '/' + subPath;
+      for (const ext of ['', '.js', '.cjs', '.mjs', '.json']) {
+        if (isFile(directPath + ext)) return directPath + ext;
+      }
+    }
+  } catch { /* ignore parse errors */ }
+  return null;
+}
+
+/**
+ * Extract named export identifiers from a CJS file produced by ESM→CJS transform.
+ * Looks for esbuild's `__export(xxx, { name: () => ... })` pattern.
+ */
+function extractCjsExportNames(content: string): string[] {
+  // Match esbuild's __export(varName, { key: () => ..., key2: () => ... })
+  const match = content.match(/__export\(\w+,\s*\{([^}]+)\}/);
+  if (match) {
+    return [...match[1].matchAll(/(\w+)\s*:/g)]
+      .map(m => m[1])
+      .filter(n => n !== 'default' && n !== '__esModule');
+  }
+  // Fallback: exports.X = ... pattern
+  return [...new Set(
+    [...content.matchAll(/exports\.(\w+)\s*=/g)]
+      .map(m => m[1])
+      .filter(n => n !== 'default' && n !== '__esModule')
+  )];
+}
+
+/**
+ * Post-process esbuild's CJS→ESM bundle to add explicit named exports.
+ *
+ * esbuild wraps CJS entries as `export default require_xxx();` with no named
+ * exports. We find the require function name from that line, then append
+ * explicit `export var X = __pkg.X;` for each known export name.
+ */
+function addNamedExports(code: string, exportNames: string[]): string {
+  if (exportNames.length === 0) return code;
+
+  // Find `export default require_xxx();` — the CJS wrapper export
+  const match = code.match(/export\s+default\s+(require_\w+)\(\)\s*;?/);
+  if (!match) return code;
+
+  const fnName = match[0];
+  const requireFn = match[1];
+
+  const replacement =
+    `var __pkg = ${requireFn}();\nexport default __pkg;\n` +
+    exportNames.map(n => `export var ${n} = __pkg.${n};`).join('\n') + '\n';
+
+  return code.replace(fnName, replacement);
+}
+
+/**
+ * Replace esbuild's `__require("ext")` calls with proper ESM imports.
+ *
+ * esbuild generates `__require("react")` for CJS external dependencies in ESM
+ * format, which throws at runtime. We find ALL `__require("...")` calls,
+ * add ESM `import * as` declarations at the top, and replace each call
+ * with the namespace reference.
+ */
+function patchExternalRequires(code: string): string {
+  // Find all unique __require("specifier") calls
+  const matches = new Set<string>();
+  for (const m of code.matchAll(/__require\(["']([^"']+)["']\)/g)) {
+    matches.add(m[1]);
+  }
+  if (matches.size === 0) return code;
+
+  const specs = [...matches];
+  const imports = specs.map((ext, i) =>
+    `import * as __ext${i} from "${ext}";`
+  ).join('\n');
+
+  let patched = code;
+  for (let i = 0; i < specs.length; i++) {
+    const ext = specs[i];
+    patched = patched.split(`__require("${ext}")`).join(`__ext${i}`);
+    patched = patched.split(`__require('${ext}')`).join(`__ext${i}`);
+  }
+
+  return imports + '\n' + patched;
+}
+
+/**
+ * Bundle an npm package from VFS node_modules into a single ESM file.
+ *
+ * @param specifier - The bare npm specifier (e.g., "@ai-sdk/react", "zod/v4")
+ * @returns The bundled ESM code string
+ */
+export async function bundleNpmModuleForBrowser(specifier: string): Promise<string> {
+  // Check cache first
+  const cached = bundleCache.get(specifier);
+  if (cached) return cached;
+
+  // Resolve the CJS entry point directly to avoid .mjs module format issues.
+  // All packages in VFS have been ESM→CJS transformed during install,
+  // so we prefer the `require` condition to get a native .js/.cjs file
+  // that esbuild can correctly detect as CJS and extract named exports.
+  const entryPath = resolvePackageEntry(specifier);
+
+  // Extract named exports from the CJS entry before bundling.
+  // esbuild can't statically extract named exports from CJS, so we
+  // parse the entry file for __export() patterns and post-process.
+  let exportNames: string[] = [];
+  if (entryPath && moduleVFS) {
+    try {
+      const entryContent = moduleVFS.readFileSync(entryPath, 'utf8');
+      exportNames = extractCjsExportNames(entryContent);
+    } catch { /* ignore read errors */ }
+  }
+
+  let result: BuildResult;
+
+  if (entryPath) {
+    // Use the resolved CJS entry as a direct entry point
+    result = await build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: 'esm',
+      target: 'esnext',
+      external: ALWAYS_EXTERNAL,
+      write: false,
+    });
+  } else {
+    // Fallback: use stdin with bare specifier (for packages without exports field)
+    const virtualEntry = `export * from '${specifier}';\n`;
+    result = await build({
+      stdin: {
+        contents: virtualEntry,
+        resolveDir: '/node_modules',
+        loader: 'js',
+      },
+      bundle: true,
+      format: 'esm',
+      target: 'esnext',
+      external: ALWAYS_EXTERNAL,
+      write: false,
+    });
+  }
+
+  if (!result.outputFiles || result.outputFiles.length === 0) {
+    throw new Error(`esbuild produced no output for '${specifier}'`);
+  }
+
+  // esbuild-wasm's outputFiles have `contents` (Uint8Array) and `text` (getter)
+  // Use contents + TextDecoder as a reliable fallback
+  const outFile = result.outputFiles[0];
+  let code = outFile.text;
+  if (!code && outFile.contents && outFile.contents.length > 0) {
+    code = new TextDecoder().decode(outFile.contents);
+  }
+
+  if (!code) {
+    throw new Error(`esbuild produced empty output for '${specifier}' (entry: ${entryPath || 'stdin'})`);
+  }
+
+  // Post-process: replace __require("ext") with ESM imports
+  code = patchExternalRequires(code);
+
+  // Post-process: add named ESM exports for CJS bundles
+  if (exportNames.length > 0) {
+    code = addNamedExports(code, exportNames);
+  }
+
+  bundleCache.set(specifier, code);
+  return code;
+}
diff --git a/src/frameworks/vfs-require.ts b/src/frameworks/vfs-require.ts
new file mode 100644
index 0000000..db82591
--- /dev/null
+++ b/src/frameworks/vfs-require.ts
@@ -0,0 +1,256 @@
+/**
+ * VFS-based module resolution and loading for API route handlers.
+ *
+ * Lightweight module loader extracted from Runtime (src/runtime.ts).
+ * Resolves and loads CJS modules from VirtualFS node_modules so API
+ * route handlers can `require()` npm packages installed via PackageManager.
+ *
+ * Packages are expected to be pre-transformed to CJS by PackageManager
+ * (via esbuild-wasm). A safety-net ESM→CJS transform is applied for
+ * any files that weren't pre-transformed.
+ */
+
+import { VirtualFS } from '../virtual-fs';
+import { resolve as resolveExports } from 'resolve.exports';
+import * as pathShim from '../shims/path';
+import { transformEsmToCjsSimple } from './code-transforms';
+import type { PackageJson } from '../types/package-json';
+
+export interface VfsModule {
+  id: string;
+  filename: string;
+  exports: unknown;
+  loaded: boolean;
+}
+
+export interface VfsRequireOptions {
+  /** Builtin modules (node shims + user-supplied apiModules) */
+  builtinModules: Record<string, unknown>;
+  /** Process object to inject into loaded modules */
+  process: Record<string, unknown>;
+  /** Shared module cache (persists across requests). If not provided, a new one is created. */
+  moduleCache?: Record<string, VfsModule>;
+}
+
+/**
+ * Create a require() function that resolves modules from VFS.
+ *
+ * Resolution order:
+ * 1. Builtin modules (node shims + apiModules)
+ * 2. Bare package imports from /node_modules/ (walking up directories)
+ * 3. Relative paths within packages
+ *
+ * Handles package.json exports, browser, module, main fields.
+ * Handles JSON files, CJS stub detection, and module caching.
+ */
+export function createVfsRequire(
+  vfs: VirtualFS,
+  fromDir: string,
+  options: VfsRequireOptions,
+): { require: (id: string) => unknown; moduleCache: Record<string, VfsModule> } {
+  const { builtinModules, process } = options;
+  const moduleCache = options.moduleCache || {};
+
+  // Package.json parsing cache (resolution-only, not module instances)
+  const packageJsonCache = new Map<string, PackageJson | null>();
+
+  function getParsedPackageJson(pkgPath: string): PackageJson | null {
+    if (packageJsonCache.has(pkgPath)) return packageJsonCache.get(pkgPath)!;
+    try {
+      const content = vfs.readFileSync(pkgPath, 'utf8');
+      const parsed = JSON.parse(content) as PackageJson;
+      packageJsonCache.set(pkgPath, parsed);
+      return parsed;
+    } catch {
+      packageJsonCache.set(pkgPath, null);
+      return null;
+    }
+  }
+
+  // ── Resolution ──
+
+  function tryResolveFile(basePath: string): string | null {
+    // Exact path
+    if (vfs.existsSync(basePath)) {
+      try {
+        const stats = vfs.statSync(basePath);
+        if (stats.isFile()) return basePath;
+        // Directory → index.js
+        const indexPath = pathShim.join(basePath, 'index.js');
+        if (vfs.existsSync(indexPath)) return indexPath;
+      } catch { /* ignore */ }
+    }
+    // Try extensions
+    for (const ext of ['.js', '.json']) {
+      const withExt = basePath + ext;
+      if (vfs.existsSync(withExt)) return withExt;
+    }
+    return null;
+  }
+
+  function tryResolveFromNodeModules(nodeModulesDir: string, moduleId: string): string | null {
+    const parts = moduleId.split('/');
+    const pkgName = parts[0].startsWith('@') && parts.length > 1
+      ? `${parts[0]}/${parts[1]}`
+      : parts[0];
+
+    const pkgRoot = pathShim.join(nodeModulesDir, pkgName);
+    const pkgPath = pathShim.join(pkgRoot, 'package.json');
+
+    const pkg = getParsedPackageJson(pkgPath);
+    if (pkg) {
+      // Use resolve.exports to handle the exports field
+      if (pkg.exports) {
+        for (const conditions of [{ require: true }, { import: true }] as const) {
+          try {
+            const resolved = resolveExports(pkg, moduleId, conditions);
+            if (resolved && resolved.length > 0) {
+              const fullExportPath = pathShim.join(pkgRoot, resolved[0]);
+              const resolvedFile = tryResolveFile(fullExportPath);
+              if (resolvedFile) {
+                // Skip CJS stub files that just throw
+                if (resolvedFile.endsWith('.cjs')) {
+                  try {
+                    const content = vfs.readFileSync(resolvedFile, 'utf8') as string;
+                    if (content.trimStart().startsWith('throw ')) continue;
+                  } catch { /* proceed */ }
+                }
+                return resolvedFile;
+              }
+            }
+          } catch { /* resolveExports throws if no match, try next */ }
+        }
+      }
+
+      // If root import (no sub-path), use browser/module/main
+      if (pkgName === moduleId) {
+        let main: string | undefined;
+        if (typeof pkg.browser === 'string') main = pkg.browser;
+        if (!main && pkg.module) main = pkg.module as string;
+        if (!main) main = pkg.main || 'index.js';
+        const resolvedMain = tryResolveFile(pathShim.join(pkgRoot, main));
+        if (resolvedMain) return resolvedMain;
+      }
+    }
+
+    // Fallback: direct file/directory resolution for sub-paths
+    const fullPath = pathShim.join(nodeModulesDir, moduleId);
+    return tryResolveFile(fullPath);
+  }
+
+  function resolveModule(id: string, currentDir: string): string {
+    // Relative or absolute path
+    if (id.startsWith('./') || id.startsWith('../') || id.startsWith('/')) {
+      const resolved = tryResolveFile(pathShim.resolve(currentDir, id));
+      if (resolved) return resolved;
+      throw new Error(`Cannot find module '${id}'`);
+    }
+
+    // Walk up directories looking for node_modules
+    let searchDir = currentDir;
+    while (true) {
+      const nodeModulesDir = pathShim.join(searchDir, 'node_modules');
+      const resolved = tryResolveFromNodeModules(nodeModulesDir, id);
+      if (resolved) return resolved;
+
+      const parent = pathShim.dirname(searchDir);
+      if (parent === searchDir) break;
+      searchDir = parent;
+    }
+
+    // Try root node_modules as last resort
+    const rootResolved = tryResolveFromNodeModules('/node_modules', id);
+    if (rootResolved) return rootResolved;
+
+    throw new Error(`Cannot find module '${id}'`);
+  }
+
+  // ── Loading ──
+
+  function loadModule(resolvedPath: string): VfsModule {
+    // Return cached module
+    if (moduleCache[resolvedPath]) return moduleCache[resolvedPath];
+
+    const mod: VfsModule = {
+      id: resolvedPath,
+      filename: resolvedPath,
+      exports: {},
+      loaded: false,
+    };
+
+    // Cache before loading (circular dependency support)
+    moduleCache[resolvedPath] = mod;
+
+    // Evict oldest if cache too large
+    const keys = Object.keys(moduleCache);
+    if (keys.length > 2000) delete moduleCache[keys[0]];
+
+    // JSON files
+    if (resolvedPath.endsWith('.json')) {
+      mod.exports = JSON.parse(vfs.readFileSync(resolvedPath, 'utf8'));
+      mod.loaded = true;
+      return mod;
+    }
+
+    // JS files
+    let code = vfs.readFileSync(resolvedPath, 'utf8');
+    const dirname = pathShim.dirname(resolvedPath);
+
+    // Strip shebang
+    if (code.startsWith('#!')) {
+      code = code.slice(code.indexOf('\n') + 1);
+    }
+
+    // Safety-net ESM→CJS transform (packages should already be CJS from PackageManager)
+    if (!resolvedPath.endsWith('.cjs')) {
+      const hasEsm = /\bimport\b|\bexport\b/.test(code);
+      if (hasEsm) {
+        code = transformEsmToCjsSimple(code);
+      }
+    }
+
+    // Create require scoped to this module's directory
+    const moduleRequire = (id: string) => requireFn(id, dirname);
+
+    // Execute module code
+    try {
+      const moduleObj = { exports: mod.exports as Record<string, unknown> };
+      const fn = new Function(
+        'exports', 'require', 'module', '__filename', '__dirname', 'process',
+        code,
+      );
+      fn(moduleObj.exports, moduleRequire, moduleObj, resolvedPath, dirname, process);
+
+      // Update exports (module.exports may have been reassigned)
+      mod.exports = moduleObj.exports;
+      mod.loaded = true;
+    } catch (error) {
+      delete moduleCache[resolvedPath];
+      if (error instanceof Error && !error.message.includes('(in /')) {
+        error.message = `${error.message} (in ${resolvedPath})`;
+      }
+      throw error;
+    }
+
+    return mod;
+  }
+
+  // ── Public require function ──
+
+  function requireFn(id: string, currentDir: string): unknown {
+    // Strip node: prefix
+    const modId = id.startsWith('node:') ? id.slice(5) : id;
+
+    // Builtins first
+    if (builtinModules[modId]) return builtinModules[modId];
+
+    // Resolve from VFS
+    const resolved = resolveModule(modId, currentDir);
+    return loadModule(resolved).exports;
+  }
+
+  return {
+    require: (id: string) => requireFn(id, fromDir),
+    moduleCache,
+  };
+}
diff --git a/src/frameworks/vite-dev-server.ts b/src/frameworks/vite-dev-server.ts
index df9c2bf..7fd580e 100644
--- a/src/frameworks/vite-dev-server.ts
+++ b/src/frameworks/vite-dev-server.ts
@@ -8,7 +8,7 @@ import { VirtualFS } from '../virtual-fs';
 import { Buffer } from '../shims/stream';
 import { simpleHash } from '../utils/hash';
 import { addReactRefresh as _addReactRefresh } from './code-transforms';
-import { ESBUILD_WASM_ESM_CDN, ESBUILD_WASM_BINARY_CDN, REACT_REFRESH_CDN } from '../config/cdn';
+import { ESBUILD_WASM_ESM_CDN, ESBUILD_WASM_BINARY_CDN, REACT_REFRESH_CDN, REACT_CDN, REACT_DOM_CDN } from '../config/cdn';
 
 // Check if we're in a real browser environment (not jsdom or Node.js)
 // jsdom has window but doesn't have ServiceWorker or SharedArrayBuffer
@@ -627,6 +627,26 @@ export default css;
     try {
       let content = this.vfs.readFileSync(filePath, 'utf8');
 
+      // Inject a React import map if the HTML doesn't already have one.
+      // This lets seed HTML omit the esm.sh boilerplate — the platform provides it.
+      if (!content.includes('"importmap"')) {
+        const importMap = `<script type="importmap">
+{
+  "imports": {
+    "react": "${REACT_CDN}?dev",
+    "react/": "${REACT_CDN}&dev/",
+    "react-dom": "${REACT_DOM_CDN}?dev",
+    "react-dom/": "${REACT_DOM_CDN}&dev/"
+  }
+}
+</script>`;
+        if (content.includes('</head>')) {
+          content = content.replace('</head>', `${importMap}\n</head>`);
+        } else if (content.includes('<head>')) {
+          content = content.replace('<head>', `<head>\n${importMap}`);
+        }
+      }
+
       // Inject React Refresh preamble before any app module scripts.
       // Firefox requires all <script type="importmap"> to appear before any <script type="module">,
       // so if the HTML contains an import map, inject AFTER the last one (not right after <head>).
diff --git a/src/npm/registry.ts b/src/npm/registry.ts
index 94a13e1..32fcf5f 100644
--- a/src/npm/registry.ts
+++ b/src/npm/registry.ts
@@ -9,6 +9,7 @@ export interface PackageVersion {
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
   peerDependencies?: Record<string, string>;
+  peerDependenciesMeta?: Record<string, { optional?: boolean }>;
   optionalDependencies?: Record<string, string>;
   dist: {
     tarball: string;
diff --git a/src/npm/resolver.ts b/src/npm/resolver.ts
index 3674c03..981f933 100644
--- a/src/npm/resolver.ts
+++ b/src/npm/resolver.ts
@@ -359,7 +359,21 @@ async function resolvePackage(
     resolved.set(packageName, resolvedPackage);
 
     // Resolve dependencies in parallel
-    const deps = { ...versionData.dependencies };
+    // Include non-optional peerDependencies (npm v7+ behavior).
+    // Peer deps marked optional in peerDependenciesMeta are skipped.
+    const deps: Record<string, string> = {};
+
+    if (versionData.peerDependencies) {
+      const meta = versionData.peerDependenciesMeta || {};
+      for (const [name, range] of Object.entries(versionData.peerDependencies)) {
+        if (!meta[name]?.optional) {
+          deps[name] = range;
+        }
+      }
+    }
+
+    // Regular dependencies override peer deps
+    Object.assign(deps, versionData.dependencies);
 
     if (options.includeOptional && versionData.optionalDependencies) {
       Object.assign(deps, versionData.optionalDependencies);
diff --git a/src/npm/tarball.ts b/src/npm/tarball.ts
index 55c720e..12708b6 100644
--- a/src/npm/tarball.ts
+++ b/src/npm/tarball.ts
@@ -74,12 +74,14 @@ function* parseTar(data: Uint8Array): Generator<TarEntry> {
         type = 'unknown';
     }
 
-    // Read file content
+    // Read file content (empty files get an empty Uint8Array)
     let content: Uint8Array | undefined;
-    if (type === 'file' && size > 0) {
-      content = data.slice(offset, offset + size);
-      // Move past content, rounded up to 512-byte boundary
-      offset += Math.ceil(size / 512) * 512;
+    if (type === 'file') {
+      content = size > 0 ? data.slice(offset, offset + size) : new Uint8Array(0);
+      if (size > 0) {
+        // Move past content, rounded up to 512-byte boundary
+        offset += Math.ceil(size / 512) * 512;
+      }
     }
 
     yield {
diff --git a/src/shims/esbuild.ts b/src/shims/esbuild.ts
index c2f9abd..7bb0364 100644
--- a/src/shims/esbuild.ts
+++ b/src/shims/esbuild.ts
@@ -6,6 +6,19 @@
 import type { VirtualFS } from '../virtual-fs';
 import { ESBUILD_WASM_BINARY_CDN, ESBUILD_WASM_BROWSER_CDN } from '../config/cdn';
 
+/**
+ * Node.js built-in module names. Used by the VFS plugin to provide empty stubs
+ * for builtins that leak as transitive deps (e.g., `path` from `@vercel/oidc`).
+ */
+const NODE_BUILTINS = new Set([
+  'assert', 'buffer', 'child_process', 'cluster', 'crypto', 'dgram', 'dns',
+  'events', 'fs', 'http', 'http2', 'https', 'net', 'os', 'path', 'perf_hooks',
+  'querystring', 'readline', 'stream', 'string_decoder', 'timers', 'tls',
+  'url', 'util', 'v8', 'vm', 'worker_threads', 'zlib', 'async_hooks',
+  'inspector', 'module', 'process', 'console', 'constants', 'domain',
+  'punycode', 'sys', 'tty',
+]);
+
 // ============================================================================
 // Type Definitions
 // ============================================================================
@@ -85,6 +98,7 @@ export interface TransformResult {
 
 export interface BuildOptions {
   entryPoints?: string[];
+  stdin?: { contents: string; resolveDir?: string; loader?: 'js' | 'jsx' | 'ts' | 'tsx' | 'json' | 'css' };
   bundle?: boolean;
   outdir?: string;
   outfile?: string;
@@ -255,10 +269,13 @@ function resolveNodeModuleImport(
     : pathParts.slice(1).join('/');      // Everything after "pkg/"
 
   // Check if the package exists in VFS node_modules
-  const nodeModulesBase = '/project/node_modules/' + moduleName;
-
+  // Try /node_modules/ first (dev server), then /project/node_modules/ (convex)
+  let nodeModulesBase = '/node_modules/' + moduleName;
   if (!vfs.existsSync(nodeModulesBase)) {
-    return null;
+    nodeModulesBase = '/project/node_modules/' + moduleName;
+    if (!vfs.existsSync(nodeModulesBase)) {
+      return null;
+    }
   }
 
   // Read package.json to determine the entry point
@@ -539,15 +556,26 @@ function remapVFSPath(path: string): string {
 function findVFSFile(vfs: VirtualFS, originalPath: string, extensions: string[]): string | null {
   for (const ext of extensions) {
     const pathWithExt = originalPath + ext;
-    // First check original path
+    // First check original path — must be a file, not a directory
     if (vfs.existsSync(pathWithExt)) {
-      return pathWithExt;
+      try {
+        if (!vfs.statSync(pathWithExt).isDirectory()) {
+          return pathWithExt;
+        }
+      } catch {
+        return pathWithExt;
+      }
     }
     // Then try remapped path
     const remapped = remapVFSPath(pathWithExt);
     if (remapped !== pathWithExt && vfs.existsSync(remapped)) {
-      // Return original path (not remapped) to preserve esbuild output naming
-      return pathWithExt;
+      try {
+        if (!vfs.statSync(remapped).isDirectory()) {
+          return pathWithExt;
+        }
+      } catch {
+        return pathWithExt;
+      }
     }
   }
   return null;
@@ -569,7 +597,7 @@ function findVFSFile(vfs: VirtualFS, originalPath: string, extensions: string[])
  * 2. Relative paths (./file.ts, ../file.ts)
  * 3. Bare imports (convex/server, react)
  */
-function createVFSPlugin(): unknown {
+function createVFSPlugin(externals?: string[]): unknown {
   if (!globalVFS) {
     return null;
   }
@@ -584,6 +612,19 @@ function createVFSPlugin(): unknown {
         onLoad: (options: { filter: RegExp; namespace?: string }, callback: (args: { path: string }) => unknown) => void;
       };
 
+      // Helper: Normalize .mjs/.cjs paths to .js so esbuild auto-detects
+      // module format. Packages in VFS were ESM→CJS transformed during install
+      // but keep their original .mjs extension. esbuild forces ESM parsing for
+      // .mjs files even when content is CJS, breaking export detection.
+      // We store the real path in pluginData for onLoad to read from VFS.
+      function vfsResolved(foundPath: string) {
+        if (foundPath.endsWith('.mjs') || foundPath.endsWith('.cjs')) {
+          const jsPath = foundPath.slice(0, -4) + '.js';
+          return { path: jsPath, pluginData: { fromVFS: true, realPath: foundPath } };
+        }
+        return { path: foundPath, pluginData: { fromVFS: true } };
+      }
+
       // Resolve file paths - handles both imports and entry points
       b.onResolve({ filter: /.*/ }, (args: { path: string; importer: string }) => {
         const { path: importPath, importer } = args;
@@ -593,13 +634,13 @@ function createVFSPlugin(): unknown {
           return { external: true };
         }
 
-        const extensions = ['', '.ts', '.tsx', '.js', '.jsx', '.json'];
+        const extensions = ['', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.json'];
 
         // Absolute paths - check if file exists in VFS (or remapped location)
         if (importPath.startsWith('/')) {
           const foundPath = findVFSFile(vfs, importPath, extensions);
           if (foundPath) {
-            return { path: foundPath, pluginData: { fromVFS: true } };
+            return vfsResolved(foundPath);
           }
           // File not found
           return { external: true };
@@ -609,6 +650,7 @@ function createVFSPlugin(): unknown {
         if (importPath.startsWith('.')) {
           let resolved = importPath;
           if (importer) {
+            // Use realPath from pluginData if the importer was remapped from .mjs/.cjs
             const importerDir = importer.substring(0, importer.lastIndexOf('/'));
             resolved = importerDir + '/' + importPath;
           }
@@ -627,7 +669,7 @@ function createVFSPlugin(): unknown {
           // Try to find the file with various extensions
           const foundPath = findVFSFile(vfs, resolved, extensions);
           if (foundPath) {
-            return { path: foundPath, pluginData: { fromVFS: true } };
+            return vfsResolved(foundPath);
           }
 
           // Try index files
@@ -635,7 +677,7 @@ function createVFSPlugin(): unknown {
             const indexPath = resolved + '/index' + ext;
             const foundIndex = findVFSFile(vfs, indexPath, ['']);
             if (foundIndex) {
-              return { path: foundIndex, pluginData: { fromVFS: true } };
+              return vfsResolved(foundIndex);
             }
           }
         }
@@ -643,40 +685,66 @@ function createVFSPlugin(): unknown {
         // Bare imports (no ./ or ../ or /) - resolve from node_modules in VFS
         // See resolveNodeModuleImport() JSDoc for why we resolve from VFS instead of
         // marking as external (browser bundling, VFS isolation, consistent builds)
+
+        // Check externals list first — packages like react must stay as ESM imports
+        if (externals && externals.some(ext => importPath === ext || importPath.startsWith(ext + '/'))) {
+          return { external: true };
+        }
+
         const resolution = resolveNodeModuleImport(vfs, importPath, extensions);
         if (resolution) {
+          // Apply .mjs/.cjs normalization for bare imports too
+          if (resolution.path && (resolution.path.endsWith('.mjs') || resolution.path.endsWith('.cjs'))) {
+            const jsPath = resolution.path.slice(0, -4) + '.js';
+            return { path: jsPath, pluginData: { ...resolution.pluginData, realPath: resolution.path } };
+          }
           return resolution;
         }
 
+        // Node.js builtins that aren't in VFS node_modules should be
+        // stubbed as empty modules rather than externalized. When externalized,
+        // patchExternalRequires() converts them to bare ESM imports that the
+        // browser can't resolve. An empty stub is safe because these builtins
+        // are typically only used in server-only code paths (e.g., @vercel/oidc).
+        const bareModule = importPath.replace(/^node:/, '');
+        if (NODE_BUILTINS.has(bareModule)) {
+          return { path: `/__node_stub__/${bareModule}`, namespace: 'node-stub' };
+        }
+
         // Could not resolve from node_modules, treat as external
         return { external: true };
       });
 
+      // Load empty stubs for Node.js builtins not available in VFS
+      b.onLoad({ filter: /.*/, namespace: 'node-stub' }, () => {
+        return { contents: 'module.exports = {};', loader: 'js' as const };
+      });
+
       // Load file contents from VFS
       // Apply path remapping when reading to find the actual file
-      b.onLoad({ filter: /^\/.*/ }, (args: { path: string; pluginData?: { fromVFS?: boolean } }) => {
+      b.onLoad({ filter: /^\/.*/ }, (args: { path: string; pluginData?: { fromVFS?: boolean; realPath?: string } }) => {
         // Only handle files that were resolved by our plugin
         if (!args.pluginData?.fromVFS) {
           return null; // Let other loaders handle it
         }
         try {
-          // Try original path first, then remapped path
+          // Use realPath if available (set when .mjs/.cjs was normalized to .js)
+          const vfsPath = args.pluginData.realPath || args.path;
           let contents: string;
-          const originalPath = args.path;
-          const remappedPath = remapVFSPath(originalPath);
+          const remappedPath = remapVFSPath(vfsPath);
 
-          if (vfs.existsSync(originalPath)) {
-            contents = vfs.readFileSync(originalPath, 'utf8');
-          } else if (remappedPath !== originalPath && vfs.existsSync(remappedPath)) {
+          if (vfs.existsSync(vfsPath)) {
+            contents = vfs.readFileSync(vfsPath, 'utf8');
+          } else if (remappedPath !== vfsPath && vfs.existsSync(remappedPath)) {
             contents = vfs.readFileSync(remappedPath, 'utf8');
           } else {
-            throw new Error(`File not found: ${originalPath} (tried ${remappedPath})`);
+            throw new Error(`File not found: ${vfsPath} (tried ${remappedPath})`);
           }
 
-          const ext = originalPath.substring(originalPath.lastIndexOf('.'));
+          const ext = args.path.substring(args.path.lastIndexOf('.'));
           let loader: 'ts' | 'tsx' | 'js' | 'jsx' | 'json' = 'ts';
           if (ext === '.tsx') loader = 'tsx';
-          else if (ext === '.js') loader = 'js';
+          else if (ext === '.js' || ext === '.mjs' || ext === '.cjs') loader = 'js';
           else if (ext === '.jsx') loader = 'jsx';
           else if (ext === '.json') loader = 'json';
 
@@ -706,7 +774,7 @@ export async function build(options: BuildOptions): Promise<BuildResult> {
   }
 
   // Add VFS plugin if VFS is available
-  const vfsPlugin = createVFSPlugin();
+  const vfsPlugin = createVFSPlugin(options.external);
   const plugins = [...(options.plugins || [])];
   if (vfsPlugin) {
     plugins.unshift(vfsPlugin);
diff --git a/src/vercel-ai-sdk-demo-entry.ts b/src/vercel-ai-sdk-demo-entry.ts
index 016cf1d..0c81f09 100644
--- a/src/vercel-ai-sdk-demo-entry.ts
+++ b/src/vercel-ai-sdk-demo-entry.ts
@@ -4,11 +4,10 @@
  */
 
 import { VirtualFS } from './virtual-fs';
-import { Runtime } from './runtime';
 import { NextDevServer } from './frameworks/next-dev-server';
 import { getServerBridge } from './server-bridge';
-import { Buffer } from './shims/stream';
 import { createAIChatbotProject } from './vercel-ai-sdk-demo';
+import { PackageManager } from './npm/index';
 
 // DOM elements
 const logsEl = document.getElementById('logs') as HTMLDivElement;
@@ -114,27 +113,30 @@ async function main() {
     createAIChatbotProject(vfs);
     log('Project files created', 'success');
 
-    setStatus('Initializing runtime...', 'loading');
-    log('Initializing runtime...');
-    const runtime = new Runtime(vfs, {
-      cwd: '/',
-      env: { NODE_ENV: 'development' },
-      onConsole: (method, args) => {
-        const msg = args.map(a => String(a)).join(' ');
-        if (method === 'error') log(msg, 'error');
-        else if (method === 'warn') log(msg, 'warn');
-        else log(msg);
-      },
-    });
+    // Install AI SDK packages via PackageManager
+    setStatus('Installing packages...', 'loading');
+    log('Installing npm packages...');
+    const pm = new PackageManager(vfs, { cwd: '/' });
+    const packages = ['zod', 'ai@5', '@ai-sdk/openai@2', '@ai-sdk/react@2'];
+    for (const pkg of packages) {
+      log(`Installing ${pkg}...`);
+      await pm.install(pkg, {
+        onProgress: (msg) => log(msg),
+        transform: true,
+      });
+    }
+    log('All packages installed', 'success');
 
     setStatus('Starting dev server...', 'loading');
     log('Starting Next.js dev server...');
 
     const port = 3003;
+    const corsProxy = new URLSearchParams(window.location.search).get('corsProxy') || undefined;
     devServer = new NextDevServer(vfs, {
       port,
       root: '/',
       preferAppRouter: true,
+      corsProxy,
     });
 
     const bridge = getServerBridge();
@@ -147,36 +149,7 @@ async function main() {
       log(`Service Worker warning: ${error}`, 'warn');
     }
 
-    // Create HTTP server wrapper
-    const httpServer = {
-      listening: true,
-      address: () => ({ port, address: '0.0.0.0', family: 'IPv4' }),
-      async handleRequest(
-        method: string,
-        url: string,
-        headers: Record<string, string>,
-        body?: string | Buffer
-      ) {
-        const bodyBuffer = body
-          ? typeof body === 'string' ? Buffer.from(body) : body
-          : undefined;
-        return devServer!.handleRequest(method, url, headers, bodyBuffer);
-      },
-      // Streaming request handler - forwards to devServer's streaming support
-      async handleStreamingRequest(
-        method: string,
-        url: string,
-        headers: Record<string, string>,
-        body: Buffer | undefined,
-        onStart: (statusCode: number, statusMessage: string, headers: Record<string, string>) => void,
-        onChunk: (chunk: string | Uint8Array) => void,
-        onEnd: () => void
-      ) {
-        return devServer!.handleStreamingRequest(method, url, headers, body, onStart, onChunk, onEnd);
-      },
-    };
-
-    bridge.registerServer(httpServer as any, port);
+    bridge.registerServer(devServer as any, port);
     devServer.start();
 
     serverUrl = bridge.getServerUrl(port) + '/';
diff --git a/src/vercel-ai-sdk-demo.ts b/src/vercel-ai-sdk-demo.ts
index e27f114..9244c35 100644
--- a/src/vercel-ai-sdk-demo.ts
+++ b/src/vercel-ai-sdk-demo.ts
@@ -26,8 +26,10 @@ const PACKAGE_JSON = {
     "next": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ai": "^4.0.0",
-    "@ai-sdk/openai": "^1.0.0",
+    "ai": "^5.0.0",
+    "@ai-sdk/openai": "^2.0.0",
+    "@ai-sdk/react": "^2.0.0",
+    "zod": "^3.0.0",
   },
   devDependencies: {
     "@types/node": "^20",
@@ -173,53 +175,51 @@ export default function RootLayout({
 `);
 
   // Create home page with chat UI (App Router)
+  // Uses @ai-sdk/react useChat hook (AI SDK v5 API: sendMessage, status)
   vfs.writeFileSync('/app/page.tsx', `"use client";
 
 import React from 'react';
-import { useChat } from 'ai/react';
-
-// Get the virtual base path for API calls
-// The iframe runs at /__virtual__/PORT/ so we need to prefix API calls
-function getApiUrl(path: string): string {
-  const match = window.location.pathname.match(/^(\\/__virtual__\\/\\d+)/);
-  if (match) {
-    return match[1] + path;
-  }
-  return path;
-}
+import { useChat } from '@ai-sdk/react';
 
 export default function ChatPage() {
-  // Use the correct API URL based on the virtual base path
-  const apiUrl = React.useMemo(() => getApiUrl('/api/chat'), []);
+  var loc = typeof window !== 'undefined' ? window.location : null;
+  var basePath = loc
+    ? (loc.pathname.endsWith('/') ? loc.pathname.slice(0, -1) : loc.pathname)
+    : '';
 
-  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
-    api: apiUrl,
-    onResponse: (response) => {
-      console.log('[useChat] onResponse - status:', response.status, 'headers:', Object.fromEntries(response.headers.entries()));
-    },
-    onFinish: (message) => {
-      console.log('[useChat] onFinish - message:', message);
-    },
-    onError: (err) => {
-      console.error('[useChat] onError:', err);
-    },
+  var [input, setInput] = React.useState('');
+  var bottomRef = React.useRef(null);
+
+  var { messages, sendMessage, status, error } = useChat({
+    api: basePath + '/api/chat',
   });
 
-  // Debug: log messages changes
-  React.useEffect(() => {
-    console.log('[ChatPage] messages updated:', messages.length, messages.map(m => ({ role: m.role, contentLength: m.content.length })));
+  var isLoading = status === 'submitted' || status === 'streaming';
+
+  React.useEffect(function() {
+    if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
-  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    sendMessage({ role: 'user', content: input });
+    setInput('');
+  }
 
-  // Auto-scroll to bottom when new messages arrive
-  React.useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  function getMessageText(msg) {
+    if (typeof msg.content === 'string') return msg.content;
+    if (Array.isArray(msg.parts)) {
+      return msg.parts
+        .filter(function(p) { return p.type === 'text'; })
+        .map(function(p) { return p.text; })
+        .join('');
+    }
+    return '';
+  }
 
   return (
     <div className="chat-container">
-      {/* Welcome message when no messages */}
       {messages.length === 0 && (
         <div className="text-center py-12">
           <div className="text-6xl mb-4">💬</div>
@@ -233,30 +233,28 @@ export default function ChatPage() {
         </div>
       )}
 
-      {/* Messages list */}
       <div className="space-y-4 pb-32">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={\`message-bubble \${
-              message.role === 'user' ? 'message-user' : 'message-assistant'
-            }\`}
-          >
-            <div className="flex items-start gap-3">
-              <span className="text-lg">
-                {message.role === 'user' ? '👤' : '🤖'}
-              </span>
-              <div className="flex-1">
-                <p className="font-medium text-sm opacity-70 mb-1">
-                  {message.role === 'user' ? 'You' : 'Assistant'}
-                </p>
-                <div className="whitespace-pre-wrap">{message.content}</div>
+        {messages.map(function(message) {
+          return (
+            <div
+              key={message.id}
+              className={'message-bubble ' + (message.role === 'user' ? 'message-user' : 'message-assistant')}
+            >
+              <div className="flex items-start gap-3">
+                <span className="text-lg">
+                  {message.role === 'user' ? '👤' : '🤖'}
+                </span>
+                <div className="flex-1">
+                  <p className="font-medium text-sm opacity-70 mb-1">
+                    {message.role === 'user' ? 'You' : 'Assistant'}
+                  </p>
+                  <div className="whitespace-pre-wrap">{getMessageText(message)}</div>
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
 
-        {/* Loading indicator - only show when waiting for response to start streaming */}
         {isLoading && messages.length > 0 && messages[messages.length - 1].role === 'user' && (
           <div className="message-bubble message-assistant">
             <div className="flex items-start gap-3">
@@ -269,7 +267,6 @@ export default function ChatPage() {
           </div>
         )}
 
-        {/* Error message */}
         {error && (
           <div className="message-bubble bg-red-100 text-red-700">
             <div className="flex items-start gap-3">
@@ -282,16 +279,15 @@ export default function ChatPage() {
           </div>
         )}
 
-        <div ref={messagesEndRef} />
+        <div ref={bottomRef} />
       </div>
 
-      {/* Input form */}
       <div className="input-container">
         <form onSubmit={handleSubmit} className="flex gap-3">
           <input
             type="text"
             value={input}
-            onChange={handleInputChange}
+            onChange={function(e) { setInput(e.target.value); }}
             placeholder="Type your message..."
             disabled={isLoading}
             className="flex-1 px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-50 disabled:cursor-not-allowed"
@@ -301,17 +297,7 @@ export default function ChatPage() {
             disabled={isLoading || !input.trim()}
             className="px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
           >
-            {isLoading ? (
-              <span className="flex items-center gap-2">
-                <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                </svg>
-                Sending
-              </span>
-            ) : (
-              'Send'
-            )}
+            {isLoading ? 'Sending...' : 'Send'}
           </button>
         </form>
         <p className="text-xs text-gray-400 mt-2 text-center">
@@ -323,179 +309,73 @@ export default function ChatPage() {
 }
 `);
 
-  // Create API route for chat (Pages Router - works in our environment)
-  // Uses CORS proxy to call OpenAI from browser
-  vfs.writeFileSync('/pages/api/chat.ts', `/**
- * AI Chat API Route
- *
- * This endpoint handles chat requests using the Vercel AI SDK.
- * It uses a CORS proxy (corsproxy.io) to make OpenAI API calls
- * from the browser environment.
- */
+  // Create API route for chat (Pages Router — proven streaming pattern)
+  // Uses real AI SDK with CORS proxy for OpenAI calls from browser.
+  // For this simple chatbot (no tools) we skip convertToModelMessages and
+  // pass {role, content} CoreMessages directly to streamText.
+  vfs.writeFileSync('/pages/api/chat.ts', `import { streamText } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
 
-import type { NextApiRequest, NextApiResponse } from 'next';
-
-// Get API key from environment and sanitize it
-const getApiKey = () => {
-  // Debug: log what we're seeing
-  console.log('[API /chat] getApiKey called');
-  console.log('[API /chat] typeof process:', typeof process);
-  console.log('[API /chat] process.env keys:', typeof process !== 'undefined' && process.env ? Object.keys(process.env) : 'N/A');
-
-  // Check process.env (set by demo entry)
-  if (typeof process !== 'undefined' && process.env?.OPENAI_API_KEY) {
-    const rawKey = process.env.OPENAI_API_KEY;
-    console.log('[API /chat] Raw key length:', rawKey?.length);
-    console.log('[API /chat] Raw key starts with:', rawKey?.substring(0, 10));
-    console.log('[API /chat] Raw key ends with:', rawKey?.substring(rawKey.length - 10));
-
-    // Sanitize: trim whitespace and remove any non-ASCII characters
-    // This prevents "String contains non ISO-8859-1 code point" errors
-    const key = rawKey
-      .trim()
-      .replace(/[^\x00-\x7F]/g, ''); // Remove non-ASCII characters
-
-    console.log('[API /chat] Sanitized key length:', key?.length);
-    return key || null;
-  }
-  console.log('[API /chat] No OPENAI_API_KEY found in process.env');
-  return null;
-};
+var CORS_PROXY = process.env.CORS_PROXY_URL || 'https://corsproxy.io/?';
 
-// CORS proxy for OpenAI API calls from browser
-const CORS_PROXY = 'https://corsproxy.io/?';
-const OPENAI_API_URL = 'https://api.openai.com/v1/chat/completions';
+var openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY || '',
+  fetch: function(url, init) {
+    var proxiedUrl = CORS_PROXY + encodeURIComponent(String(url));
+    return globalThis.fetch(proxiedUrl, init);
+  },
+});
+
+// Extract text content from a UIMessage (handles both content string and parts array)
+function getContent(m) {
+  if (typeof m.content === 'string' && m.content) return m.content;
+  if (Array.isArray(m.parts)) {
+    return m.parts
+      .filter(function(p) { return p.type === 'text'; })
+      .map(function(p) { return p.text; })
+      .join('');
+  }
+  return '';
+}
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
+export default async function handler(req, res) {
   if (req.method !== 'POST') {
     return res.status(405).json({ error: 'Method not allowed' });
   }
 
-  const apiKey = getApiKey();
-  if (!apiKey) {
+  if (!process.env.OPENAI_API_KEY) {
     return res.status(500).json({
       error: 'OpenAI API key not configured. Please enter your API key in the demo panel.'
     });
   }
 
   try {
-    const { messages } = req.body;
-
-    if (!messages || !Array.isArray(messages)) {
+    var uiMessages = req.body.messages;
+    if (!uiMessages || !Array.isArray(uiMessages)) {
       return res.status(400).json({ error: 'Invalid messages format' });
     }
 
-    // Format messages for OpenAI API
-    const formattedMessages = messages.map((m: any) => ({
-      role: m.role,
-      content: m.content,
-    }));
-
-    // Make request to OpenAI via CORS proxy
-    const response = await fetch(CORS_PROXY + encodeURIComponent(OPENAI_API_URL), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': \`Bearer \${apiKey}\`,
-      },
-      body: JSON.stringify({
-        model: 'gpt-4o-mini',
-        messages: formattedMessages,
-        stream: true,
-      }),
+    // Convert UIMessages to simple CoreMessages for streamText
+    var messages = uiMessages.map(function(m) {
+      return { role: m.role, content: getContent(m) };
     });
 
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error('OpenAI API error:', errorText);
-      return res.status(response.status).json({
-        error: \`OpenAI API error: \${response.statusText}\`
-      });
-    }
-
-    // Set up streaming response headers
-    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-    res.setHeader('Transfer-Encoding', 'chunked');
-    res.setHeader('Cache-Control', 'no-cache');
-
-    // Stream the response using AI SDK data stream format
-    // Format: 0:"text chunk"\\n (text deltas)
-    const reader = response.body?.getReader();
-    if (!reader) {
-      return res.status(500).json({ error: 'Failed to get response stream' });
-    }
-
-    console.log('[API /chat] Starting to stream response...');
-    const decoder = new TextDecoder();
-    let buffer = '';
-    let chunkCount = 0;
-
-    // Collect all chunks first (CORS proxy may buffer entire response)
-    const pendingChunks: string[] = [];
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        console.log('[API /chat] OpenAI stream done');
-        break;
-      }
-
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split('\\n');
-      buffer = lines.pop() || '';
-
-      for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          const data = line.slice(6);
-          if (data === '[DONE]') {
-            console.log('[API /chat] Received [DONE] from OpenAI');
-            continue;
-          }
-          try {
-            const parsed = JSON.parse(data);
-            const content = parsed.choices?.[0]?.delta?.content;
-            if (content) {
-              // AI SDK data stream format: 0:"text"\\n
-              const chunk = \`0:"\${content.replace(/"/g, '\\\\"').replace(/\\n/g, '\\\\n')}"\\n\`;
-              pendingChunks.push(chunk);
-            }
-          } catch (e) {
-            // Ignore parse errors for incomplete chunks
-          }
-        }
-      }
-    }
-
-    console.log('[API /chat] Collected', pendingChunks.length, 'chunks, streaming with delays...');
-
-    // Helper to create delay
-    const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-    // Stream chunks with delays to ensure they arrive separately
-    // The CORS proxy buffers the entire OpenAI response, so we simulate streaming
-    // by writing chunks with delays. 50ms gives the message channel time to process
-    // each chunk before the next one arrives.
-    for (const chunk of pendingChunks) {
-      chunkCount++;
-      console.log('[API /chat] Writing chunk', chunkCount);
-      res.write(chunk);
-      // Longer delay to ensure message channel processes each chunk separately
-      await delay(50);
-    }
-
-    // End the stream with finish reason
-    console.log('[API /chat] Writing finish message, total chunks:', chunkCount);
-    res.write('d:{"finishReason":"stop"}\\n');
-    res.end();
+    var result = streamText({
+      model: openai('gpt-4o-mini'),
+      messages: messages,
+      onError: function(info) {
+        console.error('[API /chat] Stream error:', info.error);
+      },
+    });
 
+    return result.toUIMessageStreamResponse();
   } catch (error) {
     console.error('Chat API error:', error);
-    res.status(500).json({
-      error: error instanceof Error ? error.message : 'Internal server error'
-    });
+    if (!res.headersSent) {
+      res.status(500).json({
+        error: error && error.message ? error.message : 'Internal server error'
+      });
+    }
   }
 }
 `);
diff --git a/src/vite-demo.ts b/src/vite-demo.ts
index 18b686e..98c3e7e 100644
--- a/src/vite-demo.ts
+++ b/src/vite-demo.ts
@@ -61,8 +61,7 @@ export default defineConfig({
 
   // Create index.html for React app
   // Note: Use relative paths (./src/) so they work with /__virtual__/port/ URLs
-  // Import map resolves bare imports (react, react-dom) to CDN URLs
-  // IMPORTANT: Use ?dev to get development builds with DevTools/React Refresh support
+  // ViteDevServer automatically injects a React import map if none is present
   vfs.writeFileSync(
     '/index.html',
     `<!DOCTYPE html>
@@ -71,16 +70,6 @@ export default defineConfig({
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>React + Vite Browser Demo</title>
-  <script type="importmap">
-  {
-    "imports": {
-      "react": "https://esm.sh/react@18.2.0?dev",
-      "react/": "https://esm.sh/react@18.2.0&dev/",
-      "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
-      "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/"
-    }
-  }
-  </script>
 </head>
 <body>
   <div id="root"></div>
diff --git a/tests/code-transforms.test.ts b/tests/code-transforms.test.ts
index 4ca7af9..e83d473 100644
--- a/tests/code-transforms.test.ts
+++ b/tests/code-transforms.test.ts
@@ -93,4 +93,41 @@ describe('redirectNpmImports', () => {
       expect(result).toBe(code);
     });
   });
+
+  describe('installedPackages (VFS-served via /_npm/)', () => {
+    const installed = new Set(['@ai-sdk/react', 'zod', 'ai']);
+
+    it('should redirect installed package to /_npm/', () => {
+      const code = `import { useChat } from '@ai-sdk/react';`;
+      const result = redirectNpmImports(code, undefined, undefined, undefined, installed);
+      expect(result).toContain('/_npm/@ai-sdk/react');
+      expect(result).not.toContain('esm.sh');
+    });
+
+    it('should redirect installed package subpath to /_npm/', () => {
+      const code = `import { z } from 'zod/v4';`;
+      const result = redirectNpmImports(code, undefined, undefined, undefined, installed);
+      expect(result).toContain('/_npm/zod/v4');
+    });
+
+    it('should still use explicit mapping for react (not /_npm/)', () => {
+      const withReact = new Set(['react', '@ai-sdk/react']);
+      const code = `import React from 'react';`;
+      const result = redirectNpmImports(code, undefined, undefined, undefined, withReact);
+      expect(result).toContain('esm.sh/react@');
+      expect(result).not.toContain('/_npm/react');
+    });
+
+    it('should fall through to esm.sh for non-installed packages', () => {
+      const code = `import _ from 'lodash';`;
+      const result = redirectNpmImports(code, undefined, undefined, undefined, installed);
+      expect(result).toContain('esm.sh/lodash');
+    });
+
+    it('should handle scoped package root import', () => {
+      const code = `import ai from 'ai';`;
+      const result = redirectNpmImports(code, undefined, undefined, undefined, installed);
+      expect(result).toContain('/_npm/ai');
+    });
+  });
 });
diff --git a/tests/dev-server.test.ts b/tests/dev-server.test.ts
index 20c9d1c..914ba64 100644
--- a/tests/dev-server.test.ts
+++ b/tests/dev-server.test.ts
@@ -496,6 +496,70 @@ h1 {
       expect(body).toContain('React Refresh initialized');
       expect(body).toContain('vite-hmr');
     });
+
+    it('should auto-inject React import map when HTML has none', async () => {
+      // HTML without any import map — ViteDevServer should inject one
+      vfs.writeFileSync(
+        '/index.html',
+        `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>No Import Map</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>`
+      );
+
+      const response = await server.handleRequest('GET', '/', {});
+      const body = response.body.toString();
+
+      // Should inject an import map with React CDN URLs
+      expect(body).toContain('"importmap"');
+      expect(body).toContain('esm.sh/react@');
+      expect(body).toContain('esm.sh/react-dom@');
+      // Import map must come before </head>
+      const importmapPos = body.indexOf('"importmap"');
+      const headClosePos = body.indexOf('</head>');
+      expect(importmapPos).toBeLessThan(headClosePos);
+    });
+
+    it('should NOT inject import map when HTML already has one', async () => {
+      vfs.writeFileSync(
+        '/index.html',
+        `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Has Import Map</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "my-lib": "/lib/my-lib.js"
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>`
+      );
+
+      const response = await server.handleRequest('GET', '/', {});
+      const body = response.body.toString();
+
+      // Should NOT inject a second import map
+      const importmapCount = (body.match(/"importmap"/g) || []).length;
+      expect(importmapCount).toBe(1);
+      // Should keep the user's import map
+      expect(body).toContain('my-lib');
+      // Should NOT contain React CDN URLs
+      expect(body).not.toContain('esm.sh/react@');
+    });
   });
 
   describe('JSX/TS transformation', () => {
diff --git a/tests/next-dev-server.test.ts b/tests/next-dev-server.test.ts
index 0c8f87e..29288b5 100644
--- a/tests/next-dev-server.test.ts
+++ b/tests/next-dev-server.test.ts
@@ -1970,8 +1970,8 @@ describe('App Router page props (searchParams and params)', () => {
       expect(response.statusCode).toBe(200);
       const html = response.body.toString();
 
-      // Should have extractRouteParams function
-      expect(html).toContain('extractRouteParams');
+      // Should have resolveRoute function for server-based route resolution
+      expect(html).toContain('resolveRoute');
     });
 
     it('should pass params as a Promise to page components', async () => {
@@ -3047,4 +3047,18 @@ describe('Optional catch-all routes [[...slug]]', () => {
     expect(info.found).toBe(true);
     expect(info.params.slug).toEqual(['clothes', 'pants']);
   });
+
+  describe('/_npm/ route', () => {
+    it('should return 404 for empty specifier', async () => {
+      const response = await server.handleRequest('GET', '/_npm/', {});
+      expect(response.statusCode).toBe(404);
+    });
+
+    it('should return 500 when package is not installed', async () => {
+      // In test env (no esbuild-wasm), bundleNpmModuleForBrowser will fail
+      const response = await server.handleRequest('GET', '/_npm/nonexistent-pkg', {});
+      expect(response.statusCode).toBe(500);
+      expect(response.body.toString()).toContain('nonexistent-pkg');
+    });
+  });
 });
diff --git a/tests/npm-serve.test.ts b/tests/npm-serve.test.ts
new file mode 100644
index 0000000..2f0e9e2
--- /dev/null
+++ b/tests/npm-serve.test.ts
@@ -0,0 +1,394 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { VirtualFS } from '../src/virtual-fs';
+
+// Mock the esbuild build function since esbuild-wasm is not available in test env
+vi.mock('../src/shims/esbuild', () => ({
+  build: vi.fn(),
+  setVFS: vi.fn(),
+}));
+
+import { bundleNpmModuleForBrowser, clearNpmBundleCache, initNpmServe } from '../src/frameworks/npm-serve';
+import { build } from '../src/shims/esbuild';
+
+const mockBuild = vi.mocked(build);
+
+/**
+ * Helper: create a VFS with a realistic package structure and init npm-serve.
+ * Returns the VFS so tests can inspect or extend it.
+ */
+function setupVFS(): VirtualFS {
+  const vfs = new VirtualFS();
+  initNpmServe(vfs);
+  return vfs;
+}
+
+/**
+ * Helper: create a package in VFS node_modules with given package.json fields
+ * and optional file stubs.
+ */
+function addPackage(
+  vfs: VirtualFS,
+  name: string,
+  pkgJson: Record<string, unknown>,
+  files: Record<string, string> = {},
+): void {
+  const dir = '/node_modules/' + name;
+  vfs.mkdirSync(dir, { recursive: true });
+  vfs.writeFileSync(dir + '/package.json', JSON.stringify({ name, ...pkgJson }));
+  for (const [path, content] of Object.entries(files)) {
+    const fullPath = dir + '/' + path;
+    const parentDir = fullPath.substring(0, fullPath.lastIndexOf('/'));
+    vfs.mkdirSync(parentDir, { recursive: true });
+    vfs.writeFileSync(fullPath, content);
+  }
+}
+
+function mockBuildSuccess(text = 'export default {};') {
+  mockBuild.mockResolvedValue({
+    errors: [],
+    warnings: [],
+    outputFiles: [{ path: '', contents: new Uint8Array(), text }],
+  });
+}
+
+// ── Basic bundling ────────────────────────────────────────────────
+
+describe('bundleNpmModuleForBrowser', () => {
+  beforeEach(() => {
+    clearNpmBundleCache();
+    mockBuild.mockReset();
+  });
+
+  it('falls back to stdin when package is not in VFS', async () => {
+    setupVFS(); // empty VFS — no packages
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('@ai-sdk/react');
+
+    expect(mockBuild).toHaveBeenCalledOnce();
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.stdin).toBeDefined();
+    expect(opts.stdin!.contents).toContain("from '@ai-sdk/react'");
+    expect(opts.stdin!.resolveDir).toBe('/node_modules');
+    expect(opts.external).toContain('react');
+    expect(opts.external).toContain('react-dom');
+  });
+
+  it('caches results on second call', async () => {
+    setupVFS();
+    mockBuildSuccess('cached!');
+
+    const first = await bundleNpmModuleForBrowser('cached-pkg');
+    const second = await bundleNpmModuleForBrowser('cached-pkg');
+
+    expect(first).toBe('cached!');
+    expect(second).toBe('cached!');
+    expect(mockBuild).toHaveBeenCalledOnce();
+  });
+
+  it('throws when esbuild produces no output', async () => {
+    setupVFS();
+    mockBuild.mockResolvedValue({ errors: [], warnings: [], outputFiles: [] });
+
+    await expect(bundleNpmModuleForBrowser('bad-pkg')).rejects.toThrow('no output');
+  });
+
+  it('clears cache when clearNpmBundleCache is called', async () => {
+    setupVFS();
+    mockBuildSuccess('v1');
+
+    await bundleNpmModuleForBrowser('pkg');
+    expect(mockBuild).toHaveBeenCalledOnce();
+
+    clearNpmBundleCache();
+    mockBuildSuccess('v2');
+
+    const result = await bundleNpmModuleForBrowser('pkg');
+    expect(result).toBe('v2');
+    expect(mockBuild).toHaveBeenCalledTimes(2);
+  });
+});
+
+// ── Entry point resolution ────────────────────────────────────────
+
+describe('resolvePackageEntry (via bundleNpmModuleForBrowser)', () => {
+  beforeEach(() => {
+    clearNpmBundleCache();
+    mockBuild.mockReset();
+  });
+
+  it('resolves simple string exports', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'simple-pkg', {
+      exports: { '.': './dist/index.js' },
+    }, {
+      'dist/index.js': 'module.exports = {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('simple-pkg');
+
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.entryPoints).toEqual(['/node_modules/simple-pkg/dist/index.js']);
+    expect(opts.stdin).toBeUndefined();
+  });
+
+  it('resolves flat conditional exports (require condition)', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'flat-cond', {
+      exports: {
+        '.': {
+          require: './dist/cjs/index.js',
+          import: './dist/esm/index.mjs',
+        },
+      },
+    }, {
+      'dist/cjs/index.js': 'module.exports = {};',
+      'dist/esm/index.mjs': 'export default {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('flat-cond');
+
+    const opts = mockBuild.mock.calls[0][0];
+    // Should prefer require condition (CJS-first)
+    expect(opts.entryPoints).toEqual(['/node_modules/flat-cond/dist/cjs/index.js']);
+  });
+
+  it('resolves doubly-nested exports like convex', async () => {
+    const vfs = setupVFS();
+    // This is the EXACT structure from `npm view convex exports`
+    addPackage(vfs, 'convex', {
+      exports: {
+        '.': {
+          import: {
+            types: './dist/esm-types/index.d.ts',
+            import: './dist/esm/index.js',
+          },
+          require: {
+            types: './dist/cjs-types/index.d.ts',
+            require: './dist/cjs/index.js',
+          },
+        },
+        './server': {
+          import: {
+            types: './dist/esm-types/server/index.d.ts',
+            import: './dist/esm/server/index.js',
+          },
+          require: {
+            types: './dist/cjs-types/server/index.d.ts',
+            require: './dist/cjs/server/index.js',
+          },
+        },
+        './react': {
+          import: {
+            types: './dist/esm-types/react/index.d.ts',
+            import: './dist/esm/react/index.js',
+          },
+          require: {
+            types: './dist/cjs-types/react/index.d.ts',
+            require: './dist/cjs/react/index.js',
+          },
+        },
+        './values': {
+          import: {
+            types: './dist/esm-types/values/index.d.ts',
+            import: './dist/esm/values/index.js',
+          },
+          require: {
+            types: './dist/cjs-types/values/index.d.ts',
+            require: './dist/cjs/values/index.js',
+          },
+        },
+      },
+    }, {
+      // Create the actual files that should be resolved
+      'dist/cjs/index.js': 'module.exports = {};',
+      'dist/cjs/server/index.js': 'module.exports = {};',
+      'dist/cjs/react/index.js': 'module.exports = {};',
+      'dist/cjs/values/index.js': 'module.exports = {};',
+      'dist/esm/index.js': 'export default {};',
+      'dist/esm/server/index.js': 'export default {};',
+      'dist/esm/react/index.js': 'export default {};',
+      'dist/esm/values/index.js': 'export default {};',
+    });
+    mockBuildSuccess();
+
+    // Test main entry
+    await bundleNpmModuleForBrowser('convex');
+    expect(mockBuild.mock.calls[0][0].entryPoints).toEqual([
+      '/node_modules/convex/dist/cjs/index.js',
+    ]);
+
+    // Test subpath: convex/server
+    clearNpmBundleCache();
+    mockBuild.mockReset();
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('convex/server');
+    expect(mockBuild.mock.calls[0][0].entryPoints).toEqual([
+      '/node_modules/convex/dist/cjs/server/index.js',
+    ]);
+
+    // Test subpath: convex/react
+    clearNpmBundleCache();
+    mockBuild.mockReset();
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('convex/react');
+    expect(mockBuild.mock.calls[0][0].entryPoints).toEqual([
+      '/node_modules/convex/dist/cjs/react/index.js',
+    ]);
+  });
+
+  it('does NOT resolve a directory as entry point', async () => {
+    const vfs = setupVFS();
+    // Package with a "server" directory but no matching exports
+    addPackage(vfs, 'dir-trap', {
+      exports: { '.': './index.js' },
+      // No ./server export
+    }, {
+      'index.js': 'module.exports = {};',
+      'server/index.js': 'module.exports = {};', // creates server/ directory
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('dir-trap/server');
+
+    const opts = mockBuild.mock.calls[0][0];
+    // Should NOT pass '/node_modules/dir-trap/server' (a directory) as entry
+    // Should either resolve to server/index.js or fall back to stdin
+    if (opts.entryPoints) {
+      expect(opts.entryPoints[0]).not.toBe('/node_modules/dir-trap/server');
+    }
+  });
+
+  it('resolves subpath to direct file when no exports match', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'no-exports', {
+      main: './index.js',
+      // No exports field
+    }, {
+      'index.js': 'module.exports = {};',
+      'utils.js': 'module.exports = {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('no-exports/utils');
+
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.entryPoints).toEqual(['/node_modules/no-exports/utils.js']);
+  });
+
+  it('resolves main field when no exports', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'main-only', {
+      main: './lib/main.js',
+    }, {
+      'lib/main.js': 'module.exports = {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('main-only');
+
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.entryPoints).toEqual(['/node_modules/main-only/lib/main.js']);
+  });
+
+  it('resolves scoped package with nested exports', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, '@ai-sdk/openai', {
+      exports: {
+        '.': {
+          import: {
+            types: './dist/index.d.ts',
+            import: './dist/index.js',
+          },
+          require: {
+            types: './dist/index.d.cts',
+            require: './dist/index.cjs',
+          },
+        },
+      },
+    }, {
+      'dist/index.js': 'export {};',
+      'dist/index.cjs': 'module.exports = {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('@ai-sdk/openai');
+
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.entryPoints).toEqual(['/node_modules/@ai-sdk/openai/dist/index.cjs']);
+  });
+
+  it('falls back to import condition when require file missing', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'esm-only', {
+      exports: {
+        '.': {
+          import: './dist/index.mjs',
+          // require condition missing
+        },
+      },
+    }, {
+      'dist/index.mjs': 'export default {};',
+    });
+    mockBuildSuccess();
+
+    await bundleNpmModuleForBrowser('esm-only');
+
+    const opts = mockBuild.mock.calls[0][0];
+    expect(opts.entryPoints).toEqual(['/node_modules/esm-only/dist/index.mjs']);
+  });
+});
+
+// ── Post-processing ───────────────────────────────────────────────
+
+describe('post-processing', () => {
+  beforeEach(() => {
+    clearNpmBundleCache();
+    mockBuild.mockReset();
+  });
+
+  it('patches __require() calls to ESM imports', async () => {
+    setupVFS();
+    mockBuild.mockResolvedValue({
+      errors: [],
+      warnings: [],
+      outputFiles: [{
+        path: '',
+        contents: new Uint8Array(),
+        text: 'var x = __require("react");\nvar y = __require("react-dom");',
+      }],
+    });
+
+    const result = await bundleNpmModuleForBrowser('needs-patch');
+    expect(result).toContain('import * as __ext0 from "react"');
+    expect(result).toContain('import * as __ext1 from "react-dom"');
+    expect(result).not.toContain('__require("react")');
+  });
+
+  it('adds named exports for CJS bundles', async () => {
+    const vfs = setupVFS();
+    addPackage(vfs, 'cjs-named', {
+      exports: { '.': './index.js' },
+    }, {
+      // CJS file with esbuild's __export pattern
+      'index.js': '__export(foo_exports, { createThing: () => createThing, doStuff: () => doStuff });',
+    });
+    mockBuild.mockResolvedValue({
+      errors: [],
+      warnings: [],
+      outputFiles: [{
+        path: '',
+        contents: new Uint8Array(),
+        text: 'var stuff = 1;\nexport default require_cjs_named();',
+      }],
+    });
+
+    const result = await bundleNpmModuleForBrowser('cjs-named');
+    expect(result).toContain('export var createThing = __pkg.createThing;');
+    expect(result).toContain('export var doStuff = __pkg.doStuff;');
+  });
+});
diff --git a/tests/vercel-ai-sdk-demo.test.ts b/tests/vercel-ai-sdk-demo.test.ts
new file mode 100644
index 0000000..1edd2f1
--- /dev/null
+++ b/tests/vercel-ai-sdk-demo.test.ts
@@ -0,0 +1,265 @@
+/**
+ * Integration tests for the Vercel AI SDK demo.
+ *
+ * Verifies that:
+ * 1. The project structure is created correctly
+ * 2. The API route can be loaded and executed
+ * 3. Messages in both old ({content}) and new ({parts}) formats are handled
+ * 4. The response uses real AI SDK streaming (toUIMessageStreamResponse)
+ */
+import { describe, it, expect } from 'vitest';
+import { VirtualFS } from '../src/virtual-fs';
+import { createAIChatbotProject, PACKAGE_JSON } from '../src/vercel-ai-sdk-demo';
+import { Buffer } from '../src/shims/stream';
+import {
+  createMockRequest,
+  createMockResponse,
+  createStreamingMockResponse,
+  createBuiltinModules,
+  executeApiHandler,
+} from '../src/frameworks/next-api-handler';
+import { transformEsmToCjsSimple } from '../src/frameworks/code-transforms';
+
+// ── Project structure ─────────────────────────────────────────────────────
+
+describe('createAIChatbotProject', () => {
+  it('creates all required files', () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+
+    expect(vfs.existsSync('/package.json')).toBe(true);
+    expect(vfs.existsSync('/app/layout.tsx')).toBe(true);
+    expect(vfs.existsSync('/app/page.tsx')).toBe(true);
+    expect(vfs.existsSync('/app/globals.css')).toBe(true);
+    expect(vfs.existsSync('/pages/api/chat.ts')).toBe(true);
+    expect(vfs.existsSync('/tsconfig.json')).toBe(true);
+  });
+
+  it('package.json lists AI SDK dependencies', () => {
+    expect(PACKAGE_JSON.dependencies).toHaveProperty('ai');
+    expect(PACKAGE_JSON.dependencies).toHaveProperty('@ai-sdk/openai');
+    expect(PACKAGE_JSON.dependencies).toHaveProperty('@ai-sdk/react');
+  });
+
+  it('page imports useChat from @ai-sdk/react', () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const page = vfs.readFileSync('/app/page.tsx', 'utf8');
+    expect(page).toContain("from '@ai-sdk/react'");
+    expect(page).toContain('useChat');
+    expect(page).toContain('sendMessage');
+  });
+
+  it('API route imports streamText from ai', () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const api = vfs.readFileSync('/pages/api/chat.ts', 'utf8');
+    expect(api).toContain("from 'ai'");
+    expect(api).toContain('streamText');
+    expect(api).toContain('toUIMessageStreamResponse');
+  });
+
+  it('API route does NOT use convertToModelMessages', () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const api = vfs.readFileSync('/pages/api/chat.ts', 'utf8');
+    expect(api).not.toContain('convertToModelMessages');
+  });
+});
+
+// ── API route handler ─────────────────────────────────────────────────────
+
+describe('chat API route handler', () => {
+  // In test env (isBrowser=false), we can't install real ai/openai packages.
+  // Instead, we mock them to verify the handler logic: body parsing,
+  // message extraction, error handling, and streaming response wiring.
+
+  function createMockAiModules() {
+    // Track what streamText receives
+    let streamTextCalls: any[] = [];
+
+    const mockStreamText = (opts: any) => {
+      streamTextCalls.push(opts);
+      // Return a mock result with toUIMessageStreamResponse
+      return {
+        toUIMessageStreamResponse: () => {
+          return new Response('mock-stream', {
+            status: 200,
+            headers: { 'Content-Type': 'text/event-stream' },
+          });
+        },
+      };
+    };
+
+    const mockCreateOpenAI = (opts: any) => {
+      return (model: string) => ({ provider: 'openai', model });
+    };
+
+    return {
+      streamTextCalls,
+      builtins: {
+        ai: {
+          streamText: mockStreamText,
+          __esModule: true,
+          default: { streamText: mockStreamText },
+        },
+        '@ai-sdk/openai': {
+          createOpenAI: mockCreateOpenAI,
+          __esModule: true,
+          default: { createOpenAI: mockCreateOpenAI },
+        },
+      },
+    };
+  }
+
+  function getTransformedCode(vfs: VirtualFS): string {
+    const raw = vfs.readFileSync('/pages/api/chat.ts', 'utf8');
+    return transformEsmToCjsSimple(raw);
+  }
+
+  it('returns 405 for non-POST requests', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins } = createMockAiModules();
+
+    const req = createMockRequest('GET', '/api/chat', {});
+    const res = createMockResponse();
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    await executeApiHandler(code, req, res, { NODE_ENV: 'test' }, allBuiltins);
+    await res.waitForEnd();
+
+    const response = res.toResponse();
+    expect(response.statusCode).toBe(405);
+  });
+
+  it('returns 500 when API key is not set', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins } = createMockAiModules();
+
+    const body = JSON.stringify({ messages: [{ role: 'user', content: 'hi' }] });
+    const req = createMockRequest('POST', '/api/chat', { 'content-type': 'application/json' }, Buffer.from(body));
+    const res = createMockResponse();
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    // No OPENAI_API_KEY in env
+    await executeApiHandler(code, req, res, { NODE_ENV: 'test' }, allBuiltins);
+    await res.waitForEnd();
+
+    const response = res.toResponse();
+    expect(response.statusCode).toBe(500);
+    const json = JSON.parse(response.body.toString());
+    expect(json.error).toContain('API key');
+  });
+
+  it('returns 400 for missing messages', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins } = createMockAiModules();
+
+    const body = JSON.stringify({ something: 'else' });
+    const req = createMockRequest('POST', '/api/chat', { 'content-type': 'application/json' }, Buffer.from(body));
+    const res = createMockResponse();
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    await executeApiHandler(code, req, res, { NODE_ENV: 'test', OPENAI_API_KEY: 'sk-test' }, allBuiltins);
+    await res.waitForEnd();
+
+    const response = res.toResponse();
+    expect(response.statusCode).toBe(400);
+  });
+
+  it('calls streamText with messages in {content} format', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins, streamTextCalls } = createMockAiModules();
+
+    const body = JSON.stringify({
+      messages: [
+        { id: '1', role: 'user', content: 'Hello there' },
+      ],
+    });
+    const req = createMockRequest('POST', '/api/chat', { 'content-type': 'application/json' }, Buffer.from(body));
+    const res = createStreamingMockResponse(() => {}, () => {}, () => {});
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    const result = await executeApiHandler(code, req, res, { NODE_ENV: 'test', OPENAI_API_KEY: 'sk-test' }, allBuiltins);
+
+    // streamText should have been called
+    expect(streamTextCalls.length).toBe(1);
+    expect(streamTextCalls[0].messages).toEqual([
+      { role: 'user', content: 'Hello there' },
+    ]);
+
+    // Handler should return a Response (from toUIMessageStreamResponse)
+    expect(result).toBeInstanceOf(Response);
+  });
+
+  it('calls streamText with messages in {parts} format (AI SDK v5)', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins, streamTextCalls } = createMockAiModules();
+
+    // AI SDK v5 @ai-sdk/react sends messages with parts instead of content
+    const body = JSON.stringify({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          parts: [{ type: 'text', text: 'Tell me a joke' }],
+        },
+      ],
+    });
+    const req = createMockRequest('POST', '/api/chat', { 'content-type': 'application/json' }, Buffer.from(body));
+    const res = createStreamingMockResponse(() => {}, () => {}, () => {});
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    const result = await executeApiHandler(code, req, res, { NODE_ENV: 'test', OPENAI_API_KEY: 'sk-test' }, allBuiltins);
+
+    expect(streamTextCalls.length).toBe(1);
+    // getContent() should extract text from parts
+    expect(streamTextCalls[0].messages).toEqual([
+      { role: 'user', content: 'Tell me a joke' },
+    ]);
+    expect(result).toBeInstanceOf(Response);
+  });
+
+  it('handles multi-turn conversation', async () => {
+    const vfs = new VirtualFS();
+    createAIChatbotProject(vfs);
+    const code = getTransformedCode(vfs);
+    const { builtins, streamTextCalls } = createMockAiModules();
+
+    const body = JSON.stringify({
+      messages: [
+        { id: '1', role: 'user', content: 'Hi' },
+        { id: '2', role: 'assistant', parts: [{ type: 'text', text: 'Hello! How can I help?' }] },
+        { id: '3', role: 'user', content: 'Tell me about cats' },
+      ],
+    });
+    const req = createMockRequest('POST', '/api/chat', { 'content-type': 'application/json' }, Buffer.from(body));
+    const res = createStreamingMockResponse(() => {}, () => {}, () => {});
+    const allBuiltins = await createBuiltinModules();
+    Object.assign(allBuiltins, builtins);
+
+    await executeApiHandler(code, req, res, { NODE_ENV: 'test', OPENAI_API_KEY: 'sk-test' }, allBuiltins);
+
+    expect(streamTextCalls.length).toBe(1);
+    expect(streamTextCalls[0].messages).toEqual([
+      { role: 'user', content: 'Hi' },
+      { role: 'assistant', content: 'Hello! How can I help?' },
+      { role: 'user', content: 'Tell me about cats' },
+    ]);
+  });
+});
diff --git a/tests/vfs-require.test.ts b/tests/vfs-require.test.ts
new file mode 100644
index 0000000..4dff1fc
--- /dev/null
+++ b/tests/vfs-require.test.ts
@@ -0,0 +1,476 @@
+import { describe, it, expect } from 'vitest';
+import { VirtualFS } from '../src/virtual-fs';
+import { createVfsRequire } from '../src/frameworks/vfs-require';
+import { executeApiHandler, createMockRequest, createMockResponse } from '../src/frameworks/next-api-handler';
+
+// ─── Helper ──────────────────────────────────────────────────────────────────
+
+function setupVfs() {
+  const vfs = new VirtualFS();
+  return vfs;
+}
+
+function createRequire(vfs: VirtualFS, fromDir = '/', builtinModules: Record<string, unknown> = {}) {
+  const { require, moduleCache } = createVfsRequire(vfs, fromDir, {
+    builtinModules,
+    process: { env: {}, cwd: () => '/', platform: 'browser' },
+  });
+  return { require, moduleCache };
+}
+
+// ─── Resolution ──────────────────────────────────────────────────────────────
+
+describe('VFS require — resolution', () => {
+  it('resolves bare package import from /node_modules/', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/my-pkg', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/my-pkg/package.json',
+      JSON.stringify({ name: 'my-pkg', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/my-pkg/index.js', 'module.exports = "hello";');
+
+    const { require } = createRequire(vfs);
+    expect(require('my-pkg')).toBe('hello');
+  });
+
+  it('resolves from package.json main field', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/custom-main', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/custom-main/package.json',
+      JSON.stringify({ name: 'custom-main', main: 'lib/entry.js' })
+    );
+    vfs.mkdirSync('/node_modules/custom-main/lib', { recursive: true });
+    vfs.writeFileSync('/node_modules/custom-main/lib/entry.js', 'module.exports = 42;');
+
+    const { require } = createRequire(vfs);
+    expect(require('custom-main')).toBe(42);
+  });
+
+  it('resolves from package.json exports field', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/exports-pkg', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/exports-pkg/package.json',
+      JSON.stringify({
+        name: 'exports-pkg',
+        exports: { '.': { require: './dist/index.cjs.js' } },
+      })
+    );
+    vfs.mkdirSync('/node_modules/exports-pkg/dist', { recursive: true });
+    vfs.writeFileSync('/node_modules/exports-pkg/dist/index.cjs.js', 'module.exports = "from-exports";');
+
+    const { require } = createRequire(vfs);
+    expect(require('exports-pkg')).toBe('from-exports');
+  });
+
+  it('resolves scoped packages (@scope/pkg)', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/@my-scope/my-lib', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/@my-scope/my-lib/package.json',
+      JSON.stringify({ name: '@my-scope/my-lib', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/@my-scope/my-lib/index.js', 'module.exports = "scoped";');
+
+    const { require } = createRequire(vfs);
+    expect(require('@my-scope/my-lib')).toBe('scoped');
+  });
+
+  it('resolves sub-path imports (pkg/sub)', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/utils/lib', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/utils/package.json',
+      JSON.stringify({ name: 'utils' })
+    );
+    vfs.writeFileSync('/node_modules/utils/lib/helper.js', 'module.exports = "sub-path";');
+
+    const { require } = createRequire(vfs);
+    expect(require('utils/lib/helper')).toBe('sub-path');
+  });
+
+  it('resolves relative paths', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/project/lib', { recursive: true });
+    vfs.writeFileSync('/project/lib/utils.js', 'module.exports = "relative";');
+
+    const { require } = createRequire(vfs, '/project');
+    expect(require('./lib/utils')).toBe('relative');
+  });
+
+  it('resolves JSON files', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/json-pkg', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/json-pkg/package.json',
+      JSON.stringify({ name: 'json-pkg', main: 'data.json' })
+    );
+    vfs.writeFileSync('/node_modules/json-pkg/data.json', JSON.stringify({ key: 'value' }));
+
+    const { require } = createRequire(vfs);
+    expect(require('json-pkg')).toEqual({ key: 'value' });
+  });
+
+  it('throws on missing modules', () => {
+    const vfs = setupVfs();
+    const { require } = createRequire(vfs);
+    expect(() => require('nonexistent')).toThrow("Cannot find module 'nonexistent'");
+  });
+
+  it('skips CJS stub files starting with throw', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/esm-only', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/esm-only/package.json',
+      JSON.stringify({
+        name: 'esm-only',
+        exports: {
+          '.': {
+            require: './index.cjs',
+            import: './index.mjs',
+          },
+        },
+      })
+    );
+    vfs.writeFileSync('/node_modules/esm-only/index.cjs', 'throw new Error("CJS not supported");');
+    // ESM file with import/export will get transformed
+    vfs.writeFileSync('/node_modules/esm-only/index.mjs', 'module.exports = "esm-fallback";');
+
+    const { require } = createRequire(vfs);
+    expect(require('esm-only')).toBe('esm-fallback');
+  });
+
+  it('resolves directory with index.js', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/dir-pkg/lib', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/dir-pkg/package.json',
+      JSON.stringify({ name: 'dir-pkg', main: './lib' })
+    );
+    vfs.writeFileSync('/node_modules/dir-pkg/lib/index.js', 'module.exports = "from-index";');
+
+    const { require } = createRequire(vfs);
+    expect(require('dir-pkg')).toBe('from-index');
+  });
+
+  it('resolves browser field over main', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/browser-pkg', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/browser-pkg/package.json',
+      JSON.stringify({ name: 'browser-pkg', main: 'node.js', browser: 'browser.js' })
+    );
+    vfs.writeFileSync('/node_modules/browser-pkg/node.js', 'module.exports = "node";');
+    vfs.writeFileSync('/node_modules/browser-pkg/browser.js', 'module.exports = "browser";');
+
+    const { require } = createRequire(vfs);
+    expect(require('browser-pkg')).toBe('browser');
+  });
+});
+
+// ─── Loading ─────────────────────────────────────────────────────────────────
+
+describe('VFS require — loading', () => {
+  it('loads and executes CJS modules', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/cjs-mod', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/cjs-mod/package.json',
+      JSON.stringify({ name: 'cjs-mod', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/cjs-mod/index.js',
+      'var x = 1 + 2; module.exports = { sum: x, name: "cjs" };'
+    );
+
+    const { require } = createRequire(vfs);
+    expect(require('cjs-mod')).toEqual({ sum: 3, name: 'cjs' });
+  });
+
+  it('caches modules (same object returned on re-require)', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/cached-mod', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/cached-mod/package.json',
+      JSON.stringify({ name: 'cached-mod', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/cached-mod/index.js', 'module.exports = { val: Math.random() };');
+
+    const { require } = createRequire(vfs);
+    const first = require('cached-mod');
+    const second = require('cached-mod');
+    expect(first).toBe(second); // Same object reference
+  });
+
+  it('supports circular dependencies (partial exports)', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/lib', { recursive: true });
+    vfs.writeFileSync('/lib/a.js', `
+      exports.name = "a";
+      var b = require("./b");
+      exports.bName = b.name;
+    `);
+    vfs.writeFileSync('/lib/b.js', `
+      exports.name = "b";
+      var a = require("./a");
+      exports.aName = a.name;
+    `);
+
+    const { require } = createRequire(vfs, '/lib');
+    const a = require('./a') as any;
+    expect(a.name).toBe('a');
+    expect(a.bName).toBe('b');
+  });
+
+  it('handles nested requires (package A requires package B)', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/pkg-a', { recursive: true });
+    vfs.mkdirSync('/node_modules/pkg-b', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/pkg-a/package.json',
+      JSON.stringify({ name: 'pkg-a', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/pkg-b/package.json',
+      JSON.stringify({ name: 'pkg-b', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/pkg-b/index.js', 'module.exports = 100;');
+    vfs.writeFileSync(
+      '/node_modules/pkg-a/index.js',
+      'var b = require("pkg-b"); module.exports = b + 1;'
+    );
+
+    const { require } = createRequire(vfs);
+    expect(require('pkg-a')).toBe(101);
+  });
+
+  it('strips shebangs', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/shebang-pkg', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/shebang-pkg/package.json',
+      JSON.stringify({ name: 'shebang-pkg', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/shebang-pkg/index.js',
+      '#!/usr/bin/env node\nmodule.exports = "shebang-stripped";'
+    );
+
+    const { require } = createRequire(vfs);
+    expect(require('shebang-pkg')).toBe('shebang-stripped');
+  });
+
+  it('applies ESM→CJS safety-net transform', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/esm-mod', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/esm-mod/package.json',
+      JSON.stringify({ name: 'esm-mod', main: 'index.js' })
+    );
+    // ESM code that wasn't pre-transformed
+    // transformEsmToCjsSimple converts `export default function X()` to `module.exports = function X()`
+    vfs.writeFileSync(
+      '/node_modules/esm-mod/index.js',
+      'export default function greet() { return "hi"; }'
+    );
+
+    const { require } = createRequire(vfs);
+    const mod = require('esm-mod') as any;
+    // transformEsmToCjsSimple sets module.exports directly (not .default)
+    expect(typeof mod).toBe('function');
+    expect(mod()).toBe('hi');
+  });
+
+  it('provides __filename and __dirname to modules', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/meta-mod', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/meta-mod/package.json',
+      JSON.stringify({ name: 'meta-mod', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/meta-mod/index.js',
+      'module.exports = { file: __filename, dir: __dirname };'
+    );
+
+    const { require } = createRequire(vfs);
+    const mod = require('meta-mod') as any;
+    expect(mod.file).toBe('/node_modules/meta-mod/index.js');
+    expect(mod.dir).toBe('/node_modules/meta-mod');
+  });
+
+  it('provides process object to modules', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/env-mod', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/env-mod/package.json',
+      JSON.stringify({ name: 'env-mod', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/env-mod/index.js',
+      'module.exports = process.env.MY_VAR;'
+    );
+
+    const { require: vfsRequire } = createVfsRequire(vfs, '/', {
+      builtinModules: {},
+      process: { env: { MY_VAR: 'hello-env' }, cwd: () => '/' },
+    });
+
+    expect(vfsRequire('env-mod')).toBe('hello-env');
+  });
+});
+
+// ─── Builtins priority ──────────────────────────────────────────────────────
+
+describe('VFS require — builtins', () => {
+  it('returns builtins before checking VFS', () => {
+    const vfs = setupVfs();
+    // Create a package with same name as a builtin
+    vfs.mkdirSync('/node_modules/path', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/path/package.json',
+      JSON.stringify({ name: 'path', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/path/index.js', 'module.exports = "vfs-path";');
+
+    const fakePathModule = { join: () => 'fake' };
+    const { require } = createRequire(vfs, '/', { path: fakePathModule });
+    expect(require('path')).toBe(fakePathModule);
+  });
+
+  it('strips node: prefix for builtins', () => {
+    const fakeFs = { readFileSync: () => 'mock' };
+    const vfs = setupVfs();
+    const { require } = createRequire(vfs, '/', { fs: fakeFs });
+    expect(require('node:fs')).toBe(fakeFs);
+  });
+});
+
+// ─── Integration with executeApiHandler ─────────────────────────────────────
+
+describe('VFS require — integration with executeApiHandler', () => {
+  it('API handler can require() a package from VFS node_modules', async () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/my-util', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/my-util/package.json',
+      JSON.stringify({ name: 'my-util', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/my-util/index.js', 'module.exports = { greet: function(n) { return "Hello " + n; } };');
+
+    const builtins: Record<string, unknown> = {};
+    const { require: vfsRequire } = createVfsRequire(vfs, '/', {
+      builtinModules: builtins,
+      process: { env: {}, cwd: () => '/' },
+    });
+
+    const handlerCode = `
+      var util = require('my-util');
+      module.exports.default = function(req, res) {
+        res.json({ message: util.greet('World') });
+      };
+    `;
+
+    const req = createMockRequest('GET', '/api/test', {});
+    const res = createMockResponse();
+    await executeApiHandler(handlerCode, req, res, {}, builtins, vfsRequire);
+
+    const response = res.toResponse();
+    expect(JSON.parse(response.body.toString())).toEqual({ message: 'Hello World' });
+  });
+
+  it('builtins take priority over VFS packages in handler', async () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/path', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/path/package.json',
+      JSON.stringify({ name: 'path', main: 'index.js' })
+    );
+    vfs.writeFileSync('/node_modules/path/index.js', 'module.exports = { join: function() { return "vfs"; } };');
+
+    const builtins: Record<string, unknown> = {
+      path: { join: (...args: string[]) => args.join('/') },
+    };
+    const { require: vfsRequire } = createVfsRequire(vfs, '/', {
+      builtinModules: builtins,
+      process: { env: {}, cwd: () => '/' },
+    });
+
+    const handlerCode = `
+      var path = require('path');
+      module.exports.default = function(req, res) {
+        res.json({ result: path.join('a', 'b') });
+      };
+    `;
+
+    const req = createMockRequest('GET', '/api/test', {});
+    const res = createMockResponse();
+    await executeApiHandler(handlerCode, req, res, {}, builtins, vfsRequire);
+
+    const response = res.toResponse();
+    expect(JSON.parse(response.body.toString())).toEqual({ result: 'a/b' });
+  });
+
+  it('works without vfsRequire (backward compat)', async () => {
+    const builtins: Record<string, unknown> = {};
+
+    const handlerCode = `
+      module.exports.default = function(req, res) {
+        res.json({ ok: true });
+      };
+    `;
+
+    const req = createMockRequest('GET', '/api/test', {});
+    const res = createMockResponse();
+    await executeApiHandler(handlerCode, req, res, {}, builtins);
+
+    const response = res.toResponse();
+    expect(JSON.parse(response.body.toString())).toEqual({ ok: true });
+  });
+
+  it('throws when module not found and no vfsRequire', async () => {
+    const builtins: Record<string, unknown> = {};
+
+    const handlerCode = `
+      var pkg = require('nonexistent');
+      module.exports.default = function(req, res) {
+        res.json({ ok: true });
+      };
+    `;
+
+    const req = createMockRequest('GET', '/api/test', {});
+    const res = createMockResponse();
+    await expect(
+      executeApiHandler(handlerCode, req, res, {}, builtins)
+    ).rejects.toThrow('Module not found: nonexistent');
+  });
+});
+
+// ─── CORS proxy ──────────────────────────────────────────────────────────────
+
+describe('VFS require — CORS proxy via process.env', () => {
+  it('process.env.CORS_PROXY_URL is available to loaded modules', () => {
+    const vfs = setupVfs();
+    vfs.mkdirSync('/node_modules/proxy-check', { recursive: true });
+    vfs.writeFileSync(
+      '/node_modules/proxy-check/package.json',
+      JSON.stringify({ name: 'proxy-check', main: 'index.js' })
+    );
+    vfs.writeFileSync(
+      '/node_modules/proxy-check/index.js',
+      'module.exports = process.env.CORS_PROXY_URL;'
+    );
+
+    const { require: vfsRequire } = createVfsRequire(vfs, '/', {
+      builtinModules: {},
+      process: {
+        env: { CORS_PROXY_URL: 'https://proxy.example.com/?' },
+        cwd: () => '/',
+      },
+    });
+
+    expect(vfsRequire('proxy-check')).toBe('https://proxy.example.com/?');
+  });
+});
diff --git a/vite.config.js b/vite.config.js
index 9eba0d5..e1d280b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -90,6 +90,7 @@ export default defineConfig({
         'docs/api-reference': resolve(__dirname, 'docs/api-reference.html'),
         'docs/tutorial-editor': resolve(__dirname, 'docs/tutorial-editor.html'),
         'examples/editor-tutorial': resolve(__dirname, 'examples/editor-tutorial.html'),
+        'examples/agent-workbench': resolve(__dirname, 'examples/agent-workbench.html'),
       },
     },
     outDir: 'dist-site',