Next-gen GPU programming for the browser — the future of Web3D
WebGPU is the future of high-performance graphics on the web — and it's here now. WebGPU Graphics Framework is the first AI system purpose-built for WebGPU development. It encodes GPU programming expertise into prompt sequences that generate production-quality WGSL shaders, render pipelines, and compute passes. The 3D web is evolving — this framework puts you at the frontier.
Full Access Unlocked
All 36 prompts · All 4 modules
"The WGSL PBR shader prompt saved me a week. WebGPU documentation is sparse — this framework fills th..."
Soren H. · Graphics Engineer
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
4 modules · 36 prompts · 6 workflow stages
Device & Pipeline Setup
WebGPU adapter/device initialization, capability detection, swap chain configuration, and render pipeline descriptor generation.
7 promptsWGSL Shader Generator
Generate WGSL vertex, fragment, and compute shaders for common graphics effects: PBR lighting, shadow mapping, particle systems, and image processing.
10 promptsRender Pass Architecture
Forward rendering, deferred shading, and post-processing pass architectures. Includes G-buffer setup, lighting passes, and tone mapping.
9 promptsCompute Pipeline System
GPU compute shaders for particle simulation, physics, image processing, and data-parallel algorithms.
10 promptsGenerate a complete WebGPU initialization sequence in TypeScript. Include: navigator.gpu.requestAdapter() with fallback error handling, Device creation with required features and limits, Swap chain / canvas context configuration (preferred format), A basic render loop with requestAnimationFrame, Resize handling that recreates the swap chain, A helper class that encapsulates device, queue, and context. Add comments explaining each step and why the configuration choices were made.
Write a physically-based rendering (PBR) shader in WGSL for WebGPU. Include: Vertex shader with position, normal, tangent, and UV attributes, Fragment shader implementing Cook-Torrance BRDF (GGX distribution, Smith geometry, Fresnel-Schlick), Support for albedo, normal, metallic, roughness, and AO textures, Directional light + point lights (up to 4), Tone mapping (ACES filmic). Add struct definitions for uniforms and vertex input/output. Comment the math.
system
7 prompts
prompts
10 prompts
architecture
9 prompts
workflow
10 prompts
"The WGSL PBR shader prompt saved me a week. WebGPU documentation is sparse — this framework fills the gap."
Soren H.
Graphics Engineer
All 36 prompts across 4 modules are unlocked for your account.
Lifetime access