{"id":114406,"date":"2026-08-29T00:53:00","date_gmt":"2026-08-29T00:53:00","guid":{"rendered":"https:\/\/youzum.net\/vercel-ai-open-sources-vgpu-a-typescript-webgpu-library-for-ai-agent-shaders\/"},"modified":"2026-08-29T00:53:00","modified_gmt":"2026-08-29T00:53:00","slug":"vercel-ai-open-sources-vgpu-a-typescript-webgpu-library-for-ai-agent-shaders","status":"publish","type":"post","link":"https:\/\/youzum.net\/fr\/vercel-ai-open-sources-vgpu-a-typescript-webgpu-library-for-ai-agent-shaders\/","title":{"rendered":"Vercel AI Open-Sources vgpu: A TypeScript WebGPU Library for AI Agent Shaders"},"content":{"rendered":"

Shaders are still the hardest thing to ship on a normal web team. WebGPU gives you the hardware, then hands you adapters, bind group layouts, and pipeline descriptors before a single pixel moves. Vercel spent that cost internally building the shaders on vercel.com, and has now open-sourced the result. vgpu<\/a><\/strong><\/code> is a TypeScript library that treats .wgsl<\/code> files as importable modules, exposes one Gpu<\/code> context, and runs the same shader in a browser canvas, in headless Node.js, and in a CI snapshot test.<\/p>\n

Is it deployable?<\/strong><\/h2>\n

Yes<\/strong>,vgpu<\/code> is MIT licensed<\/a> and published to npm, so pnpm add vgpu<\/code> is the entire acquisition path. It is a library, not a hosted service, so there is no account, quota, or inference bill.<\/p>\n

One context, no hidden global state<\/strong><\/h2>\n

init()<\/code> acquires an adapter and device and returns a single Gpu<\/code> handle. Everything else hangs off it. The browser quick start in the README is four lines:<\/p>\n

\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
const gpu = await init();\nconst surface = gpu.surface(canvas, { dpr: [1, 2] });\nconst wave = gpu.effect(WAVE_WGSL, { set: { speed: 2 } });\ngpu.frame.loop(() => { wave.set({ time: gpu.time }); wave.draw(); });<\/code><\/pre>\n<\/div>\n<\/div>\n
surface<\/code> wraps the canvas and clamps device pixel ratio between 1 and 2. effect<\/code> compiles WGSL into a fullscreen effect whose uniforms are addressed by their WGSL names through set()<\/code>. Frames are explicit: passes, clears, and draws are calls, never implicit scene-graph state.<\/p>\n
WGSL as a Module System<\/strong><\/h2>\n
The differentiator is shader tooling. .wgsl<\/code> files import and export like TypeScript modules. vgpu<\/code> resolves the module graph, reflects bindings, removes unused declarations, and emits compact shader source at build time. That removes the hand-written binding declarations that normally drift out of sync with the shader. The README states a complete fullscreen effect ships in 25 KB gzipped, and that the budget is enforced in CI.<\/p>\n
Three Runtimes, One API<\/strong><\/h2>\n
The package exposes subpath exports for vgpu<\/code>, vgpu\/node<\/code>, vgpu\/mock<\/code>, vgpu\/scene<\/code>, vgpu\/client<\/code>, and vgpu\/core<\/code>. The Node path is Dawn-backed and renders offscreen:<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
const target = gpu.target({ size: [256, 256], format: \"rgba8unorm\" });\nconst pixels = await target.read();<\/code><\/pre>\n<\/div>\n<\/div>\n
That is what makes CI rendering practical. pixelmatch<\/code> and pngjs<\/code> are direct dependencies of the published package, consistent with the documented workflow where CI compiles the shader, renders a headless frame, and compares the snapshot. The mock adapter is deterministic and exists for tests that should not touch a GPU at all.<\/p>\n
The Agent Surface<\/strong><\/h2>\n
Vercel calls this an agent-first library, and the packaging backs that up. The package ships a vgpu<\/code> binary, so npx vgpu docs<\/code>, npx vgpu examples<\/code>, and npx vgpu check<\/code> work without a global install. vgpu.sh<\/code> publishes agents.md<\/code>, llms.txt<\/code>, and a full documentation export, plus a tokenless examples discovery API with an OpenAPI 3.1 description. A hosted read-only MCP server is available at vgpu.sh\/api\/mcp<\/code>, and @modelcontextprotocol\/server<\/code> is a direct dependency. There is also an installable agent skill in the repo.<\/p>\n
Comparison<\/strong><\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
Key Takeaways<\/strong><\/h2>\n