Runnable v2 code examples by sourishkrout · Pull Request #331 · Mirascope/website

sourishkrout · 2025-11-27T00:51:47Z

This PR introduces a Pyodide runtime to exclusively running Mirascope v2's Anthropic examples (their SDK is Pyodide compatible) with pre-recorded cached HTTP interactions.

Here's what's implemented:

Runnable code blocks in /docs/mirascope/v2
Pyodide running in Worker Thread to prevent WASM blocking browser's UI thread
Safe-recording and validation of VCR.py cassettes for HTTP caching, see cachedHTTP/README.md.

What's missing:

Adding unit tests
Upstreaming Mirascope UI and changes to v2 examples
Not all block have cached HTTP recorded yet (for development; fixed easily)
Multi-model/-SDK support (currently limited to Anthropic due to WASM compat)

willbakst · 2025-12-02T17:26:45Z



-@llm.call(provider="openai", model_id="gpt-5", tools=[get_book_info])
+@llm.call(provider="anthropic", model_id="claude-sonnet-4-0", tools=[get_book_info])


nit: we might want to use a more recent 4.5 series model in these examples

absolutely. examples are sync'd from the mirascope repo so ideally all these changes need to be made upstream.

Ah yes, @teamdandelion has been doing that. I think we can leave as-is for now and worry about this later after we port the website in Mirascope/mirascope (we've made it a monorepo now where we're putting everything)

willbakst · 2025-12-02T17:28:39Z



-@llm.call(provider="openai:responses", model_id="gpt-5", thinking=True)
+@llm.call(provider="openai:responses", model_id="claude-sonnet-4-0", thinking=True)


this is incorrect. an upcoming release of v2 alpha will make this impossible (since provider and model id will be a single string)

willbakst · 2025-12-02T17:28:52Z

 print(response.pretty())

-with llm.model(provider="openai:responses", model_id="gpt-5", thinking=False):
+with llm.model(provider="openai:responses", model_id="claude-sonnet-4-0", thinking=False):


teamdandelion

Nice work! Besides the inline comments, my main questions are around maintainability and CI integration. As I understand it:

CI checks for every cassette file that it is fresh w.r.t. the corresponding py file
We know the py file was runnable as-written (post transformations) because that generated said cassette file
We can (with a fix I requested elsewhere) ensure that every py file has a matching cassette

Ergo, CI being green gives us an assurance that every example has a matching cassette and will run correctly in browser. Does that track?

A part of me wonders about having a CI job that actually loads pyodide in the bun test environment and tries running every example just to be sure, but that may be unnecessary (maybe we build that out only if we start actually seeing flakes)

teamdandelion · 2025-12-03T00:23:35Z

+    const sensitiveKeys = [
+      "x-api-key",
+      "authorization",
+      "x-auth-token",
+      "api-key",
+      "x-anthropic-api-key",
+      "x-openai-api-key",
+    ];


Hmm, I wonder if we can come up with a strategy to ensure synchronization between the sensitive keys here and in the mirascope vcr.py config. So as to ensure that we don't add a new provider, strip the key in Mirascope snapshots, but accidentally leak them here.

I think this is somewhat related to (1) porting the website over into Mirascope/mirascope and (2) refactoring the MLX and Grok custom caching into a more reusable upgrade to VCR. Perhaps we can import the VCR config here from the mirascope tests to keep them in sync.

teamdandelion · 2025-12-03T00:42:24Z

@@ -0,0 +1,123 @@
+"use client";


Are we actually using all these new components? I would love to slim this down to just components that are actually in use.

Agreed. We don't need all of them.

I was going to drop the unnecessary ones as part of upstreaming <CodeBlock .../> into mirascope-ui once the UX is settled which is still pending.

teamdandelion · 2025-12-03T00:43:14Z

@@ -0,0 +1,60 @@
+import * as React from "react";


Likewise, do we actually need all the new components here?

teamdandelion · 2025-12-03T00:45:29Z

+
+  console.log(`Validating cassette files in ${targetPath}...`);
+
+  const results = await validateCassetteDirectory(targetPath);


I believe this will not catch the case where there are new python example files that are missing cassettes

sourishkrout · 2025-12-03T22:02:01Z

Somehow VCR.py v8 breaks using the cached cassettes inside of Pyodide using Anthropic 🤦. Not going to diagnose this deeper since we're backing out Pyodide/WASM for now.

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

…s done Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

… display it Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

sourishkrout · 2025-12-06T00:06:49Z

Opening a new PR since we've decided to directions. Superseded by #336.

sourishkrout marked this pull request as draft November 27, 2025 00:51

sourishkrout marked this pull request as ready for review December 2, 2025 00:53

willbakst reviewed Dec 2, 2025

View reviewed changes

teamdandelion reviewed Dec 3, 2025

View reviewed changes

sourishkrout added 2 commits December 3, 2025 15:15

Use anthropic everywhere, only SDK that supports WASM

44be584

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

First stab at Pyodide-powered code block exec

113cdb8

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

sourishkrout force-pushed the seb/runnable branch from 8b8d504 to 34d45ac Compare December 3, 2025 23:26

sourishkrout added 22 commits December 3, 2025 15:52

Move RunnableProvider up component tree for DRY

139a36b

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Move to root-location and explain webcomponents import with comment

a02dc57

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Remove proxy

9e57f61

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Rewrite RunnableContext in preperation for VCR.py

4b071da

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Temp commit until mirascope UI is upstreamed and vcy.py casette gen i…

3f30bd4

…s done Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Handle errors ahead of surfacing them in the UX

028f8f9

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Safe recording of VCR.py's cassettes for examples

eee0e3e

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Newly generated examples

2ddc2db

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Work in progress to leverage preprocessing to serve VRC.py cassettes

1ad9c89

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Name after the what not the how

6aee7aa

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Use "system"

694c262

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Don't use preprocessing to serve VCR.py's cassettes

e4a32bb

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Check for VCR.py cassettes on load and rely on browser cached after

657d9ee

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Refactor

94073dd

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Same as dirname

5298a6b

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Streamline integration into code block

baf22ff

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Publish and watch safe cassettes but only if they are in /content

ce73648

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Record checksum, serve YAML via static server

1eef8ae

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Record cached HTTP with sha256 checksums

cc26605

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Catch instances where examples were updated but no cached HTTP recorded

0f932f5

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Better description

b1b5d28

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Break out as separate

de04a59

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

sourishkrout added 12 commits December 3, 2025 15:52

Worker thread needs ES bundling

aa2c458

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Separate run button available versus ready

3986db6

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Irrelevant todo

dc931da

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Do not check-in

d17c806

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Drop classifiers

0d5ae32

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

No longer required

c2f6cc9

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Don't duplicate errors

4d555fa

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Return type URL and write to /tmp

6205940

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

VCR.py 8 breaks cassette replay inside Pyodide

3ab0ae4

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

One step closer to desired UX

4f4a5c7

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Smaller text

ab246a7

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Move under script

86ba819

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

sourishkrout force-pushed the seb/runnable branch from 34d45ac to 86ba819 Compare December 3, 2025 23:53

sourishkrout added 14 commits December 4, 2025 10:44

Cassettes are no longer directly colocated with examples

6227a44

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Move and serve cassettes from a flattened sibling directory to content

cc9e5af

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Flattened cassettes with sha256

f57b29d

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Check if python files have valid cassettes

c789d2b

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Update docs

0475ef8

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Use validation script directly

35dfb3d

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Migrate to directly replaying cached HTTP cassettes (VCR.py)

3a71efc

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Comprehensive tests for VCR cassettes related logic

743222e

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Track run button states

b23fc6f

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Optimzie UI for replay experience

71e407d

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Track cachedHTTP's uv.lock

d98c0cf

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Track memo dep

3f42ad7

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Add all runnable intros, expect format tool since it's unclear how to…

c2a9a24

… display it Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

Top-level prop to turn runnable block on/off

f7d5dd7

Signed-off-by: Sebastian (Tiedtke) Huckleberry <sebastiantiedtke@gmail.com>

sourishkrout closed this Dec 6, 2025

sourishkrout mentioned this pull request Dec 6, 2025

Runnable code examples v3 #336

Open

7 tasks



		@llm.call(provider="openai", model_id="gpt-5", tools=[get_book_info])
		@llm.call(provider="anthropic", model_id="claude-sonnet-4-0", tools=[get_book_info])



		@llm.call(provider="openai:responses", model_id="gpt-5", thinking=True)
		@llm.call(provider="openai:responses", model_id="claude-sonnet-4-0", thinking=True)


		console.log(`Validating cassette files in ${targetPath}...`);

		const results = await validateCassetteDirectory(targetPath);

Uh oh!

Conversation

sourishkrout commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Here's what's implemented:

What's missing:

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

teamdandelion left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sourishkrout commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sourishkrout commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sourishkrout commented Nov 27, 2025 •

edited

Loading

sourishkrout commented Dec 3, 2025 •

edited

Loading

sourishkrout commented Dec 6, 2025 •

edited

Loading