Introducing Frames

Describe it.
Watch it render.

Frames is Wren's live-preview panel. Ask it to build a web page, a small app, a chart, or an SVG — and it renders beside the chat, versioned and ready to share.

wren · frames
Build a tip calculator, warm theme
Here you go — opening it in Frames so you can try it live. Tap a percentage to update the total.
Tip Calculator · v2
Make 20% the default
Code Preview Publish
Tip Calculator
Split it, no math required
Bill$84.00
Tip (20%)$16.80
Total$100.80
15%18%20%25%
v2
edited: default tip
The one-liner

A canvas that keeps pace with the conversation.

Most chat tools hand you a wall of code and wish you luck. Frames renders what Wren makes right beside the thread — so you can see it, try it, ask for a change, and get the next version without ever leaving the chat.

What people build

Small, real, useful.

Frames is happiest with things that fit in a single file and render in a heartbeat. A few of the shapes people reach for most:

HTML · CSS

A landing page

Sketch a hero, sections, and a call-to-action. Say "warmer" or "add a pricing row" and watch it redraw.

$16.80
tip · 20%
Interactive

A tip calculator

A working little app — inputs, buttons, live math. Frames runs the JavaScript so you can actually click it.

Data

A data chart

Paste a table or a CSV and ask for a bar or line chart. Frames draws it, labels it, and lets you tweak the styling.

SVG

An SVG diagram

Flowcharts, org trees, simple icons — crisp vector output you can download and drop straight into a doc.

How it works

Four steps, one panel.

Ask Wren to build something

Describe it in plain language — "a countdown timer," "a chart of these numbers," "a two-column pricing table." When Wren makes something renderable, the Frames panel opens on the right.

Flip between Preview and Code

The Preview tab shows the live result, running in a sandbox. The Code tab shows exactly what produced it — nothing hidden, copy any part you want.

Ask for a change → v2, v3

Say "make the hero warmer" or "default the tip to 20%" and Wren edits in place. Each change becomes a new version; step back and forward with the stepper to compare, and roll back anytime.

Publish to a shareable link

One click turns the current version into a hosted page at its own URL. Send it to a teammate, drop it in a doc, or keep iterating — republish and the link stays the same.

Availability

On every plan. Unlimited on Pro.

Frames is real Wren, not a paywalled teaser — it's in the free tier from day one.

Free
$0
  • Build and preview Frames with the Seed & Field models
  • Code and Preview tabs, version stepper, publish to a link
  • Fair daily usage — plenty for real weekend projects
Start free
Pro · $17/mo
Unlimited Frames
  • Unlimited Frames and higher build limits
  • Grove for extended thinking on trickier builds
  • Room to iterate all day without watching a counter
Get Pro
Straight talk

Two things worth knowing.

Frames run in a sandboxed iframe. Every artifact is isolated from the rest of the app — it can't touch your other chats, your account, or the page around it. That's what keeps live-running code safe to click.

Published Frames are viewable by anyone with the link. Publishing makes a page public — there's no login wall on a shared link. Great for showing your work; just don't publish anything you'd want kept private. Unpublish anytime to take the link down.

Ready when you are

Build the thing you're picturing.

Open a chat, describe it, and watch it render in Frames. Free to start — no card.

Curious how it holds up? Read our evals — Frames render validity is one of the numbers we publish.