ReddRadar
Agent skill
stackblitz-install-auth
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".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/stackblitz-pack/skills/stackblitz-install-auth
SKILL.md
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:
// Express middleware
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
next();
});
// Vite config
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();
console.log('WebContainer booted successfully');
// Verify filesystem works
await wc.mount({ 'test.txt': { file: { contents: 'Hello WebContainers!' } } });
const content = await wc.fs.readFile('/test.txt', 'utf-8');
console.log(`File content: ${content}`);
Output
WebContainer booted successfully
File content: Hello WebContainers!
Error Handling
| Error | Cause | Solution |
|---|---|---|
SharedArrayBuffer is not defined |
Missing COOP/COEP headers | Add cross-origin isolation headers |
Failed to boot |
Multiple instances | Only one WebContainer per page |
Not in secure context |
HTTP instead of HTTPS | Use HTTPS or localhost |
Resources
Next Steps
Proceed to stackblitz-hello-world for your first WebContainer project.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jeremylongshore/claude-code-plugins-plus-skills
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?