Plain text UI patterns for AI agents
Copy-paste friendly, terminal-ready UI patterns rendered in plain text.
Explain UI structure to AI more clearly with fewer tokens.
┌──────────────────────────────┐ │ > Section 1 │ ├──────────────────────────────┤ │ > Section 2 │ ├──────────────────────────────┤ │ > Section 3 │ └──────────────────────────────┘
Accordion
Collapsible sections for organizing content into expandable panels.
┌──────────────────────────────────────┐ │ [i] Info │ │ Your session will expire in 5m. │ └──────────────────────────────────────┘
Alert
Feedback messages to inform users about status, warnings, or errors.
┌──────────┐ ┌──────────┐ ┌──────────┐ │ Submit │ │ Cancel │ │ Disabled │ └──────────┘ └──────────┘ └──────────┘
Button
Interactive button elements for triggering actions and navigation.
< January 2025 >
Su Mo Tu We Th Fr Sa
1 2 3 4
5 6 7 8 9 10 11
12 13 14[15]16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 Calendar
Monthly calendar view for displaying dates and events.
┌──────────────────────────────┐ │ │ │ Card Title │ │ │ │ This is the card body with │ │ some descriptive content. │ │ │ └──────────────────────────────┘
Card
Container component for grouping related content and actions.
Sales by Region Asia |==============================| 300 Europe |==================== | 200 America |=============== | 150 Africa |======== | 80
Chart
ASCII bar charts and simple data visualizations.
Alice 10:00
+---------------------------+
| Hi! How are you? |
+---------------------------+
Bob 10:01
+---------------------------+
| I'm good, thanks! |
+---------------------------+
Alice 10:02
+---------------------------+
| Great to hear! |
+---------------------------+ Chat Bubble
Chat message bubbles for conversational interfaces.
[x] Option A [ ] Option B [x] Option C [ ] Option D
Checkbox
Checkboxes for selecting one or multiple options from a set.
┌──────────────────────────────┐ │ const x = 42; │ │ console.log(x); │ └──────────────────────────────┘
Code Block
Styled code display blocks with optional language labels and line numbers.
Date ┌────────────────────────── # ┐ │ 2025-01-15 │ └──────────────────────────────┘
Date Picker
Date selection inputs with calendar display.
Content above ──────────────────────────────── Content below
Divider
Horizontal and vertical dividers for separating content sections.
Email ┌──────────────────────────┐ │ invalid-email │ └──────────────────────────┘ ! Please enter a valid email address Password ┌──────────────────────────┐ │ *** │ └──────────────────────────┘ ! Must be at least 8 characters
Form Validation
Form fields with validation states showing errors and success.
Name: Alice Email: alice@example.com Role: Admin Status: Active
Key-Value
Definition lists for displaying label-value pairs.
- Apples - Bananas - Cherries - Dates
List
Ordered and unordered lists for displaying items vertically.
┌────────────────────────────────┐ │ Login │ │ │ │ Email │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Password │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ ┌──────────────────────────┐ │ │ │ Sign In │ │ │ └──────────────────────────┘ │ │ │ └────────────────────────────────┘
Login Form
Composite login forms with fields, actions, and optional extras.
┌──────────────────────────────────┐ │ Modal Title [x] │ ├──────────────────────────────────┤ │ │ │ This is the modal body content. │ │ It can contain any information. │ │ │ └──────────────────────────────────┘
Modal
Overlay dialogs for focused interactions, confirmations, and forms.
┌──────────────────────────────────────────┐
│ MySite Home About Blog [Alice v] │
└──────────────────────────────────────────┘
┌──────────┐
│ Profile │
│ Settings │
│ ──────── │
│ Logout │
└──────────┘ Navbar
Top navigation bar with links, branding, and optional user controls.
┌──────────────────────────────┐ │ │ │ Panel content goes here. │ │ Any text or information. │ │ │ └──────────────────────────────┘
Panel
Bordered sections for grouping related content with optional titles.
┌──────────────┬──────────────┬──────────────┐ │ Free │ Pro │ Enterprise │ │ │ │ │ │ $0/mo │ $12/mo │ $49/mo │ │ │ │ │ │ 1 user │ 5 users │ Unlimited │ │ 1 GB │ 50 GB │ 500 GB │ │ Email │ Priority │ 24/7 phone │ │ │ │ │ │ [Select] │ [Select] │ [Select] │ └──────────────┴──────────────┴──────────────┘
Pricing Table
Comparison tables for displaying pricing plans and features.
( ) Option A (o) Option B ( ) Option C
Radio Button
Radio buttons for selecting a single option from a group.
┌──────────────────────────────┐ │ Q Search... │ └──────────────────────────────┘
Search Input
Search input fields with icons and optional suggestions.
┌────────────────────────── v ┐ │ Select an option │ └──────────────────────────────┘
Select
Dropdown select menus for choosing from a list of options.
┌────────────────────────────────┐ │ Create Account │ │ │ │ Username │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Email │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Password │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ ┌──────────────────────────┐ │ │ │ Sign Up │ │ │ └──────────────────────────┘ │ │ │ │ Already have an account? │ │ Sign in │ │ │ └────────────────────────────────┘
Signup Form
User registration forms with fields for creating new accounts.
Volume
0 ──●──────────────── 100
18 Slider
Range sliders for selecting values within a defined range.
Dark Mode [○───]
Switch
Toggle switches for turning options on or off.
┌────┬──────────┬────────┬────────┐ │ ID │ Name │ Role │ Status │ ├────┼──────────┼────────┼────────┤ │ 1 │ Alice │ Admin │ Active │ │ 2 │ Bob │ Editor │ Active │ │ 3 │ Charlie │ Viewer │ Idle │ └────┴──────────┴────────┴────────┘
Table
Data tables for displaying structured information in rows and columns.
┌──────────────────────────────────┐ │ $ npm install │ │ added 120 packages in 3s │ │ $ │ └──────────────────────────────────┘
Terminal
Terminal and console displays for showing command-line interactions.
Email ┌──────────────────────────┐ │ you@example.com │ └──────────────────────────┘
Text Input
Single-line text input fields for forms and data entry.
Bio ┌──────────────────────────────┐ │ Tell us about yourself... │ │ │ │ ╱ │ └──────────────────────────────┘
Textarea
Multi-line text input fields for longer content entry.
o Project started | Jan 1, 2025 | o Design approved | Jan 15, 2025 | o Development began | Feb 1, 2025 | * Launched Mar 1, 2025
Timeline
Chronological display of events and activities.
+-------------------+
| Helpful tooltip |
+--------+----------+
v
[Button] Tooltip
Small popover hints that appear on hover or focus.
src/
├── components/
│ ├── Header.tsx
│ ├── Footer.tsx
│ └── Button.tsx
├── pages/
│ ├── index.tsx
│ └── about.tsx
└── styles/
└── global.css Tree View
Hierarchical tree structure for displaying nested data like file systems.