GeneratedSurface
ExperimentalThe frame around a screen an assistant made: who made it, its spec, pin, redo and report.
Also known as generated content frame, ai generated area
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A finished screen
Orders this week
Orders
1,240
Not pinned.
<GeneratedSurface
source="Orders helper"
spec={spec}
pinned={pinned}
onPinnedChange={setPinned}
onRegenerate={regenerate}
onReport={report}
>
<GenUIRenderer state={state} />
</GeneratedSurface>Try Pin and Regenerate. Open View spec to see exactly what the assistant sent.
When to use it
The frame around a screen an assistant made. It always says who made it and lets people read the spec, pin, regenerate or report it, so a generated screen never passes as part of the app.
Made of: Source label (Made by ...) · Status note · Pin, Regenerate and Report buttons · The screen · Text fallback with Try again · View spec
Use it for
- Around every screen GenUIRenderer draws in a chat.
- A screen that is still being made: set status to streaming.
- A screen that failed: show the answer as text with Try again.
Not for
- A page that runs its own code: use SandboxedFrame.
- A long document or code the person keeps working on: use CanvasPanel.
Do and avoid
Orders this week
Orders
48
Late
12
Orders this week
Orders
48
Late
12
Do
- Always show who made the screen, even when it looks like ours.
- Keep View spec available so people can check what was sent.
- Give a text version for the failed state.
- Treat Pin and Regenerate as experiments and watch how people use them.
Avoid
- Don't hide the source label to make the screen feel built in.
- Don't keep Regenerate on while a screen is still being made.
- Don't make Report hard to find.
- Don't pin a screen without telling people where it went.
On a phone
- The surface fills the width, and the header wraps so the Pin and Regenerate buttons move to their own line when needed.
- Buttons keep their size and have a 44px tap area on a touch screen.
- The spec view scrolls on its own both ways, so a long line does not widen the page.
Seen in products
- Claude Artifacts: generated pages sit in their own panel the person can open and share.
- MCP Apps: the host shows where a generated screen came from and can log what it does.
- OpenAI Apps SDK: a picture-in-picture view keeps a screen alive while the person keeps chatting.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| sourcerequired | string | none | Who made the screen. Shown as 'Made by <source>' in an AI label. |
| children | ReactNode | none | The generated screen, usually a GenUIRenderer. |
| status | "streaming" | "ready" | "failed" | "ready" | streaming shows a status note and turns Regenerate off. failed shows the fallback and Try again. |
| spec | unknown | none | The spec behind the screen. Shown as formatted JSON under View spec. Omit to hide the control. |
| pinned | boolean | none | Whether the screen is pinned (controlled). When omitted the frame keeps its own state. |
| onPinnedChange | (pinned: boolean) => void | none | Called when Pin is toggled. |
| onRegenerate | () => void | none | Shows Regenerate and calls this when pressed. |
| onReport | () => void | none | Shows Report and calls this when pressed. |
| onRetry | () => void | none | Shows Try again when status is failed. |
| fallback | ReactNode | none | Plain text version of the answer, shown when status is failed. |
| labels | GeneratedSurfaceLabels | none | Overrides for visible text: madeBy, viewSpec, hideSpec, pin, pinned, regenerate, report, retry, streaming, failed, overview. |
| className | string | none | Extra classes on the frame. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one GeneratedSurface switches all of this from its properties panel, across 6 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Streaming, Ready, Failed |
| Pinned | pinned | On or off |
Tokens
Change one of these and every part that uses it follows.
--surface--border--surface-sunken--radius-control--radius-card
Built in
- The frame is named "Made by" plus the source, so screen reader users can find it.
- Pin is a toggle button that says whether it is on, and its words change to Pinned.
- While the screen is being made, only the "Still being made…" note is announced.
- A failure is announced right away, and Try again is a normal button.
- View spec opens and closes with the keyboard, and the spec can be scrolled with the keyboard.
What you need to do
- Pass a plain text fallback, so people still get the answer if the screen fails.
- Set source to a name people recognise. Screen readers use it to name the frame.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide