Vercel has open-sourced vgpu, a TypeScript library designed to simplify shader development for WebGPU. The tool allows developers to treat .wgsl files as standard importable modules, manage a single Gpu context, and execute the same code across browser canvases, headless Node.js environments, and CI snapshot tests.
Deployment and licensing
The library is MIT licensed and available on npm. Developers can install it via pnpm add vgpu. Because it is a library rather than a hosted service, there are no accounts, quotas, or inference costs to manage.
Simple context management
An init() call acquires the adapter and device, returning a single Gpu handle. The browser quick start guide in the README demonstrates this with four lines of code:
const gpu = await init();
const surface = gpu.surface(canvas, { dpr: [1, 2] });
const wave = gpu.effect(WAVE_WGSL, { set: { speed: 2 } });
gpu.frame.loop(() => { wave.set({ time: gpu.time }); wave.draw(); });The surface function wraps the canvas while clamping the device pixel ratio between 1 and 2. The effect method compiles WGSL into a fullscreen effect, addressing uniforms by their WGSL names through set(). Frames are explicit: passes, clears, and draws are direct calls, avoiding implicit scene-graph state.
WGSL as a module system
The main advantage is the shader tooling. .wgsl files import and export like TypeScript modules. vgpu resolves the module graph, reflects bindings, removes unused declarations, and emits compact shader source at build time. This process removes the hand-written binding declarations that usually drift out of sync with the shader. The README notes a complete fullscreen effect ships in 25 KB gzipped, a limit enforced in CI.
Three runtimes, one API
The package offers subpath exports for vgpu, vgpu/node, vgpu/mock, vgpu/scene, vgpu/client, and vgpu/core. The Node path is backed by Dawn and renders offscreen:
const target = gpu.target({ size: [256, 256], format: "rgba8unorm" });
const pixels = await target.read();This enables practical CI rendering. pixelmatch and pngjs are direct dependencies, fitting the workflow where CI compiles the shader, renders a headless frame, and compares the snapshot. The mock adapter is deterministic and designed for tests that should not touch a GPU.
Agent surface
Vercel describes this as an agent-first library, a claim supported by the packaging. The package includes a vgpu binary, allowing npx vgpu docs, npx vgpu examples, and npx vgpu check to run without a global install. vgpu.sh publishes agents.md, llms.txt, and a full documentation export. It also provides a tokenless examples discovery API with an OpenAPI 3.1 description. A hosted read-only MCP server is available at vgpu.sh/api/mcp, and @modelcontextprotocol/server is a direct dependency. An installable agent skill is included in the repository.
Comparison
Key takeaways
- Vercel has open-sourced
vgpu, the WebGPU library it built to ship shaders on vercel.com. - One API surface runs in the browser, in headless Node.js via Dawn, and in a deterministic mock.
.wgslfiles import and export like TypeScript modules, with reflection for bindings and layouts.- A complete fullscreen effect ships in 25 KB gzipped, a budget the repo says CI enforces.
- MIT licensed, on npm at v0.3.1, with a CLI,
llms.txt, and a hosted read-only MCP endpoint.
