ai-browser-sandbox
v0.1.3
Published
Build Vite-style project files in the browser and get a Blob URL for iframe loading
Maintainers
saura3hReadme
ai-browser-sandbox
Preview AI-generated code in the browser. Pass in-memory project files (e.g. from an AI that generated React or Vanilla HTML/JS), get a Blob URL to load in an <iframe>—no server, no Node, no local build. Built for quickly rendering and iterating on generated Vite-style projects.
- In-memory:
filesisRecord<path, content>. Dependencies and HTML come from your project (package.json,index.html). - Browser-only: Uses esbuild-wasm; runs entirely in the client.
Install
npm install ai-browser-sandboxUsage
When you have project files as strings (e.g. from an AI or editor), pass them to buildSandbox and show the result in an iframe:
import { buildSandbox } from "ai-browser-sandbox";
// e.g. files from AI-generated project
const { url, error } = await buildSandbox({
files: {
"package.json":
'{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0"}}',
"index.html":
'<!DOCTYPE html><html><body><div id="root"></div></body></html>',
"src/main.tsx":
"import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; createRoot(document.getElementById('root')).render(<App />);",
"src/App.tsx":
"import React from 'react'; export default function App() { return <h1>Hello</h1>; }",
},
framework: "react",
});
if (error) {
console.error(error); // human-readable message
return;
}
document.querySelector("iframe").src = url;- Result:
{ url: string, error?: string }. On failure,erroris set with a human-readable message;urlis empty. No throwing. - Import map: Built from your
package.json(dependencies+devDependencies). All listed packages are loaded from esm.sh at runtime. - HTML: Your
index.htmlis used as the page template (when present). The bundle (or inline script) is injected where the module script was.
Supported frameworks
- react — Entry:
src/main.jsx,src/main.tsx,main.jsx, etc. Uses yourindex.htmlandpackage.json. - vanilla — Entry:
index.htmlonly. Optional<script type="module" src="...">for an external JS file, or inline script only (single HTML file, no JS file).
Running the example
From the repo root:
npm run exampleOpen http://localhost:3000/. Choose Framework (React or Vanilla), select your project folder or individual files, then click Build. Only source files (.js, .jsx, .ts, .tsx, .html, .json, .css) are used; node_modules, .git, dist, etc. are ignored.
Requirements
- Runs in the browser only (no Node).
- Uses esbuild-wasm for bundling. The first build loads the WASM binary from a CDN (unpkg).
Adding frameworks
Implement the FrameworkAdapter interface and add an adapter under src/frameworks/adapters/, then register it in src/frameworks/registry.ts. See src/frameworks/adapters/react.ts and vanilla.ts for examples.
Contributing
See CONTRIBUTING.md for development setup and how to contribute.
Author
Built by Saurabh.