MCP Apps

series link or transparency note at article top

prose paragraph block

H2 section title

H3 subsection title

pull quote or blockquote with attribution

syntax-highlighted fenced code block

left-to-right step flow diagram

unordered list with optional bold label per item

horizontal visual section break

responsive 16:9 YouTube embed

single image with optional caption

two images side by side with captions

D2 or SVG architecture diagram

live GitHub repo card with stars forks and language

styled GitHub repo link list

article closing paragraph with hashtags

coloured tip info warning or danger highlight box

numbered step-by-step instruction sequence

data table with header row on mobile

tabbed content panels

label and value pairs in a compact grid

side-by-side code or content before and after comparison approach

API endpoint method parameters and response docs returns, example

scrollable image gallery grid

two videos side by side

horizontally scrollable card carousel

chronological event timeline

code block with numbered callout bubbles on specific lines explanation list below

single KPI value with label delta and accent colour indicator

labelled horizontal progress bar with percentage

row of coloured label badges

inline SVG trend line chart general trends.

grid heatmap coloured by intensity value are represented as colors in a matrix.

7x24 grid of glowing activity bubbles representing hourly commits

curved dual-column gradient flow diagram for financial or pipeline streams

triangular cohort retention grid with continuous color-scale rendering

CSS ring chart with centre value and percentage its proportion or progress.

big number metric with directional change indicator or percentage

glassmorphic structured checklist with priority and assignee badges

meeting sentiment analyzer with index arc and timeline chart

compact inline value with mini trend bar the direction of a

navigation breadcrumb trail structure.

page number controls

CSS animated vertical step sequence with checkmark draw and active pulse

horizontal tab navigation bar typically leading to different sections or pages.

in-page anchor navigation links document or to external URLs.

collapsible FAQ question and answer list the question is clicked.

definition term with explanation more details.

numbered footnote reference at the bottom of a section or page.

testimonial quote with avatar and attribution

large display number pulled from prose for emphasis descriptive label.

single collapsible section with toggle by clicking its header, using only CSS.

hover tooltip on a trigger element over a specified trigger element, using only CSS.

rich hover card revealed on mouse over specified trigger element, using only CSS.

expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.

pure-CSS modal dialog triggered by checkbox controlled purely by CSS without JavaScript.

inline audio player with controls

styled link to an audio file

embedded PDF preview panel PDF.

styled link to a downloadable document a document icon.

clickable video thumbnail with play button and a link to the video source.

video with title description and metadata to the video source.

server-side unified diff view with green additions and red removals

two code blocks side by side without diff highlighting diff highlighting.

device-framed screenshot with optional caption browser, phone).

image with styled caption below

full-width status alert strip optional action.

CSS slide-in/out fixed-position notification toast

animated placeholder skeleton while content loads indicating active data fetching.

zero-data empty state with icon and call to action image, message, and an optional call to action.

loading spinner indicator operation is in progress.

coloured status pill badge an item.

inline success error or warning message for validation feedback or hints.

star rating display stars, or displaying a static rating.

CSS stroke-dashoffset animated SVG progress arc with centre percentage

prominent card prompting a required user action user attention,

features versus plans comparison matrix

single pricing plan card with features list an optional call to action.

side-by-side pricing plan comparison different subscription plans.

two-column pros and cons comparison a single subject.

two items compared spec by spec and values side-by-side.

product specifications in a clean table a single product.

multi-item attribute comparison grid often using icons or checkmarks to indicate presence.

head-to-head two-option versus card "VS" separator.

multiple items rated across dimensions scores.

feature capability tick list per tier capability using checkmarks

CSS toggle switch input

truncated text with read more expand toggle more content.

card that flips on hover to reveal back content

image with clickable annotated hotspot overlays hover.

pure-CSS dropdown navigation menu

interactive star rating input

mutually exclusive option selector strip as a single control.

image with click-to-zoom lightbox

styled checkbox group input

CSS-only slide-in panel drawer activation.

customer testimonial with photo name and quote an optional avatar.

read-only star rating with score and count total review count.

stacked user avatar group with overflow count or community.

list of contributors with avatar and role community, with their

grid of customer or partner logos

social proof strip with stats and logos achievement.

press or media mention with logo and quote

expert quote with credentials and photo name, and credentials.

highlighted customer review excerpt by a star rating.

embedded social media post or feed or Instagram post.

display terminal commands and code output in a simulated console window

present hierarchical directory structures and files for software project navigation

organize multiple programming language snippets inside an interactive tab container

document REST API endpoints with HTTP methods, headers, and payloads

list configuration environment variables with descriptions and default values

highlight prerequisite knowledge and system requirements before

display visual keyboard key combinations for application shortcuts and hotkeys

reference table detailing API parameters, data types, and default values

software release or dependency version number tag

warning banner for deprecated features or unsupported APIs

highlight experimental or unstable feature notice callout

copyable single-line terminal command execution string

button to copy specified text or code to clipboard

scrollable monospace server or compiler log output block

expandable visual explorer for nested JSON data

highlighted summary of main conclusions and critical takeaways

condensed introductory panel with article overview

checklist of educational goals and competencies gained post-reading

timeline entry documenting product modifications per release

grouped product release documentation by change category

curated references for extending topic research

downloadable project assets and attached resource links

off-axis container for peripheral notes or caveats

label technical complexity level of blog content

highlight dangerous pitfalls or critical destructive actions

interactive task tracking checklist for article milestones

inline hover tooltips for complex technical term definitions

estimated reading duration badge for article content

milestone progress indicator across multi-step tutorial

social media buttons for sharing article to external networks

email subscription form for recurring reader updates

profile block displaying content creator biographical details

grid of recommended alternative post reading cards

navigation index for multi-part article series parts

emoji reaction counters collecting reader sentiment feedback

LinkedIn post image preview — conviction_card, stat_card, or carousel_slide mode

prominent blockquote optimised for social media sharing

call to action driving social media community expansion

direct profile subscription button for social platforms

track and display article reading progress completion status

navigate article sections using structured heading directory links

display prominent introductory headline and banner media

quickly return viewport to top of page document

navigate interconnected parts inside multi-part blog series

embed interactive CodePen workspace development environments

embed dynamic StackBlitz live IDE code sandboxes

embed version-controlled GitHub Gist source code snippets

embed live public Twitter status updates and media

embed interactive Google Slides presentation slide decks

render lightweight high-performance vector Lottie animations

embed collaborative live Figma design file prototype previews

grid of named color swatches with hex values

embed interactive live demo sandbox iframe

side-by-side performance benchmark comparison bars

interactive Chart.js bar chart with datasets

interactive Chart.js line chart for trend data

sortable data table with column headers

metric card comparing current vs previous period

compact grid of multiple labeled sparklines

grid of service status indicators with color states

30-day uptime timeline with per-day status blocks

keyboard-driven command palette with shortcut hints

single search result card with title snippet URL

article metadata bar with author date read time

numbered footnote list at section or article end

unread count badge overlaid on icon element

nested expandable tree list with collapsible children

poll with question options and vote count bars

inline abbreviation with hover tooltip full form

copy-to-clipboard button with inline code and feedback

pipeline conversion funnel with step tapering and leak markers

radial SLA gauge with glowing pointer and large metric value

stacked area chart with overlapping glowing translucent gradients

coordinate scatter plot with regression trend line

visual summary board of call sentiments moods and active themes

SVG GitHub-style contribution grid and activity tracker

labelled form with fields and submit button

single labelled input field

labelled dropdown select with options

radio button group for single-option selection

checkbox group for multi-option selection

group of labelled toggle switches

numeric range slider input

date or date-range picker input

modal dialog overlay with title and content

clickable follow-up suggestion chips

card-style option selector with icon, title, description per card

thumbs or star rating feedback collection widget

named resource rows with avatar, status badge, and meta

LLM prompt with highlighted {variable} slots and copy button

AI model spec card with context window, pricing, and capability badges

user prompt and AI response as chat bubbles

keyboard shortcut cheat-sheet grid with key combos and labels

star rating histogram with percentage bars per star level

quarter-based product roadmap with status-tagged milestones

persistent notification inbox list with unread indicators

inline icon-plus-text alert embedded in content flow

horizontal wrap of neutral content chip labels

CSS radio card group for variant or option picking

GFM markdown string rendered to HTML inline

multi-slice pie or donut SVG chart with legend

lightweight tinted inline tip or note block no icon

numbered RAG source card with title excerpt and URL

side-by-side multi-model output comparison table

labelled probability bar with colour-coded confidence fill

context window token usage meter with capacity warning colours

product card with image, price, status badge, and tags

e-commerce order card with status badge and line item list

inventory table with SKU, stock levels, and low-stock row highlight

Jira issue card with type icon, status lozenge, priority, and assignee

kanban sprint board with named columns and compact issue cards

Atlassian-semantic status pill with defined appearance variants

enterprise data grid with typed columns, row selection, and

recursive hierarchical tree with expand/collapse per node

calendar month heatmap with date-value density colouring

searchable filterable dropdown — shadcn/Headless UI pattern

icon + title + description feature grid — Tailwind UI pattern

multi-level horizontal nav with submenu panels — Radix pattern

chip-style multi-value select input — shadcn pattern

N-box one-time password digit input — shadcn OTP pattern

labeled horizontal progress bars list — percent fill, per-bar color

icon + big number + label stat strip — more visual than metric_row

colored background wrapper — tint/solid/dark, renders child atom blocks

weighted tag cloud — variable size by weight, wrap layout

horizontal step progress — numbered circles, connecting lines, current step highlighted

two-panel split — distinct bg per side, each side renders atom blocks

light gradient hero — badge, large title, subtitle, CTA button

icon-circle list — emoji/icon per item, label + text, color per item

highlight box — gradient/solid/outline style, icon, title, text

split card — colored header with icon/title, white body renders atom blocks

horizontal metric strip — value, label, prefix/suffix, trend up/down

decorative numbered list — large background numbers, circular badges, or bordered stage cards

app-style page header — title, subtitle, icon, accent, tag badge

back navigation — url, nav_slug, or history.back(); ghost/outline/text style

section divider — optional centered label, solid/dashed/dots style

chip/tag row — label, color, url, active state; wrap or scroll layout

multi-column layout — 2–6 cols, each column holds atom blocks

person card — name, role, photo, bio, tags, email, linkedin

time-slotted agenda — slots with time, title, speaker, location, type

risk list — critical/high/medium/low with title, description, mitigation

action items table — action, owner, due date, status

asymmetric bento-box feature tile grid — MagicUI/shadcn pattern

full-width CTA banner with headline and buttons — Tailwind UI pattern

CSS-only animated counter that counts up to target values

Auto-detecting YouTube/Loom/Slides/Vimeo embed with skeleton

Real-time comparative bars for votes, counts, or percentages

Multi-option vote buttons in pill, neon, or default style

CSS confetti/trophy/pulse celebration overlay triggered by name

Dark shimmer skeleton loader in card/list/media/chat variants

infinite CSS-animated horizontal marquee of text or logo items

CSS typewriter animation that reveals text character by character

card with CSS rotating gradient animated border

animated aurora borealis gradient blob background, CSS-only

CSS repeating dot or grid pattern panel background

button with CSS background-position shimmer sweep animation

CSS-fanned stack of 2–4 cards with rotation and opacity tiers

CSS-animated diagonal falling meteor streaks on a dark panel

CSS blur-to-focus fade-in container reveal

CSS box-shadow state-signalling button with disabled/ready/fired glow

CSS stroke-dashoffset animated SVG beam between two labelled nodes

CSS steps() scramble-to-reveal text animation

CSS steps() vertical word carousel in an overflow-hidden inline container

CSS concentric ring pulse animation for attention signalling

CSS character-by-character typewriter reveal with optional cursor

Slot-machine digit-column flip to target number

Three-dot bouncing chat typing indicator bubble

Flip-clock countdown timer display (static tiles, data-driven ticking)

Animated gradient-fill heading text via CSS background-clip

IntersectionObserver scroll-triggered fade+slide reveal

CSS steps() left-to-right character scramble-to-reveal

SVG stroke-dashoffset self-drawing path animation

3D CSS perspective tilt card with mousemove parallax depth

MCQ or true/false question with CSS-only correct/wrong feedback

cloze-test sentence with inline inputs and correct/wrong highlight on submit

click-to-pair matching exercise with green lock and red mismatch flash

show/hide hint disclosure using HTML details/summary — no JS

unlockable achievement badge with locked/unlocked state and optional date

end-of-exercise score card with correct/total, percentage, grade, and CTA

animated XP/points progress bar with level label and level-up flash

prev/next lesson navigation with module context and optional completion checkbox

course-level progress card with per-module bars and aggregate completion ring

highlighted text passage with optional hover margin annotation note

live list of Drive folder files

live read-only Google Sheet range preview

list of recent Gmail messages matching query

list of upcoming calendar events

personalised greeting with active user email

button to trigger server-side Apps Script function

today's calendar events from the user's default calendar

aggregate stats from a sheet range displayed as stat badges

unread count badges for Gmail labels

user avatar, display name, email and domain — live on GAS, static fields elsewhere

Drive storage quota progress bar — live on GAS, or pass used_gb/total_gb for static

inline form that appends a row to a Google Sheet on submit

task checklist — live via Tasks API on GAS, items[] array on other surfaces

ambient glowing orb that lerp-follows the cursor with screen blend

chain of fading dots following the cursor with worm physics

click anywhere to burst coloured gravity particles from click point

dark overlay with cursor-following circular cutout — torch effect

content that drifts toward cursor and springs back with overshoot

3D perspective tilt card with glare highlight driven by cursor position

gradient-fill standalone heading

typographic pull quote with decorative mark and attribution

two-column stat + text keynote layout with neon glow

auto-play word-by-word fade-up reveal animation

uppercase section marker with glowing accent pill

animated count-up number stat with cubic ease, auto-plays on load

prose sentence with **marked** words highlighted in accent colour

clip-path sweep-in reveal line, auto-plays on load

animated particle plexus with proximity lines and mouse repulsion

interactive mass-spring physics graph with drag-to-pin nodes

rotating 3D isometric mesh with height-colour mapping and drag-rotate

isometric 3D canvas of A321neo takeoff from LFBO — animated roll, rotation, gear-up, climb; HUD with airline/runway

isometric 3D canvas of Ariane 6 rocket launch from Kourou — animated liftoff and ascent; mission HUD

isometric 3D canvas of H160 helicopter hover — rotor animation, downwash, HUD

tabbed isometric fleet demo — A321neo takeoff + Ariane 6 launch + H160 hover with tab switcher

Toulouse TMA radar canvas with animated flights, HUD overlay, and live METAR ticker

generic HTTP feed — server-side initial fetch, client-side refresh via surface transport

live METAR weather feed — parsed wind, temp, QNH for an ICAO station

prose paragraph (GAS alias for body)

plain text block

styled pull-quote with attribution

vertical whitespace gap

inline tag chip

inline badge pill

monospace inline code span

syntax-highlighted code block

text hyperlink button

call-to-action button

single CTA link to a named page — appends from= automatically for back-button support

simple info card with title and body

Gemini token usage trace card

inline Gemini prompt input widget

dark hero banner with gradient and CTA

neon-glow stat number on dark card

frosted-glass card with blur backdrop — dark-theme highlight box

animated gradient border card

decorative blurred colour orbs background

neon-glow coloured text

dark-theme feature grid with icons

dark-theme horizontal divider

animated aurora/ambient gradient background

stacked cards with depth parallax

character-scramble text reveal on scroll

scroll-triggered animated reveal

animated beam connector between two or more nodes

animated counting number (alias for animated_counter)

countdown timer to a target date (alias)

dot-grid pattern background (alias)

RGB-split glitch-effect headline

pulsing neon-glow text on dark card

magnetic cursor-following button

click-to-trigger confetti button

floating particles background (canvas placeholder)

parallax scroll section (canvas placeholder)

fixed scroll-progress bar at page top

live ticking clock widget

interactive collapsible decision tree

tabbed step-by-step sequence

animated chat conversation thread

glossary with hover tooltips

spotlight focus lens on blurred background

animated terminal boot sequence

stagger-animated list of items

liquid morphing hover button

animated highlight sweep text

scroll-triggered animated progress bar

spring-animation big number or word reveal

word-by-word kinetic headline animation

clip-path text reveal mask animation

split-panel reveal animation

dark card with radial mesh gradient background

animated diagonal stripe background card

status-dot vertical timeline

row of animated stat counters

animated orbit diagram with satellite nodes

dark card with film-grain noise texture

draggable before/after comparison slider

interactive word cloud with optional live Sheet feed

multi-question interactive quiz

interactive spinning 3-D globe (wire or earth)

dark-theme interactive Mercator map with node pins and links

animated atmospheric contour wave field

three-engine multi-surface demo atom

interactive European airspace map with airports and flights

live/sim status pill for a named data feed

multi-slide fullscreen presentation playbook

achievement-style surface unlocked notification

self-reveal: shows this page's own JSON schema

annotated URL anatomy diagram

self-contained QR code, optionally with a live URL input

bold screenshot-ready insight card

horizontal numbered next-steps strip

copyable monospace prompt/code block

rendered atom + raw schema side-by-side anatomy view

stat grid for renderer capability metrics

three-panel prompt → schema → output flow

old-vs-new stack comparison animation

live audience voting with real-time bar chart results

emoji reaction buttons with raining particles

raise-hand button with live participant count

A2UI surface diagram (schema → surfaces)

live page-load stopwatch

embedded live atom JSON editor with preview

swipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meet

swipeable Drive files carousel — live on GAS, items[] or api connector on web/meet

Drive folder grid — live on GAS via folder_id, items[] or api connector on web/meet

single Drive file card — static on all surfaces; live name/type lookup via file_id on GAS

invisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STORE

course curriculum grid — module cards with live locked/available/complete status from progress_store

inline comprehension pulse — single question, instant feedback, no score pressure

end-of-quiz result — score %, pass/fail, question dots, writes to progress_store

branching scenario — situation + choices + consequence reveal with good/neutral/bad outcome

content lock — hides until requires module id is complete in progress_store

completion certificate — locked until requires id complete in progress_store; earner from GAS session

SVG radar/spider chart of skill competency levels — optional before/after growth overlay

achievement badge wall — earned badges glow, locked badges grey; status from progress_store

course entry path chooser — role/level cards, writes selection to progress_store, optional navigation

YouTube video with pausing quiz checkpoints — learner must answer to continue

instructor cohort table — per-learner module completion + scores; live on GAS

reflection textarea — saves to progress_store; restores on revisit

annotated body text — click highlighted terms to reveal inline explanations

guided onboarding steps — completes to progress_store, restores on revisit

structured case study — situation, data points, questions, optional model answer reveal

Pomodoro focus/break timer with SVG ring — session only, no persistence

assessment rubric table — criteria rows × performance level columns

flip flashcard with confidence rating 1-5 — writes SRS interval to progress_store

ranked score leaderboard — live on GAS from Sheet, static on web; medal top 3

named-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlighted

page-level accent colour and spacing theme variables

button to print or save page as PDF

Google Drive image embed by file ID

Google Maps location embed iframe

form submitting rows to a Google Sheet tab

entrance animation wrapper for child blocks

shimmer loading placeholder shapes

infinite horizontal scrolling ticker strip

pulsing status indicator dot

three-dot pulsing loader

animated circular progress gauge

confetti celebration burst effect

CTA button with ripple click effect

animated wave section separator

bobbing emoji or icon badge

headline text with shimmer gloss sweep

slot-machine digit reveal counter

card with cursor-following spotlight

card with rotating gradient border

circular countdown timer ring

single Material Symbol icon

Material icon in coloured circular badge

horizontal icon and label strip

single Google Workspace product logo

horizontal strip of Workspace logos

labelled grid of Workspace logos

feature grid with Material icons

checklist items with Material icons

deck navigation shell with subjects and slides

anchor pill buttons scrolling to page sections

copyable command with completion checkbox

flip-card deck of question answer pairs

dated vertical revision timeline

isometric rocket launch canvas animation, fixed half-viewport overlay

native MathML equation typeset with the math font family