The Complete Production SOP: How to Deploy and Run WebGPU Compute Shaders & WGSL Pipeline in Autonomous AI Agents

---
name: "webgpu-nextgen-compute-pipeline"
description: "Execute high-performance parallel compute workloads and graphics with WebGPU and WGSL."
metadata:
  author: "W3C WebGPU"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "initialize webgpu device"
  - "write wgsl compute shader"
  - "dispatch webgpu compute pass"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["@webgpu/types"],
    "strict": true,
    "skipLibCheck": true
  }
}

export async function runComputePipeline(dataA: Float32Array, dataB: Float32Array): Promise<Float32Array> {
  if (!navigator.gpu) throw new Error("WebGPU not supported on this browser/platform.");
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) throw new Error("No suitable GPUAdapter found.");
  const device = await adapter.requestDevice();

  const shaderCode = `
    @group(0) @binding(0) var<storage, read> a: array<f32>;
    @group(0) @binding(1) var<storage, read> b: array<f32>;
    @group(0) @binding(2) var<storage, read_write> result: array<f32>;

    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
      let idx = global_id.x;
      if (idx >= arrayLength(&result)) { return; }
      result[idx] = a[idx] + b[idx];
    }
  `;

  const module = device.createShaderModule({ code: shaderCode });
  const pipeline = device.createComputePipeline({
    layout: 'auto',
    compute: { module, entryPoint: 'main' }
  });

  const byteLength = dataA.byteLength;
  const gpuBufferA = device.createBuffer({ size: byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
  const gpuBufferB = device.createBuffer({ size: byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
  const gpuBufferOut = device.createBuffer({ size: byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });
  const stagingBuffer = device.createBuffer({ size: byteLength, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST });

  device.queue.writeBuffer(gpuBufferA, 0, dataA);
  device.queue.writeBuffer(gpuBufferB, 0, dataB);

  const bindGroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: { buffer: gpuBufferA } },
      { binding: 1, resource: { buffer: gpuBufferB } },
      { binding: 2, resource: { buffer: gpuBufferOut } }
    ]
  });

  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginComputePass();
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.dispatchWorkgroups(Math.ceil(dataA.length / 64));
  passEncoder.end();

  commandEncoder.copyBufferToBuffer(gpuBufferOut, 0, stagingBuffer, 0, byteLength);
  device.queue.submit([commandEncoder.finish()]);

  await stagingBuffer.mapAsync(GPUMapMode.READ);
  const output = new Float32Array(stagingBuffer.getMappedRange().slice(0));
  stagingBuffer.unmap();
  return output;
}

#!/usr/bin/env bash
set -euo pipefail

echo "[Quality Gate] Validating WebGPU compute pipeline..."
npx tsc --noEmit

echo "[Quality Gate] Verification complete. Zero compilation errors."