A WebGPU shader programming toolkit for creating, evolving, and exporting real-time visual effects. Write WGSL fragment shaders with live preview, tweak parameters with interactive uniform controls, run GPU compute simulations, and export to Unity, Unreal, Blender, and Three.js.

WebGPU changes what's possible in a browser. It brings low-overhead, modern GPU access comparable to Vulkan and Metal — including compute shaders that enable GPU simulations previously confined to native apps. ShaderVine puts that power into an accessible creative tool: no install, no gatekeepers, no app store tax.

AI is remarkably good at generating shader code from natural language, but visual iteration remains a bottleneck — describing what a shader should look like through text is lossy. ShaderVine bridges this gap with direct manipulation: live preview, parameter sliders, genetic evolution, and shader morphing let you explore the visual space hands-on.

The built-in MCP server exposes every shader operation as a tool that AI agents can call — search, create, fork, and export shaders programmatically. This makes ShaderVine a native participant in the agentic web.

Shader Editor

• Monaco-based WGSL code editor with syntax highlighting
• Live preview on a fullscreen quad or 3D shapes (sphere, cube, torus, cylinder, cone)
• Real-time compilation error reporting with line numbers

Interactive Controls

• Uniform sliders with configurable min/max/step
• Randomize and mutate buttons for parameter exploration
• Mouse position and click state passed as built-in uniforms

GPU Compute Simulations

• 16 compute shader presets with ping-pong buffer architecture: Game of Life, Reaction-Diffusion, Physarum, Slime Mold, Fluid Simulation, Wave Ripple, Falling Sand, Erosion, Particle Swarm, Particle Trails, Magnetic Field, DLA, Turing Patterns, Noise Landscape, Domain Warp, Turbulence
• Adjustable grid size and simulation speed

Creative Tools

• Shader morphing — blend between any two shaders with a crossfade factor
• Genetic evolution — generate and select from mutated shader variants
• History scrubber — navigate through every edit, morph, and evolution step
• Visual node graph editor for composing shaders without code

Export

• WGSL (raw WebGPU shading language)
• HLSL (DirectX)
• Unity ShaderLab (complete .shader file with properties)
• Unreal Engine (Custom Expression node for Material Editor)
• Blender OSL (Open Shading Language for Cycles)
• Three.js (standalone HTML with WebGPU scene)

Three.js Sandbox

• Drop any shader onto 3D geometry with lighting and environment controls
• Export standalone HTML scenes

MCP Server

• AI agents can list, search, create, fork, and export shaders via Model Context Protocol
• Integrates with Claude, Cursor, and any MCP-compatible client

• Go 1.23+
• Node.js 22+
• MongoDB (local or Atlas)
• A browser with WebGPU support (Chrome 113+, Edge 113+, Firefox 141+, Safari 18+)

# Clone the repo
git clone https://github.com/nickadjective/shadervine.git
cd shadervine

# Set up MongoDB connection
echo "MONGODB_URI=mongodb://localhost:27017" > backend/.env

# Install frontend dependencies
cd frontend && npm install && cd ..

# Start both frontend and backend
./start.sh

The frontend runs at http://localhost:4466 and the backend at http://localhost:4467.

docker build -t shadervine .
docker run -p 8080:8080 -e MONGODB_URI=<your-uri> shadervine

# First deploy sets up the app and secrets
./deploy.sh

shadervine/
  frontend/
    src/
      components/       # React UI (Editor, Preview, Explorer, Controls, Export, Sandbox, NodeGraph)
      engine/           # WebGPU renderer with compute shader support
      api/              # Backend API client
      types/            # TypeScript type definitions
  backend/
    cmd/shadervine/     # Server entrypoint
    internal/
      handlers/         # REST API handlers + shader presets
      mcp/              # MCP server for AI agent integration
      middleware/       # Anonymous auth
      models/           # MongoDB models
      config/           # YAML config loader
      export/           # WGSL-to-HLSL/Unity/Unreal/Blender/Three.js transpilers
    pkg/healthz/        # Health check endpoint
    config/             # Environment configs (dev.yaml, prod.yaml)

MIT License. See LICENSE.