---
title: "Power-up display modes - Chat Thing Documentation"
canonical_url: "https://chatthing.ai/docs/power-up-display-modes"
last_updated: "2026-07-20T15:03:05.034Z"
meta:
  description: "Render any power-up's response as cards, a chart, table, map, or diagram."
  "og:description": "Render any power-up's response as cards, a chart, table, map, or diagram."
  "og:title": "Power-up display modes"
  "twitter:description": "Render any power-up's response as cards, a chart, table, map, or diagram."
  "twitter:title": "Power-up display modes"
---

**Power-ups**

# Power-up display modes

## Display modes overview

Some power-ups can take their raw response and render it as a rich visual component instead of a plain text message. When you enable a display mode on a power-up, Chat Thing adds an extra transform step: after the power-up runs, its result is handed to an LLM along with your guidance prompt, which converts it into the structured JSON that a display mode needs to render.

This is distinct from the standalone [display power-ups](https://chatthing.ai/docs/display-power-ups), which are their own power-ups the bot calls directly to render visuals. Display modes, by contrast, are a _rendering option_ you turn on for _another_ power-up - most commonly the Use API power-up - so its response shows up as cards, a chart, a table, a map, or a diagram.

![Comparison showing the same API response rendered as plain text and as cards](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272090/docs/displaymodes-hero-comparison.png)

## Which power-ups support display modes

Display mode support is opt-in per power-up type. Today, the [Use API power-up](https://chatthing.ai/docs/use-api-power-up) supports it. To check whether a power-up supports display modes, open its settings page and look for a **Display** section. If it is there, that power-up can be rendered as any of the display modes below. If it is not, the power-up only replies in plain text.

![Display section on the Use API power-up settings page](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272092/docs/displaymodes-display-section.png)

## Choosing a display mode

There are five display modes to choose from. Pick the one that best matches the shape of the data your power-up returns.

- **Cards** - a list of items with a title, description, and optional image and link. Best for product listings, search results, team members, or anything you want the user to browse.
- **Chart** - numeric comparisons as a **bar**, **line**, **pie**, or **doughnut** chart. Best when you want to visualise numbers over categories or time.
- **Table** - structured rows and columns with **text**, **image**, or **link** column types. Best for dense comparisons where the user needs to see several fields side by side.
- **Map** - geographic data rendered on a map from a GeoJSON FeatureCollection. Points, lines, and polygons are all supported, and you can pick between **auto**, **light**, and **dark** map styles.
- **Mermaid** - flowcharts and diagrams rendered from Mermaid syntax. Best for workflows, decision trees, or relationships between things.

![Display mode picker dropdown showing all five options](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272093/docs/displaymodes-mode-picker.png)

![Cards display mode rendered in chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272095/docs/displaymodes-cards-chat.png)

![Chart display mode rendered in chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272096/docs/displaymodes-chart-chat.png)

![Table display mode rendered in chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776348809/docs/table-chat.png)

![Map display mode rendered in chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272098/docs/displaymodes-map-chat.png)

![Mermaid display mode rendered in chat](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272099/docs/displaymodes-mermaid-chat.png)

## Mode-specific settings

Each display mode exposes its own small set of config fields on the power-up settings page:

- **Cards** - a **Card layout** setting, either horizontal (a swipeable carousel) or vertical (a stacked list).
- **Chart** - a **Chart type** setting with bar, line, pie, or doughnut.
- **Map** - a **Map style** setting with auto, light, or dark.
- **Table** and **Mermaid** have no extra settings today - the transform picks the columns or diagram shape based on the data and your guidance prompt.

Any value you set on the power-up overrides whatever the transform would otherwise pick. So if you set the chart type to "line", every response from that power-up will render as a line chart regardless of what the data looks like.

![Cards layout setting under a Use API power-up](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272100/docs/displaymodes-cards-layout-setting.png)

![Chart type setting under a Use API power-up](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272101/docs/displaymodes-chart-type-setting.png)

## The display transform prompt

The transform prompt is the most important field in the Display section. It is free-form natural language guidance the transform LLM uses to turn the raw power-up response into the display JSON. Each mode ships with a placeholder example to show you the kind of thing to write.

Keep the prompt focused on the shape of the display rather than restating what the power-up does. A couple of examples:

- For a **cards** display: _"One card per product. Use the product name as the title, price as the subtitle, keep descriptions under two sentences, and use the product image URL for the image field."_
- For a **chart** display: _"Plot month on the x-axis and revenue on the y-axis as a bar chart. Label the chart 'Monthly revenue'."_

If the rendered display is missing a field you expected, your first move should almost always be to tighten this prompt rather than changing the power-up itself.

![Transform prompt field filled in for a cards display](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272102/docs/displaymodes-transform-prompt.png)

## How it fits with the API response prompt

If you are using display modes with the Use API power-up, you may already be using its API response prompt to clean up the raw API response. The two run in sequence: the API response prompt runs first to shape or trim the raw response, and _then_ the display transform runs on that shaped response.

This matters when an API returns a lot of data. The display transform only has as much context budget as your model allows, so if the raw response is huge, use the API response prompt to pre-trim it down to the fields the display actually needs before the transform sees it.

## Tips and troubleshooting

### Use "View details" to debug

When a display renders in a way you did not expect, click **View details** on the power-up message in the chat. You will see both the raw response the power-up returned and the parsed display JSON that came out of the transform. It is the quickest way to tell whether the problem is in the power-up itself or in the transform prompt.

![View details expanded, showing raw response and parsed display JSON](https://res.cloudinary.com/djyjvrw5u/image/upload/v1776272104/docs/displaymodes-view-details.png)

### Tighten the prompt before changing the data

If a field is missing from the rendered display, resist the urge to change the power-up or the API behind it. Nine times out of ten the fix is a sharper transform prompt that tells the LLM exactly which source field should map to which display field.

### Pre-trim huge responses

Some APIs return far more data than any transform can reliably process. If a power-up keeps timing out or producing broken displays, use the API response prompt to cut the raw response down to just the fields you care about.

### The bot already knows what you showed

After a display renders, the bot knows what was on screen and will deliberately not re-list the items in its follow-up reply. This is intentional - it keeps the chat clean and avoids the bot repeating itself. If you want the bot to discuss, compare, or filter the displayed items, just ask it directly and it will use the underlying result to answer.

### The bot repeats information already shown in the display

If the bot does re-list items that were just displayed, two things to try:

1. Add explicit instructions to the bot's system message telling it not to repeat content that has already been shown visually (e.g. "Do not repeat items you have already displayed as cards, charts, or other visuals.").
2. Switch to a more capable model - less intelligent models are more likely to ignore the display context and repeat themselves.