[{"data":1,"prerenderedAt":703},["ShallowReactive",2],{"docs.navigation":3,"docs.content.power-up-display-modes":317,"docs.section.power-ups":686,"docs.prevnext.power-up-display-modes":700},[4,46,100,137,171,232,239,258,275,292],{"id":5,"title":6,"position":7,"children":8},32,"Introduction",0,[9,13,17,22,27,32,36,41],{"id":10,"title":6,"slug":11,"position":7,"directory":12},34,"getting-started","introduction",{"id":14,"title":15,"slug":16,"position":7,"directory":12},35,"Quickstart guide","quickstart-guide",{"id":18,"title":19,"slug":20,"position":21,"directory":12},37,"What is a bot?","what-is-a-bot",3,{"id":23,"title":24,"slug":25,"position":26,"directory":12},39,"What is a data source?","what-is-a-data-source",4,{"id":28,"title":29,"slug":30,"position":31,"directory":12},38,"What is a channel?","what-is-a-channel",6,{"id":33,"title":34,"slug":35,"position":31,"directory":12},40,"What is a power-up?","what-is-a-power-up",{"id":37,"title":38,"slug":39,"position":40,"directory":12},33,"FAQ","faq",7,{"id":42,"title":43,"slug":44,"position":45,"directory":12},36,"Troubleshooting","troubleshooting",8,{"id":7,"title":47,"position":48,"children":49},"Bots",1,[50,54,58,62,66,70,74,77,81,84,87,92,96],{"id":21,"title":51,"slug":52,"position":7,"directory":53},"Bot advanced settings","bot-advanced-settings","bots",{"id":55,"title":56,"slug":57,"position":48,"directory":53},10,"Prompt engineering tips","prompt-engineering-tips",{"id":59,"title":60,"slug":61,"position":59,"directory":53},2,"Available models","available-models",{"id":63,"title":64,"slug":65,"position":21,"directory":53},13,"Widget customisation","widget-customisation",{"id":67,"title":68,"slug":69,"position":26,"directory":53},12,"Webhooks","webhooks",{"id":71,"title":72,"slug":73,"position":71,"directory":53},5,"Custom domains","custom-domains",{"id":26,"title":75,"slug":76,"position":31,"directory":53},"Bot testing","bot-testing",{"id":78,"title":79,"slug":80,"position":31,"directory":53},11,"SDK","sdk",{"id":40,"title":82,"slug":83,"position":40,"directory":53},"Human takeover","human-takeover",{"id":31,"title":85,"slug":86,"position":55,"directory":53},"Duplicating bots","duplicating-bots",{"id":88,"title":89,"slug":90,"position":91,"directory":53},9,"My Chats","my-chats",15,{"id":48,"title":93,"slug":94,"position":95,"directory":53},"Analytics","analytics",16,{"id":45,"title":97,"slug":98,"position":99,"directory":53},"Lead capture","lead-capture",20,{"id":101,"title":102,"position":59,"children":103},23,"Data sources",[104,109,113,117,121,125,129,133],{"id":105,"title":106,"slug":107,"position":7,"directory":108},25,"File","file-data-source","data-sources",{"id":110,"title":111,"slug":112,"position":7,"directory":108},28,"Notion","notion-data-source",{"id":114,"title":115,"slug":116,"position":59,"directory":108},30,"Website","website-data-source",{"id":118,"title":119,"slug":120,"position":21,"directory":108},31,"YouTube","youtube-data-source",{"id":122,"title":123,"slug":124,"position":26,"directory":108},29,"RSS","rss-data-source",{"id":126,"title":127,"slug":128,"position":71,"directory":108},27,"Manual","manual-data-source",{"id":130,"title":131,"slug":132,"position":88,"directory":108},24,"Data source best practices","data-source-best-practices",{"id":134,"title":135,"slug":136,"position":55,"directory":108},26,"Keeping your bot up to date","keeping-your-bot-up-to-date",{"id":138,"title":139,"position":26,"children":140},14,"Channels",[141,146,150,154,157,160,164,167],{"id":142,"title":143,"slug":144,"position":7,"directory":145},21,"Web","web-channel","channels",{"id":147,"title":148,"slug":149,"position":48,"directory":145},18,"Slack","slack-bot-channel",{"id":151,"title":152,"slug":153,"position":48,"directory":145},19,"Slack (V1 Deprecated)","slack-channel",{"id":95,"title":155,"slug":156,"position":59,"directory":145},"Discord","discord-channel",{"id":99,"title":158,"slug":159,"position":21,"directory":145},"Telegram","telegram-channel",{"id":161,"title":162,"slug":163,"position":26,"directory":145},22,"WhatsApp","whatsapp-channel",{"id":91,"title":165,"slug":166,"position":71,"directory":145},"API","api-channel",{"id":168,"title":169,"slug":170,"position":45,"directory":145},17,"Email","email-channel",{"id":172,"title":173,"position":26,"children":174},47,"Power-ups",[175,180,184,188,192,196,200,204,208,212,216,220,224,228],{"id":176,"title":177,"slug":178,"position":7,"directory":179},49,"Browse Webpage Power-up","browse-webpage-power-up","power-ups",{"id":181,"title":182,"slug":183,"position":7,"directory":179},53,"Google Search Power-up","google-search-power-up",{"id":185,"title":186,"slug":187,"position":7,"directory":179},55,"Power-up basics","power-up-basics",{"id":189,"title":190,"slug":191,"position":7,"directory":179},60,"Use API Power-up","use-api-power-up",{"id":193,"title":194,"slug":195,"position":48,"directory":179},61,"Zapier Power-up","zapier-power-up",{"id":197,"title":198,"slug":199,"position":59,"directory":179},54,"Notion Power-ups","notion-power-ups",{"id":201,"title":202,"slug":203,"position":21,"directory":179},59,"Talk to a Human Power-up","talk-to-a-human",{"id":205,"title":206,"slug":207,"position":26,"directory":179},52,"Email Power-ups","email-power-up",{"id":209,"title":210,"slug":211,"position":71,"directory":179},57,"Send an email","send-email-power-up",{"id":213,"title":214,"slug":215,"position":55,"directory":179},58,"Slack Power-ups","slack-power-ups",{"id":217,"title":218,"slug":219,"position":78,"directory":179},50,"Discord Power-ups","discord-power-ups",{"id":221,"title":222,"slug":223,"position":67,"directory":179},48,"Bot-to-bot power-up","bot-to-bot-power-up",{"id":225,"title":226,"slug":227,"position":63,"directory":179},51,"Display power-ups","display-power-ups",{"id":229,"title":230,"slug":231,"position":138,"directory":179},56,"Power-up display modes","power-up-display-modes",{"id":233,"title":234,"position":71,"children":235},62,"Tasks",[236],{"id":237,"title":234,"slug":238,"position":7,"directory":238},63,"tasks",{"id":240,"title":241,"position":31,"children":242},64,"Teams",[243,246,250,254],{"id":244,"title":241,"slug":245,"position":7,"directory":245},65,"teams",{"id":247,"title":248,"slug":249,"position":48,"directory":245},66,"Inviting team members","teams-inviting",{"id":251,"title":252,"slug":253,"position":59,"directory":245},67,"Managing team members","teams-member-roles",{"id":255,"title":256,"slug":257,"position":21,"directory":245},68,"Transferring bots","teams-transferring-bots",{"id":259,"title":260,"position":31,"children":261},73,"Use cases",[262,267,271],{"id":263,"title":264,"slug":265,"position":7,"directory":266},76,"Build a support bot for your website","support-bot","use-cases",{"id":268,"title":269,"slug":270,"position":48,"directory":266},74,"Build an internal knowledge bot for your team","internal-knowledge-bot",{"id":272,"title":273,"slug":274,"position":59,"directory":266},75,"Build a lead capture bot for your website","lead-capture-bot",{"id":276,"title":277,"position":40,"children":278},69,"Usage and billing",[279,284,288],{"id":280,"title":281,"slug":282,"position":7,"directory":283},70,"How does billing work?","how-does-billing-work","usage-and-billing",{"id":285,"title":286,"slug":287,"position":7,"directory":283},72,"What are storage tokens?","what-are-storage-tokens",{"id":289,"title":290,"slug":291,"position":21,"directory":283},71,"What are message tokens?","what-are-message-tokens",{"id":293,"title":294,"position":45,"children":295},41,"Plans",[296,301,305,309,313],{"id":297,"title":298,"slug":299,"position":7,"directory":300},44,"Free","free-plan","plans",{"id":302,"title":303,"slug":304,"position":48,"directory":300},42,"Basic","basic-plan",{"id":306,"title":307,"slug":308,"position":59,"directory":300},46,"Standard","standard-plan",{"id":310,"title":311,"slug":312,"position":21,"directory":300},45,"Pro","pro-plan",{"id":314,"title":315,"slug":316,"position":26,"directory":300},43,"Enterprise","enterprise-plan",{"id":318,"title":230,"body":319,"description":677,"extension":678,"longTitle":679,"meta":680,"navigation":681,"path":682,"position":138,"seo":683,"stem":684,"__hash__":685},"docs\u002Fdocs\u002Fpower-ups\u002Fpower-up-display-modes.md",{"type":320,"value":321,"toc":661},"minimark",[322,327,331,349,356,360,373,379,383,386,456,462,468,474,480,486,492,496,499,534,537,543,549,553,556,559,579,582,588,592,599,602,606,611,618,624,628,631,635,638,642,645,649,652],[323,324,326],"h2",{"id":325},"display-modes-overview","Display modes overview",[328,329,330],"p",{},"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.",[328,332,333,334,339,340,344,345,348],{},"This is distinct from the standalone ",[335,336,338],"a",{"href":337},"\u002Fdocs\u002Fdisplay-power-ups","display power-ups",", which are their own power-ups the bot calls directly to render visuals. Display modes, by contrast, are a ",[341,342,343],"em",{},"rendering option"," you turn on for ",[341,346,347],{},"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.",[328,350,351],{},[352,353],"img",{"alt":354,"src":355},"Comparison showing the same API response rendered as plain text and as cards","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272090\u002Fdocs\u002Fdisplaymodes-hero-comparison.png",[323,357,359],{"id":358},"which-power-ups-support-display-modes","Which power-ups support display modes",[328,361,362,363,367,368,372],{},"Display mode support is opt-in per power-up type. Today, the ",[335,364,366],{"href":365},"\u002Fdocs\u002Fuse-api-power-up","Use API power-up"," supports it. To check whether a power-up supports display modes, open its settings page and look for a ",[369,370,371],"strong",{},"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.",[328,374,375],{},[352,376],{"alt":377,"src":378},"Display section on the Use API power-up settings page","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272092\u002Fdocs\u002Fdisplaymodes-display-section.png",[323,380,382],{"id":381},"choosing-a-display-mode","Choosing a display mode",[328,384,385],{},"There are five display modes to choose from. Pick the one that best matches the shape of the data your power-up returns.",[387,388,389,396,417,433,450],"ul",{},[390,391,392,395],"li",{},[369,393,394],{},"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.",[390,397,398,401,402,405,406,405,409,412,413,416],{},[369,399,400],{},"Chart"," - numeric comparisons as a ",[369,403,404],{},"bar",", ",[369,407,408],{},"line",[369,410,411],{},"pie",", or ",[369,414,415],{},"doughnut"," chart. Best when you want to visualise numbers over categories or time.",[390,418,419,422,423,405,426,412,429,432],{},[369,420,421],{},"Table"," - structured rows and columns with ",[369,424,425],{},"text",[369,427,428],{},"image",[369,430,431],{},"link"," column types. Best for dense comparisons where the user needs to see several fields side by side.",[390,434,435,438,439,405,442,445,446,449],{},[369,436,437],{},"Map"," - geographic data rendered on a map from a GeoJSON FeatureCollection. Points, lines, and polygons are all supported, and you can pick between ",[369,440,441],{},"auto",[369,443,444],{},"light",", and ",[369,447,448],{},"dark"," map styles.",[390,451,452,455],{},[369,453,454],{},"Mermaid"," - flowcharts and diagrams rendered from Mermaid syntax. Best for workflows, decision trees, or relationships between things.",[328,457,458],{},[352,459],{"alt":460,"src":461},"Display mode picker dropdown showing all five options","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272093\u002Fdocs\u002Fdisplaymodes-mode-picker.png",[328,463,464],{},[352,465],{"alt":466,"src":467},"Cards display mode rendered in chat","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272095\u002Fdocs\u002Fdisplaymodes-cards-chat.png",[328,469,470],{},[352,471],{"alt":472,"src":473},"Chart display mode rendered in chat","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272096\u002Fdocs\u002Fdisplaymodes-chart-chat.png",[328,475,476],{},[352,477],{"alt":478,"src":479},"Table display mode rendered in chat","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776348809\u002Fdocs\u002Ftable-chat.png",[328,481,482],{},[352,483],{"alt":484,"src":485},"Map display mode rendered in chat","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272098\u002Fdocs\u002Fdisplaymodes-map-chat.png",[328,487,488],{},[352,489],{"alt":490,"src":491},"Mermaid display mode rendered in chat","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272099\u002Fdocs\u002Fdisplaymodes-mermaid-chat.png",[323,493,495],{"id":494},"mode-specific-settings","Mode-specific settings",[328,497,498],{},"Each display mode exposes its own small set of config fields on the power-up settings page:",[387,500,501,510,518,526],{},[390,502,503,505,506,509],{},[369,504,394],{}," - a ",[369,507,508],{},"Card layout"," setting, either horizontal (a swipeable carousel) or vertical (a stacked list).",[390,511,512,505,514,517],{},[369,513,400],{},[369,515,516],{},"Chart type"," setting with bar, line, pie, or doughnut.",[390,519,520,505,522,525],{},[369,521,437],{},[369,523,524],{},"Map style"," setting with auto, light, or dark.",[390,527,528,530,531,533],{},[369,529,421],{}," and ",[369,532,454],{}," have no extra settings today - the transform picks the columns or diagram shape based on the data and your guidance prompt.",[328,535,536],{},"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.",[328,538,539],{},[352,540],{"alt":541,"src":542},"Cards layout setting under a Use API power-up","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272100\u002Fdocs\u002Fdisplaymodes-cards-layout-setting.png",[328,544,545],{},[352,546],{"alt":547,"src":548},"Chart type setting under a Use API power-up","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272101\u002Fdocs\u002Fdisplaymodes-chart-type-setting.png",[323,550,552],{"id":551},"the-display-transform-prompt","The display transform prompt",[328,554,555],{},"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.",[328,557,558],{},"Keep the prompt focused on the shape of the display rather than restating what the power-up does. A couple of examples:",[387,560,561,571],{},[390,562,563,564,567,568],{},"For a ",[369,565,566],{},"cards"," display: ",[341,569,570],{},"\"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.\"",[390,572,563,573,567,576],{},[369,574,575],{},"chart",[341,577,578],{},"\"Plot month on the x-axis and revenue on the y-axis as a bar chart. Label the chart 'Monthly revenue'.\"",[328,580,581],{},"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.",[328,583,584],{},[352,585],{"alt":586,"src":587},"Transform prompt field filled in for a cards display","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272102\u002Fdocs\u002Fdisplaymodes-transform-prompt.png",[323,589,591],{"id":590},"how-it-fits-with-the-api-response-prompt","How it fits with the API response prompt",[328,593,594,595,598],{},"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 ",[341,596,597],{},"then"," the display transform runs on that shaped response.",[328,600,601],{},"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.",[323,603,605],{"id":604},"tips-and-troubleshooting","Tips and troubleshooting",[607,608,610],"h3",{"id":609},"use-view-details-to-debug","Use \"View details\" to debug",[328,612,613,614,617],{},"When a display renders in a way you did not expect, click ",[369,615,616],{},"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.",[328,619,620],{},[352,621],{"alt":622,"src":623},"View details expanded, showing raw response and parsed display JSON","https:\u002F\u002Fres.cloudinary.com\u002Fdjyjvrw5u\u002Fimage\u002Fupload\u002Fv1776272104\u002Fdocs\u002Fdisplaymodes-view-details.png",[607,625,627],{"id":626},"tighten-the-prompt-before-changing-the-data","Tighten the prompt before changing the data",[328,629,630],{},"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.",[607,632,634],{"id":633},"pre-trim-huge-responses","Pre-trim huge responses",[328,636,637],{},"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.",[607,639,641],{"id":640},"the-bot-already-knows-what-you-showed","The bot already knows what you showed",[328,643,644],{},"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.",[607,646,648],{"id":647},"the-bot-repeats-information-already-shown-in-the-display","The bot repeats information already shown in the display",[328,650,651],{},"If the bot does re-list items that were just displayed, two things to try:",[653,654,655,658],"ol",{},[390,656,657],{},"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.\").",[390,659,660],{},"Switch to a more capable model - less intelligent models are more likely to ignore the display context and repeat themselves.",{"title":662,"searchDepth":59,"depth":59,"links":663},"",[664,665,666,667,668,669,670],{"id":325,"depth":59,"text":326},{"id":358,"depth":59,"text":359},{"id":381,"depth":59,"text":382},{"id":494,"depth":59,"text":495},{"id":551,"depth":59,"text":552},{"id":590,"depth":59,"text":591},{"id":604,"depth":59,"text":605,"children":671},[672,673,674,675,676],{"id":609,"depth":21,"text":610},{"id":626,"depth":21,"text":627},{"id":633,"depth":21,"text":634},{"id":640,"depth":21,"text":641},{"id":647,"depth":21,"text":648},"Render any power-up's response as cards, a chart, table, map, or diagram.","md",null,{"prevPage":227},true,"\u002Fdocs\u002Fpower-ups\u002Fpower-up-display-modes",{"title":230,"description":677},"docs\u002Fpower-ups\u002Fpower-up-display-modes","428vxsnWsYAqCM9JNYKli8aOxBDA5kABavdsjEKtXbg",{"id":687,"title":173,"body":688,"description":662,"extension":678,"longTitle":679,"meta":695,"navigation":681,"path":696,"position":26,"seo":697,"stem":698,"__hash__":699},"docs\u002Fdocs\u002Fpower-ups\u002F_index.md",{"type":320,"value":689,"toc":693},[690],[691,692,173],"h1",{"id":179},{"title":662,"searchDepth":59,"depth":59,"links":694},[],{},"\u002Fdocs\u002Fpower-ups\u002F_index",{"title":173,"description":662},"docs\u002Fpower-ups\u002F_index","s20pgTuoW2cyoNDQ10Yov9rIuWa6c8CJcrZB1HN0Bh8",{"prev":701,"next":702},{"title":226,"slug":227,"position":63,"directory":179},{"title":234,"slug":238,"position":7,"directory":238},1780738929419]