Interactive answers for the AI you already use

Let your AI show, not tell.

Give the AI you already use the ability to create interactive answers: charts, comparisons, dashboards and tools people can actually use.

Add it to your AI Try it live

Not another chatbot. A new capability for your AI. See more examples

Your AI assistantRecorded demo · a saved answer, replayed

Reading the question…

state search=16000 social=14000 creators=10000
derive spent={search + social + creators}
derive signups={round(search / 40 + social / 55 + creators / 70)}
derive split=[{channel: "Search ads", amount: search}, {channel: "Social ads", amount: social}, {channel: "Creators", amount: creators}]
derive ramp=[{week: "W1", signups: round(signups * 0.06)}, {week: "W2", signups: round(signups * 0.15)}, {week: "W3", signups: round(signups * 0.28)}, {week: "W4", signups: round(signups * 0.42)}, {week: "W5", signups: round(signups * 0.57)}, {week: "W6", signups: round(signups * 0.72)}, {week: "W7", signups: round(signups * 0.87)}, {week: "W8", signups: signups}]
text "App launch · $40,000 budget" style=title
grid min=140
  meter "Budget used" kind=ring value={spent / 40000} max=1 bands="1.005" good=down format=percent
  stat label="Projected signups" value={number(signups)}
  stat label="Cost per signup" value={signups ? money(spent / signups) : "–"}
grid min=280
  column
    slider "Search ads: ${number(search)}" bind=search min=0 max=30000 step=1000
    slider "Social ads: ${number(social)}" bind=social min=0 max=30000 step=1000
    slider "Creators: ${number(creators)}" bind=creators min=0 max=30000 step=1000
    callout "Over budget by {money(spent - 40000)}" detail="Lower a channel to get back to $40,000" tone=bad icon=true if={spent > 40000}
    callout "Search brings the cheapest signups" detail="About $40 each, against $55 for social and $70 for creators" tone=info icon=true if={spent <= 40000}
  chart "Where the money goes" kind=donut items=split x=channel y=amount format=money
chart "Signups over 8 weeks" kind=area items=ramp x=week y=signups
timeline
  step "Week 1: search ads live" status=current
  step "Week 3: creator videos" status=upcoming
  step "Week 6: retarget visitors" status=upcoming
button "Share the plan" on=emit:share

The AI wrote these lines; SayShape drew the screen from them and runs it on its own.

Try the sliders: the screen answers, not the AI.

AskA person asks in plain words.
GenerateTheir AI writes a short SayShape spec.
InteractSayShape draws a screen that works.

One question. A whole new way to answer.

Ask something different and your AI builds something different. Pick a question to see the kind of screen it can answer with.

Blue look · 16 lines of SayShape · Sample data

Every control works. The numbers are worked out on the screen, from the spec’s own data.

Answers you can do something with.

Change the numbers. Explore the possibilities. No new AI response needed.

Before · a text answer

Monthly payment on $300k at 6.5%?

About $1,896 a month over 30 years.

And at 6%?

About $1,799 a month.

What about over 20 years?

Every “what if” is another message and another wait.

After · a SayShape answer

Neutral look with your brand's accent

Drag a slider or pick a term. The payment updates on the screen.

Less to generate. More to interact with.

7.6×fewer output tokens than HTML

SayShape171

A2UI628

HTML1,299

Median estimated output tokens per screen, across 7 recorded tasks

5.4×faster for the model to finish writing

SayShape2.4 s

HTML13.2 s

A2UI17.2 s

Median time until the model's output was complete, across the same 7 tasks

A limited recorded comparison: 7 tasks, each answered by Claude Sonnet 5.5 in SayShape, HTML and A2UI (November 2026). It measures the model's output only, not drawing time or your app's speed, and results vary by task and model.

Watch the recordings →How it was measured →

Works where your AI already lives.

Choose how you want to use SayShape.

In my existing AI assistant

Bring interactive answers into chat apps and editors that support MCP Apps, without building a new app, and into coding agents as a page you open. Your assistant's own model writes the screens, so there's no extra API key.

Open Settings → Developer → Edit Config.

Paste this:

claude_desktop_config.json

{
  "mcpServers": {
    "sayshape": {
      "command": "npx",
      "args": ["-y", "sayshape-mcp"]
    }
  }
}

Restart Claude. Ask for a chart of anything.

Needs Node.js 20 or later. More options →

In my own product

Give your chatbot the ability to answer with interactive screens, while your application controls the data, the look and every action.

Your model, your data, your theme
Screens build line by line as your model streams
One canvas, no UI framework, no runtime dependencies

Explore integration

Your app stays in control of the data, the actions and the look.

Your data

In supported setups, your app hands full datasets straight to the screen. The model may still see column names or a few sample rows, depending on the integration.

Host data and events →

Your actions

A screen can only send named actions to your app, and your code decides what each one does. A spec can't run code or open links, and it loads images only from hosts your app allows.

The expression boundary →

Your design

Your app sets the theme and which elements exist. The AI picks roles like “primary” or “warning”, never colors or code. Try the same spec in each look, or pick your own brand color.

Themes →

Pick your brand colorThe chart and the button take it. The spec doesn't change.

Your app's event logPress “Book it”. The screen can only send a named action; your code decides what happens.

Your AI already knows how to answer. Give it a way to show you.

Add it to your AI View on GitHub

SayShape v0.1 is an early prototype. Open source, MIT licensed. Ask a live model and watch it answer →