--- title: The AI Message Bubble Is a Canvas description: "A single chat bubble can hold text, flight cards, hotel images, action buttons, and maps. Designing the bubble as a canvas unlocks rich conversational commerce." canonical: https://nowah.xyz/blog/ai-message-bubble-is-canvas lastModified: "2026-08-07T07:58:30.170Z" --- # The AI Message Bubble Is a Canvas A single chat bubble can hold text, flight cards, hotel images, action buttons, and maps. Designing the bubble as a canvas unlocks rich conversational commerce. Open any messaging app. Messages are text in rounded rectangles. Maybe an image. Maybe a link preview. The bubble is a container for a single content type, and it does that job well. Now open an AI travel agent. The AI's response might contain a paragraph of text explaining its reasoning, followed by three flight cards in a scrollable carousel, followed by a "Show more options" button, followed by another paragraph asking about hotel preferences. All of this logically belongs in one response — one turn in the conversation. The messaging-app bubble cannot hold this. The AI message bubble is not a text container. It is a canvas. ## Why AI responses need more than text ![Illustration for this section](https://pics.nowah.xyz/website-media/design-008-img-1.webp) The iMessage metaphor — text in a rounded rectangle, alternating left and right — has dominated [chat interface](/blog/adapting-chat-interface-mobile-desktop) design for fifteen years. It works beautifully for human-to-human messaging where messages are primarily text, occasionally photos, and rarely anything more complex. AI responses are categorically different. A single response from a travel AI might include explanatory text (why these options were selected), structured data (flight times, prices, durations), interactive elements (select buttons, show-more triggers), and visual content (hotel images, airline logos). Splitting these into separate messages would break the logical coherence of the response and create a confusing stream of disconnected elements. The solution is to treat the AI message bubble as a canvas that can host multiple content types in a structured layout. Text flows naturally. Cards embed within the text flow at semantically appropriate points. Action buttons dock to logical positions. The bubble expands vertically to accommodate whatever the AI produces. ## Rich message anatomy A rich AI message has a layered structure. The text layer contains the AI's natural language response — reasoning, explanations, follow-up questions. This text wraps and flows like any paragraph text. The card slot layer holds interactive cards — flight options, hotel options, itinerary summaries. Cards embed within the message at a specific point in the text flow, usually after the AI's introductory text and before its follow-up question. On mobile, multi-card displays use a horizontal carousel that scrolls within the bubble's width. The action layer contains interactive buttons — "Show more options," "Change dates," "Book this one." These buttons dock below the card slot or below the text, depending on the message content. They are sized for touch interaction at 44 by 44 points minimum. Between each layer, spacing is deliberate and consistent. Text-to-card spacing provides visual breathing room so the cards do not feel crushed against the text. Card-to-action spacing separates the informational content from the interactive elements. ## Responsive layout inside a bubble ![Supporting diagram](https://pics.nowah.xyz/website-media/design-008-img-2.webp) The bubble must handle wildly different content volumes. A simple text response might be one line. A response with flight cards might be 400 pixels tall. The bubble's layout is responsive to its own content, not to the screen. For text-only responses, the bubble is compact — rounded rectangle with padding, typical chat appearance. For text-plus-cards responses, the bubble expands. The text section uses the standard bubble style. The card section breaks out to a wider layout, potentially edge-to-edge on mobile, to give cards maximum display width. The action section returns to the standard bubble width. This expansion-and-contraction within a single message is key. It lets cards use their full visual potential (images, price displays, airline logos) without constraining them to the narrow column of a text bubble. The visual effect is a message that breathes — tight where text is sufficient, wide where structured data needs room. ## Embedded actions: never leave chat Every interactive element in the canvas bubble keeps the user in the chat. Tapping "Select" on a flight card opens a review modal that slides up from the card's position — within the chat context, with the conversation visible behind it. Tapping "Show more" triggers a new AI response with additional options, continuing the conversation naturally. Tapping "Change dates" sends a pre-formatted message asking the AI to adjust the search. This is the commerce layer that makes conversational AI transactional rather than informational. A chatbot that can only provide information requires the user to navigate elsewhere to act on that information. A canvas bubble with embedded actions lets the user act immediately, within the same context, without losing their conversational place. The reduction in navigation steps is significant. In a traditional interface, seeing an option, deciding to pursue it, and initiating the booking might require three separate navigations. In a canvas bubble, it requires one tap. That reduction compounds across the booking flow. ## Handling mixed content The trickiest design challenge is mixed content — text before cards, cards between paragraphs, or multiple card types in a single response. The AI might say "Here are flights to Tokyo" (text), show three flight cards (carousel), then say "I also found a great hotel near Shibuya" (text), followed by a hotel card (single card). The layout engine handles this by treating the message as a vertical stack of content blocks. Each block has a type (text, card-carousel, single-card, action-buttons) and its own layout rules. The stack renders top-to-bottom with consistent spacing between blocks. The bubble's outline wraps the entire stack. This block-based approach is extensible. Adding a new content type — say, a weather forecast widget or a [visa requirements](/blog/ai-agents-visa-requirements-documents) summary — means creating a new block type with its own layout rules and inserting it into the stack. The existing blocks and the bubble container do not need to change. ## Building a canvas bubble The canvas bubble is the single [most important](/blog/why-speed-is-most-important-feature) component in an AI chat interface. It is where the AI's intelligence becomes visible, where information becomes actionable, and where [conversation becomes](/blog/from-chat-to-booking-conversation-becomes-trip) commerce. Design it as a container with slots. Text slot for natural language. Card slot for structured data. Action slot for interactive elements. Define spacing between slots. Define expansion rules for each slot type. Test with minimum content (one-line text, no cards), typical content (paragraph plus three-card carousel plus action button), and maximum content (multi-paragraph text with multiple card sets and multiple actions). The messaging-app bubble was designed for humans talking to humans. The canvas bubble is designed for an AI that needs to show its work — and let the user act on it without leaving the conversation. --- Nowah is an AI travel agent that searches and books real flights and hotels through conversation — no filters, no thirty open tabs. [Plan your next trip](https://app.nowah.xyz).