| name | stackblitz-install-auth |
| description | Install the WebContainer API and configure StackBlitz SDK for browser-based Node.js.
Use when setting up WebContainers, embedding StackBlitz projects,
or initializing the @stackblitz/sdk package.
Trigger: "install stackblitz", "setup webcontainers", "stackblitz SDK".
|
| allowed-tools | Read, Write, Edit, Bash(npm:*), Grep |
| version | 1.5.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","ide","webcontainers","stackblitz"] |
| compatibility | Designed for Claude Code |
StackBlitz Install & Auth
Overview
Set up the WebContainer API for running Node.js in the browser, or the StackBlitz SDK for embedding interactive code editors. WebContainers require no auth -- they run entirely client-side. The StackBlitz SDK is for embedding projects from stackblitz.com.
Prerequisites
- Node.js 18+ for build tooling
- Modern browser with SharedArrayBuffer support (requires HTTPS + COOP/COEP headers)
Instructions
Step 1: Install WebContainer API
npm install @webcontainer/api
Step 2: Install StackBlitz SDK (for embedding)
npm install @stackblitz/sdk
Step 3: Configure Required HTTP Headers
WebContainers require cross-origin isolation. Add these headers to your server:
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
next();
});
export default defineConfig({
server: {
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
},
},
});
Step 4: Verify WebContainer Boot
import { WebContainer } from '@webcontainer/api';
const wc = await WebContainer.boot();
.();
wc.({ : { : { : } } });
content = wc..(, );
.();