AI Studio — Coconut Design System

Chat Messages

User & Assistant messages

AE

How do I configure the KDS display for a dual-kitchen setup?

14:32

auto_awesome

For a dual-kitchen setup, you'll need to configure two KDS instances with zone filtering. Each display subscribes to specific order categories based on the kitchen station.

14:32 — claude-sonnet-4-20250514 · 0.8s

<div class="message user">
    <div class="message-avatar">AE</div>
    <div class="message-bubble">Your message</div>
</div>

<div class="message assistant">
    <div class="message-avatar"><span class="material-symbols-outlined">auto_awesome</span></div>
    <div class="message-bubble">AI response</div>
    <div class="message-actions">
        <button class="message-action-btn">...</button>
    </div>
</div>

Typing Indicator

Streaming / generating

<div class="typing-indicator">
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
</div>

Thinking Block

Extended thinking / reasoning

Thinking for 3.2s

The user is asking about dual-kitchen KDS configuration. I need to explain zone filtering, order routing, and how to set up two independent display instances that share the same order source but filter by kitchen station...

Thinking for 1.8s

Let me check the provisioning API for KDS zone parameters. The key fields are zone_id and filter_categories in the terminal configuration.

<details class="thinking-block">
    <summary>Thinking for 3.2s</summary>
    <div class="thinking-content">Model reasoning here...</div>
</details>

Chat Input

Input area with actions

description report-q4.pdf

<div class="chat-input-area">
    <button class="chat-btn chat-btn-attach">attach_file</button>
    <textarea class="chat-input" placeholder="Type a message..."></textarea>
    <button class="chat-btn chat-btn-mic">mic</button>
    <button class="chat-btn chat-btn-send">send</button>
</div>

<!-- Recording state -->
<button class="chat-btn chat-btn-mic recording">stop</button>

Model Selector

Dropdown with feature tags

Code Vision Long Context Fast

<div class="model-selector">
    <button class="model-selector-btn">
        <span class="material-symbols-outlined">smart_toy</span>
        claude-sonnet-4
        <span class="material-symbols-outlined">expand_more</span>
    </button>
    <div class="model-selector-menu open">
        <button class="model-selector-item active">...</button>
        <button class="model-selector-item">...</button>
    </div>
</div>

<!-- Feature tags -->
<span class="ft-tag ft-tag-code">Code</span>
<span class="ft-tag ft-tag-vision">Vision</span>
<span class="ft-tag ft-tag-long">Long Context</span>
<span class="ft-tag ft-tag-fast">Fast</span>

Chat Toolbar

Toggle controls & token counter

<div class="chat-toolbar">
    <button class="toolbar-toggle active">Thinking</button>
    <button class="toolbar-toggle">Search</button>
    <span class="token-counter">2.4k / 200k</span>
    <span class="token-counter warning">156k / 200k</span>
    <span class="token-counter danger">198k / 200k</span>
</div>

Compare View

Side-by-side model comparison

smart_toy claude-sonnet-4 0.8s

For a dual-kitchen setup, configure two KDS instances with zone filtering...

smart_toy llama-3.3-70b 1.2s

To set up a dual kitchen display, you'll want to create separate terminal profiles...

Pinned Messages

Scrollable pinned bar

push_pin KDS zone config

push_pin API auth flow

push_pin Deploy checklist

Conversation Sidebar

Conversation list items

KDS dual-kitchen setup

For a dual-kitchen setup, configure two KDS instances...

NF525 compliance checklist

The certification requires fiscal data signing...

Cloudflare D1 migrations

When running migrations on production D1...