[{"data":1,"prerenderedAt":373},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Finteractive-code-execution-with-artifacts":204,"\u002Fblog\u002Finteractive-code-execution-with-artifacts-surround":368},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200],{"title":5,"path":6,"stem":7},"You do not have time to not have tests","\u002Fblog\u002Fyou-do-not-have-time-to-not-have-tests","2.blog\u002F20211217.you-do-not-have-time-to-not-have-tests",{"title":9,"path":10,"stem":11},"Migrate Vue 2 with Vuetify and Jest to Vite and Vitest","\u002Fblog\u002Fmigrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest","2.blog\u002F20220109.migrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest",{"title":13,"path":14,"stem":15},"I am a Dark Matter Developer","\u002Fblog\u002Fi-am-a-dark-matter-developer","2.blog\u002F20220626.i-am-a-dark-matter-developer",{"title":17,"path":18,"stem":19},"Why using Conventional commits is useful","\u002Fblog\u002Fusing-conventional-commits","2.blog\u002F20240623.using-conventional-commits",{"title":21,"path":22,"stem":23},"Why you should make a toolbox repository","\u002Fblog\u002Fwhy-you-should-make-a-toolbox-repository","2.blog\u002F20240630.Why-you-should-make-a-toolbox-repository",{"title":25,"path":26,"stem":27},"Apache Airflow Part 1 - Why and Goals for a near Serverless ELT","\u002Fblog\u002Fapache-airflow-part-1-why-and-goals","2.blog\u002F20240710.apache-airflow-part-1-why-and-goals",{"title":29,"path":30,"stem":31},"Oh My Zsh on your server","\u002Fblog\u002Foh-my-zsh-on-your-server","2.blog\u002F20240711.oh-my-zsh-on-your-server",{"title":33,"path":34,"stem":35},"Fire tablet and YouTube Kids","\u002Fblog\u002Ffire-tablet-and-youtube-kids","2.blog\u002F20240714.fire-tablet-and-youtube-kids",{"title":37,"path":38,"stem":39},"Using Ollama and Continue as a GitHub Copilot Alternative","\u002Fblog\u002Fusing-ollama-and-continue-as-github-copilot-alternative","2.blog\u002F20240723.using-ollama-and-continue-as-github-copilot-alternative",{"title":41,"path":42,"stem":43},"Debugging Local Packages Made Easy with pnpm","\u002Fblog\u002Fdebugging-local-packages-with-pnpm-link","2.blog\u002F20250422.debugging local-packages-with-pnpm-link",{"title":45,"path":46,"stem":47},"Two Weeks with Cloudflare AI and Tools","\u002Fblog\u002Ftwo-weeks-with-cloudflare-ai-and-tools","2.blog\u002F20250509.two-weeks-with-cloudflare-aI-and-tools",{"title":49,"path":50,"stem":51},"Adding Prompts to VS Code - How I Learned to Stop Worrying and Love AI Context","\u002Fblog\u002Fadding-prompts-to-vscode","2.blog\u002F20250528.adding-prompts-to-vscode",{"title":53,"path":54,"stem":55},"My Best Practices","\u002Fblog\u002Fmy-best-practicies","2.blog\u002F20250607.my-best-practicies",{"title":57,"path":58,"stem":59},"Creating my own CLI Tool - Towles Tool","\u002Fblog\u002Ftowles-tool","2.blog\u002F20250607.towles-tool",{"title":61,"path":62,"stem":63},"Software Development Best Practices & ITIL","\u002Fblog\u002Fsoftware-engineering-and-itil-best-practices","2.blog\u002F20250612.software-engineering-and-itil-best-practices",{"title":65,"path":66,"stem":67},"Voice to Text","\u002Fblog\u002Fvoice-to-text","2.blog\u002F20250622.voice-to-text",{"title":69,"path":70,"stem":71},"Setting Up ComfyUI - A Better Alternative to Fooocus","\u002Fblog\u002Fcomfy-ui-setup","2.blog\u002F20250628.comfy-ui-setup",{"title":73,"path":74,"stem":75},"Voice to System","\u002Fblog\u002Fvoice-to-system","2.blog\u002F20250705.voice-to-system",{"title":77,"path":78,"stem":79},"Tips for Claude Code","\u002Fblog\u002Ftips-for-claude-code","2.blog\u002F20250713.tips-for-claude-code",{"title":81,"path":82,"stem":83},"Review That AI Code: Why I Read Every Line Generated Code","\u002Fblog\u002Freview-that-ai-code","2.blog\u002F20250720.review-that-ai-code",{"title":85,"path":86,"stem":87},"My Context Engineering Journey: From Dev Scripts to AI Collaboration","\u002Fblog\u002F20250803-1.my-context-engineering-journey","2.blog\u002F20250803-1.my-context-engineering-journey",{"title":89,"path":90,"stem":91},"Context Engineering at Scale: Enterprise Lessons and the Future of Development","\u002Fblog\u002F20250803-2.context-engineering-at-scale","2.blog\u002F20250803-2.context-engineering-at-scale",{"title":93,"path":94,"stem":95},"Check That Your Tools and Linters Do Not Burn Tokens","\u002Fblog\u002Fcheck-that-your-tools-and-linters-do-not-burn-tokens","2.blog\u002F20250806.check-that-your-tools-and-linters-do-not-burn-tokens",{"title":97,"path":98,"stem":99},"Markdown + AI: The Communication Protocol That Changes Everything","\u002Fblog\u002Fmarkdown-plus-ai-the-communication-protocol-that-changes-everything","2.blog\u002F20250814.markdown-plus-ai-the-communication-protocol-that-changes-everything",{"title":101,"path":102,"stem":103},"Finally: Type-Safe AI in Production (And Why I'm Here For It)","\u002Fblog\u002Ffinally-type-safe-ai-in-production-and-why-im-here-for-it","2.blog\u002F20250819.finally-type-safe-ai-in-production-and-why-im-here-for-it",{"title":105,"path":106,"stem":107},"Dotfiles: Masterpiece or Late Stage Picasso?","\u002Fblog\u002Fdotfiles-masterpiece-or-late-stage-picasso","2.blog\u002F20250822.dotfiles-masterpiece-or-late-stage-picasso",{"title":109,"path":110,"stem":111},"Beyond API Wrappers: Building State-Driven MCP Servers for Long-Horizon Agent Orchestration","\u002Fblog\u002Fbeyond-api-wrappers-mcp-servers","2.blog\u002F20250907.beyond-api-wrappers-mcp-servers",{"title":113,"path":114,"stem":115},"Why Vertical Integration Wins: A Software Engineer's Case for Owning Your Stack","\u002Fblog\u002Fwhy-i-bought-tesla-model-3-vertical-integration","2.blog\u002F20250928.why-i-bought-tesla-model-3-vertical-integration",{"title":117,"path":118,"stem":119},"The Min-Maxer's Trifecta: Building Tools for the Game You Actually Play","\u002Fblog\u002Fmin-maxer-trifecta","2.blog\u002F20251004.min-maxer-trifecta",{"title":121,"path":122,"stem":123},"Read The Source: Learning by Cutting Out The Middleman and RTFM","\u002Fblog\u002Fread-the-source","2.blog\u002F20251010.read-the-source",{"title":125,"path":126,"stem":127},"The Exponential Shift: Why AI Progress Feels Different Now","\u002Fblog\u002Fthe-exponential-shift","2.blog\u002F20251015.the-exponential-shift",{"title":129,"path":130,"stem":131},"Plan Mode for Your Problems, Edit Mode for Claude's","\u002Fblog\u002Fplan-mode-problems-edit-mode-solutions","2.blog\u002F20251019.plan-mode-problems-edit-mode-solutions",{"title":133,"path":134,"stem":135},"AWS Aurora DSQL Looked Perfect Until I Needed the Connection String","\u002Fblog\u002Faws-aurora-dsql-postgres-serverless-authentication","2.blog\u002F20251028.aws-aurora-dsql-postgres-serverless-authentication",{"title":137,"path":138,"stem":139},"Switchback: Browser History for Your Thoughts","\u002Fblog\u002Fswitchback-second-order-reasoning","2.blog\u002F20251205.switchback-second-order-reasoning",{"title":141,"path":142,"stem":143},"AI Pairing: Notes to Self","\u002Fblog\u002Fai-pairing-notes-to-self","2.blog\u002F20251216.ai-pairing-notes-to-self",{"title":145,"path":146,"stem":147},"I've Been Sleeping on Zellij","\u002Fblog\u002Fsleeping-on-zellij","2.blog\u002F20251229.sleeping-on-zellij",{"title":149,"path":150,"stem":151},"Implementing a Ralph Wiggum Loop: The Secret is Session Markers","\u002Fblog\u002Fimplementing-ralph-wiggum-loop-for-autonomous-ai-coding","2.blog\u002F20260114.implementing-ralph-wiggum-loop-for-autonomous-ai-coding",{"title":153,"path":154,"stem":155},"Goodhart's Law Ate My Context Window","\u002Fblog\u002Fgoodharts-law-ate-my-context-window","2.blog\u002F20260119.goodharts-law-ate-my-context-window",{"title":157,"path":158,"stem":159},"Claude Code's Hidden Multi-Agent System Is Real","\u002Fblog\u002Fclaude-code-hidden-multi-agent-system","2.blog\u002F20260124.claude-code-hidden-multi-agent-system",{"title":161,"path":162,"stem":163},"Free Printable Math Sheets for Kids — Number Chart, Skip Counting, Multiplication, and More","\u002Fblog\u002Ffree-printable-number-chart-and-coin-sheets","2.blog\u002F20260214.free-printable-number-chart-and-coin-sheets",{"title":165,"path":166,"stem":167},"We Are Near the End of the Exponential","\u002Fblog\u002Fnear-the-end-of-the-exponential","2.blog\u002F20260214.near-the-end-of-the-exponential",{"title":169,"path":170,"stem":171},"Free Printable Language Arts Sheets for Kids — Sight Words, Parts of Speech, Homophones, and More","\u002Fblog\u002Ffree-printable-sight-words-and-grammar-sheets","2.blog\u002F20260215.free-printable-sight-words-and-grammar-sheets",{"title":173,"path":174,"stem":175},"Interactive Code Execution with Artifacts","\u002Fblog\u002Finteractive-code-execution-with-artifacts","2.blog\u002F20260215.interactive-code-execution-with-artifacts",{"title":177,"path":178,"stem":179},"Free Printable Telling Time Worksheet for Kids — Clock Reference & Practice Sheet","\u002Fblog\u002Ffree-printable-telling-time-worksheet","2.blog\u002F20260216.free-printable-telling-time-worksheet",{"title":181,"path":182,"stem":183},"Claude Code Skills: Teaching AI Your Playbook","\u002Fblog\u002Fclaude-code-skills-guide","2.blog\u002F20260221.claude-code-skills-guide",{"title":185,"path":186,"stem":187},"Building a Multi-Agent Loan Approval System with Human-in-the-Loop","\u002Fblog\u002Fmulti-agent-loan-approval-human-in-the-loop","2.blog\u002F20260225.multi-agent-loan-approval-human-in-the-loop",{"title":189,"path":190,"stem":191},"The Inception of AI Infrastructure: Bottlenecks All the Way Down","\u002Fblog\u002Fbiggest-bottleneck-scaling-ai-compute","2.blog\u002F20260313.biggest-bottleneck-scaling-ai-compute",{"title":193,"path":194,"stem":195},"What I Tell Teams About Claude Code","\u002Fblog\u002Fwhat-i-tell-teams-about-claude-code","2.blog\u002F20260314.what-i-tell-teams-about-claude-code",{"title":197,"path":198,"stem":199},"The Hardest Part of AI Isn't the AI","\u002Fblog\u002Fthe-hardest-part-of-ai-isnt-the-ai","2.blog\u002F20260327.the-hardest-part-of-ai-isnt-the-ai",{"title":201,"path":202,"stem":203},"Claude Code Hooks: The Capability I Left on the Table","\u002Fblog\u002Fclaude-code-hooks-capability-left-on-the-table","2.blog\u002F20260401.claude-code-hooks-capability-left-on-the-table",{"id":205,"title":173,"authors":206,"badge":212,"body":214,"date":357,"description":358,"extension":359,"image":360,"meta":363,"navigation":364,"path":174,"seo":365,"status":366,"stem":175,"__hash__":367},"posts\u002F2.blog\u002F20260215.interactive-code-execution-with-artifacts.md",[207],{"name":208,"to":209,"avatar":210},"Chris Towles","https:\u002F\u002Ftwitter.com\u002FChris_Towles",{"src":211},"\u002Fimages\u002Fctowles-profile-512x512.png",{"label":213},"AI",{"type":215,"value":216,"toc":347},"minimark",[217,229,232,237,249,252,256,259,265,269,272,276,280,283,287,291,294,327,330,333,337,340],[218,219,220,221,228],"p",{},"I've been wanting a way to let readers run code directly in blog posts — not just read about it. Today I'm shipping interactive artifacts powered by ",[222,223,227],"a",{"href":224,"rel":225},"https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Ftool-use\u002Fcode-execution",[226],"nofollow","Anthropic's Code Execution Tool",".",[218,230,231],{},"Every code block below runs in an isolated Linux container on Anthropic's infrastructure. No local setup needed, no browser sandboxing tricks. Real Python, real output.",[233,234,236],"h2",{"id":235},"how-it-works","How It Works",[218,238,239,240,244,245,248],{},"The ",[241,242,243],"code",{},"::code-runner"," component sends your code (or a prompt) to Claude via the Messages API with the ",[241,246,247],{},"code_execution"," tool enabled. Claude runs it in a sandboxed container and streams back stdout, stderr, and any generated files.",[218,250,251],{},"The container persists between runs within the same artifact, so you can build up state across multiple executions.",[233,253,255],{"id":254},"example-1-fibonacci-sequence","Example 1: Fibonacci Sequence",[218,257,258],{},"A classic starting point. Hit \"Run\" to see the first 15 Fibonacci numbers.",[260,261],"code-runner",{"language":262,"title":263,"code":264},"python","Fibonacci Generator","def fib(n):\\n    a, b = 0, 1\\n    for _ in range(n):\\n        yield a\\n        a, b = b, a + b\\n\\nprint(list(fib(15)))",[233,266,268],{"id":267},"example-2-data-visualization","Example 2: Data Visualization",[218,270,271],{},"This one generates a matplotlib chart. The resulting PNG renders inline below the output.",[260,273],{"language":262,"title":274,"prompt":275},"Population Bar Chart","Create a horizontal bar chart showing estimated 2025 world population by continent. Use matplotlib with a dark background style. Save as population.png.",[233,277,279],{"id":278},"example-3-quick-math","Example 3: Quick Math",[218,281,282],{},"Edit the code and re-run to experiment.",[260,284],{"language":262,"title":285,"code":286},"Prime Sieve","def sieve(limit):\\n    is_prime = [True] * (limit + 1)\\n    is_prime[0] = is_prime[1] = False\\n    for i in range(2, int(limit**0.5) + 1):\\n        if is_prime[i]:\\n            for j in range(i*i, limit + 1, i):\\n                is_prime[j] = False\\n    return [i for i, p in enumerate(is_prime) if p]\\n\\nprimes = sieve(100)\\nprint(f'Found {len(primes)} primes up to 100:')\\nprint(primes)",[233,288,290],{"id":289},"under-the-hood","Under the Hood",[218,292,293],{},"The artifact system uses three Anthropic beta APIs:",[295,296,297,309,318],"ul",{},[298,299,300,304,305,308],"li",{},[301,302,303],"strong",{},"Code Execution"," (",[241,306,307],{},"code-execution-2025-08-25",") — runs code in isolated containers",[298,310,311,304,314,317],{},[301,312,313],{},"Files API",[241,315,316],{},"files-api-2025-04-14",") — downloads generated files (images, HTML, etc.)",[298,319,320,304,323,326],{},[301,321,322],{},"Skills API",[241,324,325],{},"skills-2025-10-02",") — optional document generation capabilities",[218,328,329],{},"Each execution streams results via SSE, so you see output as it happens rather than waiting for the full response.",[218,331,332],{},"The container has Python with common libraries pre-installed (numpy, pandas, matplotlib, etc.) but no internet access — it's fully sandboxed.",[233,334,336],{"id":335},"whats-next","What's Next",[218,338,339],{},"This is the foundation for more interactive content. I'm exploring adding artifact execution to the chat interface and supporting more languages beyond Python.",[218,341,342,343,228],{},"If you have ideas for interactive examples you'd like to see, let me know on ",[222,344,346],{"href":209,"rel":345},[226],"X",{"title":348,"searchDepth":349,"depth":349,"links":350},"",2,[351,352,353,354,355,356],{"id":235,"depth":349,"text":236},{"id":254,"depth":349,"text":255},{"id":267,"depth":349,"text":268},{"id":278,"depth":349,"text":279},{"id":289,"depth":349,"text":290},{"id":335,"depth":349,"text":336},"2026-02-15","Run Python code directly in blog posts using Anthropic Code Execution. Try the interactive examples below — every snippet runs in an isolated container on Anthropic infrastructure.","md",{"src":361,"alt":362},"\u002Fimages\u002Fblog\u002F20260215-1430-interactive-code-execution-with-artifacts.jpeg","A glowing terminal window floating in mid-air inside a sleek, dark workspace, its screen displaying vibrant Python code alongside a colorful matplotlib chart rendering in real-time, with streams of luminous data particles flowing from the terminal into a translucent isolated container hovering beside it. Dramatic rim lighting in cool electric blue and warm amber picks out the edges of the floating elements against a deep charcoal background, with subtle bokeh circles suggesting depth. Cinematic photorealism, 8k quality, shallow depth of field with tack-sharp focus on the terminal screen, professional photography composition following rule of thirds. High contrast color grading with teal, orange, and violet accents, 16:9 landscape format with negative space on the left for potential text overlay.",{},true,{"title":173,"description":358},"published","VLNR2GePlb9Fs3JTH7OuwQjQd8Rl7E4kTDl7rfHHX24",[369,371],{"title":169,"path":170,"stem":171,"description":370,"status":366,"children":-1},"Free printable PDF worksheets for kids — Dolch sight words, parts of speech, punctuation, homophones, contractions, alphabet chart, and handwriting practice. Download, print, and learn.",{"title":177,"path":178,"stem":179,"description":372,"status":366,"children":-1},"Free printable PDF worksheet for kids learning to tell time — analog clock reference with hour and minute hands, common times, and 12 practice clocks. Download, print, and learn.",1776221196452]