---
title: Interactive Playground
description: Run Reactive Agents in your browser — no install needed. Powered by StackBlitz WebContainers.
sidebar:
  order: 2
---

import { Tabs, TabItem, Aside, Steps } from '@astrojs/starlight/components';

Run a real agent in your browser — no local install, no cloning, no CLI setup. Powered by [StackBlitz WebContainers](https://stackblitz.com), which runs Node.js entirely in-browser.

## Quick setup

<Aside type="tip" title="Edit .env directly in the editor">
Each playground has a `.env` file open in the editor. Replace `your_gemini_key_here` with your actual key, then click the terminal **restart** button (↺).
</Aside>

Get a free Gemini API key at [ai.google.dev](https://ai.google.dev) — no credit card required.

| Provider | Free tier? | `.env` variable |
|----------|-----------|----------------|
| **Google Gemini** ← recommended | ✅ Yes — generous free tier | `GOOGLE_API_KEY` |
| Anthropic Claude | ❌ Pay-as-you-go | `ANTHROPIC_API_KEY` |
| OpenAI | ❌ Pay-as-you-go | `OPENAI_API_KEY` |
| Local Ollama | ✅ Free | `PROVIDER=ollama` + `OLLAMA_ENDPOINT` (HTTPS tunnel — see below) |

<Aside type="note">
**Why not Secrets?** The embedded iframe hides the Stackblitz Secrets panel. Editing `.env` directly in the editor is the reliable alternative — keys stay in your browser session only.
</Aside>

---

## Scenarios

<Tabs>
  <TabItem label="Hello Agent">

    **The simplest possible agent.** One question, one answer. Start here to see the core API in action.

    Set `QUESTION` in Secrets to ask anything you like.

    <iframe
      src="https://stackblitz.com/github/tylerjrbuell/reactive-agents-ts/tree/main/apps/stackblitz/01-hello-agent?embed=1&file=README.md,.env,src%2Fagent.ts&terminal=start&theme=dark&view=editor"
      style="width:100%;height:600px;border:0;border-radius:8px"
      credentialless={true}
      allow="cross-origin-isolated"
      loading="lazy"
      title="Hello Agent — Reactive Agents playground"
    />

  </TabItem>
  <TabItem label="Tool Integration">

    **Agent with built-in tools.** The agent uses `code-execute` and `scratchpad-write` — tools that run inside the WebContainer sandbox. No extra API keys needed.

    Set `TASK` in Secrets to give the agent a custom challenge.

    <iframe
      src="https://stackblitz.com/github/tylerjrbuell/reactive-agents-ts/tree/main/apps/stackblitz/02-tool-integration?embed=1&file=README.md,.env,src%2Fagent.ts&terminal=start&theme=dark&view=editor"
      style="width:100%;height:600px;border:0;border-radius:8px"
      credentialless={true}
      allow="cross-origin-isolated"
      loading="lazy"
      title="Tool Integration — Reactive Agents playground"
    />

  </TabItem>
  <TabItem label="Strategy Demo">

    **Two strategies, same task.** See how `reactive` and `plan-execute-reflect` differ in steps, tokens, and style. Set `STRATEGY_B` to try `tree-of-thought`, `reflexion`, or `adaptive`.

    <iframe
      src="https://stackblitz.com/github/tylerjrbuell/reactive-agents-ts/tree/main/apps/stackblitz/03-strategy-demo?embed=1&file=README.md,.env,src%2Fagent.ts&terminal=start&theme=dark&view=editor"
      style="width:100%;height:600px;border:0;border-radius:8px"
      credentialless={true}
      allow="cross-origin-isolated"
      loading="lazy"
      title="Strategy Demo — Reactive Agents playground"
    />

  </TabItem>
</Tabs>

---

## Using local Ollama

<Aside type="caution">
**`http://localhost:11434` does NOT work in the embed.** The StackBlitz
WebContainer routes `localhost` to its own sandbox, not your machine — and
a plain LAN IP is blocked as mixed content on this HTTPS page. The only way
to reach your local Ollama from the hosted playground is an **HTTPS tunnel**
(Chrome only). Bare `localhost` works *solely* if you clone this repo and
run the scenario on your own machine, outside the browser sandbox.
</Aside>

<Steps>
1. Start Ollama with CORS open (it must accept the tunnel origin):

   **Mac/Linux:**
   ```bash
   OLLAMA_ORIGINS=* ollama serve
   ```
   **Windows:**
   ```cmd
   set OLLAMA_ORIGINS=* && ollama serve
   ```

2. Pull a model if you haven't already:
   ```bash
   ollama pull llama3.2
   ```

3. Expose Ollama over HTTPS with a tunnel:
   ```bash
   cloudflared tunnel --url http://localhost:11434
   # or:  ngrok http 11434
   ```
   Copy the `https://…` URL it prints.

4. In the `.env` tab, set:
   ```
   PROVIDER        = ollama
   OLLAMA_ENDPOINT = https://YOUR-TUNNEL.trycloudflare.com
   MODEL           = llama3.2
   ```

5. Click the terminal **restart** button (↺) to re-run with the new env vars.
</Steps>

<Aside type="note">
This tunnel hop is the gap the v0.12 browser-extension Ollama bridge will
close. Until then, the zero-setup path is a cloud key (Gemini free tier).
</Aside>
