Build interactive web playground for zero-install onboarding

[dgenio]

Context / Problem

Users can't try ChainWeaver without installing it. The only way to experience the library is pip install + writing Python code. For a library competing for attention in a crowded agent-tooling space, zero-install onboarding dramatically lowers the barrier to first experience.

An interactive web playground lets visitors define tools (with mock functions), wire flows, execute them, and see step-by-step traces — all in the browser.

Proposal

Build a minimal interactive playground that can be deployed as a web application:

Option A: Streamlit App (recommended for speed)

playground/
├── app.py              # Streamlit application
├── requirements.txt    # streamlit, chainweaver
└── README.md           # Deployment instructions

Option B: Pyodide/WASM (zero-server, GitHub Pages)

ChainWeaver runs entirely in-browser via Pyodide since it has minimal dependencies (only Pydantic).

Features:

1. Pre-loaded examples — start with the double→add→format flow, switchable to data pipeline and MCP-style examples
2. Tool editor — define mock tool functions with input/output schemas
3. Flow builder — drag-and-drop or form-based step wiring
4. Execute button — run the flow and show step-by-step trace with timing
5. Mermaid visualization — render the flow as a diagram (links to Add flow visualization API (Mermaid + ASCII rendering) #79)
6. Share link — encode flow definition in URL parameters for sharing

Acceptance Criteria

• Playground is accessible via a URL (Streamlit Cloud, GitHub Pages, or similar)
• At least 3 pre-loaded example flows are available
• Users can modify tool functions and see results change
• Step-by-step execution trace is displayed with inputs/outputs per step
• Flow visualization (Mermaid or ASCII) is rendered alongside the trace
• Page loads in under 5 seconds
• No server-side state required (stateless)
• README in playground/ explains how to run locally and deploy
• Link added to main README

Implementation Notes

• Streamlit is the fastest path to a working prototype; Pyodide is more technically impressive but harder
• For Streamlit: use st.code() for tool function editing, st.dataframe() for execution traces
• ChainWeaver's only dependency is Pydantic, which is Pyodide-compatible — Option B is feasible
• Consider using streamlit-mermaid or raw HTML embed for Mermaid rendering
• Free deployment: Streamlit Community Cloud or GitHub Pages (for Pyodide)

Tasks

• Choose deployment approach (Streamlit vs Pyodide)
• Create playground/ directory with application code
• Implement pre-loaded examples
• Implement tool editor / flow builder UI
• Implement execution and trace display
• Add flow visualization
• Deploy to free hosting
• Add link to main README
• Add playground/README.md with local run instructions