Shadervine

ShaderVine

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.

Why

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.

Features

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

Tech Stack

| Layer | Technology | |-------|-----------| | Frontend | React 19, TypeScript 5.9, Vite, Tailwind CSS 4 | | Editor | Monaco Editor | | Graphics | WebGPU, WGSL, Three.js | | Node Graph | XY Flow (React Flow) | | Backend | Go 1.23, Gorilla Mux | | Database | MongoDB | | Agent Protocol | MCP (mark3labs/mcp-go) | | Deployment | Docker, Fly.io |

Getting Started

Prerequisites

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

Local Development

# 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

docker build -t shadervine .
docker run -p 8080:8080 -e MONGODB_URI= shadervine

Deploy to Fly.io

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

Project Structure

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)

License

MIT License. See [LICENSE](LICENSE).

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jonradoff
• Source: jonradoff/shadervine
• License: MIT
• Homepage: https://shadervine.metavert.io

Install and usage instructions live in the source repository linked above.