> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fireworks.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Side-by-side demo

> Race Claude Code on Anthropic against Fireworks on the same prompt with fireconnect demo

Not ready to rewire your whole setup? **`fireconnect demo`** runs the same code-generation prompt through both sides: your current Claude Code provider on Anthropic, and a Fireworks model on the challenger side. It then puts the results next to each other so you can judge speed, cost, and output quality yourself.

The demo is read-only against your environment. It uses throwaway config dirs, so your `~/.claude/settings.json` is never touched.

## What you get

1. **Live terminal race**: both models stream code in a split-pane TUI with real token counts and wall-clock timers.
2. **Browser comparison**: both generated apps run side by side, with measured speed and cost at the bottom.
3. **Shareable artifacts**: outputs land in `./fireconnect-demo/` (`compare.html`, `result.json`, stream logs).

### Browser comparison

Side-by-side runnable apps with measured speed and cost:

<Frame caption="Browser comparison from a real fireconnect demo run: Anthropic vs Fireworks Tetris apps with measured speed and cost">
  <img src="https://mintcdn.com/fireworksai/PImAAvL6gG4EOov7/images/fireconnect/demo-compare.png?fit=max&auto=format&n=PImAAvL6gG4EOov7&q=85&s=af7ae22f4398a5d7a10c0c0663c466d3" alt="FireConnect demo browser comparison page with Tetris apps from Anthropic and Fireworks side by side and speed and cost metrics" width="3200" height="1960" data-path="images/fireconnect/demo-compare.png" />
</Frame>

### Terminal race

Split-pane TUI while both models stream the same prompt:

<Frame caption="Real fireconnect demo race: Fireworks GLM 5.2 Fast finishes in 26.3s while Anthropic Claude Sonnet is still running">
  <img src="https://mintcdn.com/fireworksai/PImAAvL6gG4EOov7/images/fireconnect/demo-terminal-race.gif?s=f21f499830a50136cce32478f4d51147" alt="Animated capture of a real FireConnect demo split-pane terminal race: Anthropic Claude Sonnet vs Fireworks GLM 5.2 Fast on a Tetris prompt" width="1025" height="647" data-path="images/fireconnect/demo-terminal-race.gif" />
</Frame>

## Prerequisites

* FireConnect installed ([overview](/ecosystem/fireconnect/overview#install))
* [Claude Code](https://claude.ai/code) CLI (`claude`) on your `PATH`
* An **Anthropic API key** for the incumbent side (`ANTHROPIC_API_KEY`, or pass `--anthropic-key`)
* A **Fireworks API key** for the challenger side (`fireconnect login` or `FIREWORKS_API_KEY`)

<Tip>
  Run `fireconnect login` first so the Fireworks side resolves your key automatically. The demo only supports **Claude Code** today.
</Tip>

## Run the demo

```bash theme={null}
fireconnect demo
```

That runs the default **Tetris** preset: both sides get the same prompt to build a playable game in a single HTML file.

### Try other presets

```bash theme={null}
fireconnect demo --prompt snake
fireconnect demo --prompt tictactoe
fireconnect demo --prompt clock
```

Presets: `tetris` (default), `snake`, `tictactoe`, `clock`, or `custom` with your own task text.

### Pick the Fireworks model

```bash theme={null}
fireconnect demo --challenger glm-5p2-fast
```

Default challenger is `glm-5p2-fast`. Use any serverless model ID you would pass to `fireconnect claude on --model`.

### Non-interactive / CI-friendly

```bash theme={null}
fireconnect demo --yes --no-open --json
```

| Flag                        | What it does                                              |
| --------------------------- | --------------------------------------------------------- |
| `--yes`                     | Skip the setup form                                       |
| `--no-open`                 | Do not open a browser; write outputs to disk only         |
| `--json`                    | Print a machine-readable result to stdout (skips the TUI) |
| `--out <dir>`               | Output directory (default: `./fireconnect-demo/`)         |
| `--anthropic-model <alias>` | Incumbent model: `opus` (default), `sonnet`, or `haiku`   |
| `--anthropic-key <key>`     | Anthropic API key for the incumbent side                  |
| `--api-key <key>`           | Fireworks API key for the challenger side                 |

## Clean up

```bash theme={null}
fireconnect demo clean          # prompts before deleting ./fireconnect-demo/
fireconnect demo clean --yes    # delete without prompting
fireconnect demo clean --out /path/to/output
```

`demo clean` only removes directories that contain demo markers (`result.json`, `compare.html`, etc.), so it will not delete an unrelated folder you pointed `--out` at by mistake.

## After the demo

Liked what you saw on the Fireworks side? Wire it into your daily driver:

```bash theme={null}
fireconnect claude on --model glm-5p2-fast
```

Want automatic cost routing instead of a fixed model? Try [FireRouter](/ecosystem/firerouter/overview):

```bash theme={null}
fireconnect claude on --model firerouter
```

## How it works

* Each side runs real `claude -p` in an isolated temporary config directory.
* Numbers in the comparison strip are **measured from the run**, not list-price estimates.
* If one side fails to finish, the page says so instead of fabricating a winner.
* Open `compare.html` from the output folder anytime. It inlines both apps and works offline.

## Source

The demo ships with FireConnect: [github.com/fw-ai/fireconnect](https://github.com/fw-ai/fireconnect)

## See also

* [FireConnect overview](/ecosystem/fireconnect/overview)
* [Recommended models](/ecosystem/fireconnect/recommended-models)
* [CLI reference](/ecosystem/fireconnect/cli-reference)