Playground
Assistant
Please explain your use case and what you want to build. Include details like user flow, key features, and preferred layout, and I will generate a runnable demo for you.
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="/styles.css" /> </head> <body> <h1>Hello world</h1> </body> </html>
Debug/Admin Panel
Imported API Options
Imported from the Mobiscroll MCP schemas (single source of truth).
Pipeline Config
When checked, enables Anthropic prompt caching on Claude requests.
When checked, runs the embedding search and includes the retrieved demo, guide, and API doc chunks. Uncheck to send the prompt with zero retrieved context.
When checked, the planner-selected API options are expanded into real code before the builder runs. Uncheck to leave the tokens for the builder to resolve via MCP.
Clarifier
Planner
Builder
Pipeline log — press Reload last call on a stage card above to restore output. Edit the Response below, then Start from here on that stage.
Index Demos
Indexes only: mobiscroll-demos-javascript/src/demos/**/*.js
Stats
Search
Chunks
Max auto-fix attempts on runtime error (0 = disabled).
Runtime Errors
No runtime errors detected.
Console Errors
No console errors.
System Prompt (instructions)
User Message (input)
Step 0 — Clarifier
questionsStep 1 — Planner
User Message (request + context)
Not run in this pipeline.
Response (recipes expanded — edit, then Start from here)
Grey blocks = expanded recipe inserts from the DB.
Generated events
Runs after planner — parsed events-spec → deterministic generator.
Expected recipes test
Pick a use case and run Build.
Raw LLM Request
Not run in this pipeline.
Raw LLM Response
Not run in this pipeline.
MCP Tool Usage
Not run in this pipeline.
Step 2 — Builder
User Message (request + context)
Not run in this pipeline.
Response (generated HTML — edit to interfere)
Raw LLM Request
Not run in this pipeline.
Raw LLM Response
Not run in this pipeline.
MCP Tool Usage
Not run in this pipeline.
Code Blueprint / Template editor
blueprint: agenda · calendar · scheduler · timelineEdit the canonical code blueprint, save it to the server, or load HTML into Sandpack with the button below. Opening this tab does not change the editor or preview.
Simulate planner pruning
Hover an option to preview its brief below. Check to prune. Jump chips above the blueprint list only the tokens in the current OPTIONS: line.
Step 1 → pick a component above
Click Button → Popup → a place — the rule is added automatically. Then Apply nesting.
Use case editor
edit test prompts and expected recipes — saved to server + this browser*token* in §7b Selected
Description
Add recipe
Loading recipe catalog…
Coverage matrix — expected recipes across every use case · ● covered · n = cases per token (orange = only one) · the selected case is highlighted
Code recipes
reusable demo snippets the planner can reference as*token* — expanded into the build brief before the builder runs Collection
Recipes — in catalog
Component — from DB
Options — by kind
Event Generator
deterministic event data (correct ISO dates) — same function the pipeline uses post-plannerSpec
events-spec for the planner
The planner must emit this block in §7 for these settings (updates live).
Output
Save Use Case
capture the current generation with a 10-item 0/1 rubric (total: 0–10)Hover any label to see what the dimension measures. Scores are 1 (worst) – 10 (best).
Saved cases