Time: ~30 minutes
Skill level: Intermediate
What you'll have by the end: A working, interactive Prism — a live UI component built through conversation — and a clear sense of how to iterate and share it.

What you're building

A Prism is an interactive application built inside a Fuel iX chat. Not a mockup. Not a description. A working interface — with inputs, buttons, charts, and logic — that you and your team can actually use.

By the end of this playbook you'll have built one, refined it through conversation, and either shared it with your team or exported the code for use elsewhere.

Before you start

You need:

A copilot with Generative UI enabled (or you can enable it per chat)
A specific thing you want to build — not "a dashboard" but "a dashboard that shows [specific data] with [specific interactions]"

If you don't have a use case in mind yet, start here: think about a recurring report, a calculation your team does manually, a tracker you've built in a spreadsheet, or a form that currently lives in a document. Any of these can become a Prism.

Step 1: Enable Generative UI (2 minutes)

You can enable Generative UI for a single chat without changing your copilot's default settings.

Open a chat with any copilot.
Click the copilot name at the top of the chat.
Under Manage the current chat, toggle Generative UI on.

Or, if you're building a Prism as part of a dedicated copilot, enable Generative UI in the copilot's settings so it's always available.

Full Prisms guide →

Step 2: Describe what you want to build (5 minutes)

This is where precision pays off. Before you send anything, write a description of your Prism that covers:

What it does: What is the purpose of this tool?
What data it works with: What inputs does it take? What does it display?
What interactions it supports: What can the user do with it?
Any format or style requirements: Colors, layout, compact vs. detailed, etc.

Good description:

"A weekly team workload tracker. Shows a grid of team members (rows) against days of the week (columns). Each cell contains a simple text field for task description and a dropdown for load level: low, medium, high. A summary row at the bottom shows total high-load days per person. Clean, minimal styling."

Weak description:

"A team workload dashboard."

Spend 3 minutes writing your description before you send it. It makes a significant difference in how close the first version is to what you want.

Step 3: Generate the first version (5 minutes)

Send your description to the copilot.

The copilot will show its reasoning — what it's planning to build and how. Read this before it starts building. If the plan doesn't match your vision, correct it now.

Once it generates the Prism, a module appears in the chat. Click it to open the split-screen workspace.

You'll see two views:

Rendering — the live interface (click buttons, enter data, interact)
Code — the underlying HTML, CSS, and JavaScript

Switch between them to understand both what you've got and how it's built.

Step 4: Iterate through conversation (10 minutes)

The first version is rarely the final version. That's fine — this is the workflow.

Interact with the Prism in the right panel while talking to the copilot in the left panel. Describe what to change:

"Add a column for 'notes' with a text field"
"Change the load level colors to red, yellow, and green"
"Make the table sortable by name"
"Add a button to clear all entries"

Each significant change creates a new version. The version dropdown in the top-left lets you switch between versions — useful when you want to compare or go back to something that was working.

Tips for getting what you want:

Describe changes functionally ("I should be able to filter by date") not technically ("add a JavaScript filter function")
If something is almost right, say so: "This is close — the only issue is [specific thing]"
Use the Code view to catch anything that looks off in the structure

Step 5: Share it (5 minutes)

Once you're happy with the Prism:

Option A — Share within Fuel iX:

Click Share in the Prism workspace.
Select users or teams to share with.
Set permissions: View-only (interact but not modify) or Interactive (full access).

Recipients access shared Prisms from their Prisms app.

Option B — Export the code: Switch to the Code view and copy the HTML/CSS/JavaScript. This is a self-contained web component you can deploy anywhere.

💡
Build once, use many times
A Prism you share with your team can save everyone the work of recreating the same tool. The best ones are utilities your team uses repeatedly — trackers, calculators, planners — not one-off visualizations.

Ideas for your next Prism

Still looking for a use case? Here are things teams build commonly:

Meeting cost calculator — enter attendees and duration; shows real cost of the meeting
Sprint planning board — drag-and-drop tasks across a Kanban layout
Budget estimator — enter variables, see projected costs
Team availability grid — who's in, who's out, by day
Decision matrix — weight criteria and compare options
Onboarding checklist — interactive checklist with progress tracking

Next steps

Prisms reference guide — full documentation
Tools and capabilities — enabling Generative UI and other tools on a copilot
Sharing and collaboration — how sharing works