Design agent-first Shader Playground

[devallibus]

Overview

Design an agent-first shader editor ("Shader Playground") where AI agents are the primary code authors, with humans providing intent and feedback.

Concept

┌──────────────────────────────────────────────┐
│           shaderbase.com/playground           │
├──────────────┬───────────────────────────────┤
│  Chat Panel  │   Live WebGL Preview          │
│  (user ↔     │   ┌─────────────────────┐     │
│   agent)     │   │  Rendered Shader     │     │
│              │   │  [screenshot API]    │     │
│              │   └─────────────────────┘     │
│  "Make it    │                               │
│   more       │   GLSL Editor (Monaco)        │
│   organic"   │   [editable by human or agent]│
│              │                               │
│              │   Uniform Controls             │
├──────────────┴───────────────────────────────┤
│  MCP: create | update | preview | submit      │
└──────────────────────────────────────────────┘

Key Workflow

1. User describes what they want (natural language or reference image)
2. Agent writes the shader (using GLSL skills)
3. Live preview renders instantly
4. Agent gets screenshot feedback via MCP and iterates
5. Result submits to ShaderBase registry with provenance

MCP Tools (new)

• create_shader — start session with canvas
• update_shader — push GLSL code, get screenshot back
• get_preview — screenshot current render
• inspect_uniform / set_uniform — live uniform control
• get_errors — compilation errors with line numbers
• submit_to_registry — package as ShaderBase shader

Key Differentiator

Traditional editors: human writes code, sees result.
Shader Playground: human describes intent, agent writes code, both see result.

Integration

• Same shader.json manifest schema
• Recipes generated from playground sessions
• Community features shared with main shaderbase.com
• CLI shaderbase add works with playground-created shaders

Status

Design phase only. Implementation after skills package ships.