CopilotKit × Gemini

Four patterns,
one brokerage.

Static, declarative, open-ended, composed — four ways the LLM drives UI, plus an 11-component brokerage catalogue that exercises every pattern. Powered by Gemini · 20 verified prompts · 4 themes · one droplet chat.

See examples →

Pattern 1 · 2 demos

Static

Fixed JSX in source. The LLM only chooses when to render — content is hard-coded.

Try it →

Pattern 2 · 2 demos

Declarative

Same component, the LLM fills a typed schema — symbol, price, change — you own the render.

Try it →

Pattern 3 · wildcard + bridge

Open-ended

Catch-all renderer auto-detects shape — array-of-objects becomes a table, scalars a metric grid.

Try it →

Showcase · 11 components

Brokerage catalogue

Quote, portfolio, watchlist, order ticket, alerts, ratings, earnings, news, allocation, risk, comparison.

Try it →

Pattern 4 · text + card + text

Composed

Veda wraps cards with markdown — context before, interpretation after. Visual answers what; prose answers so what.

Try it →

1 · Prompt reference

Every prompt below has been verified end-to-end. Filter by pattern, search, then click any icon to copy a prompt and paste it into the droplet chat.

Category	Tool	Input prompt	Expected output
Static	`showWelcomeBanner`	Say hi	Welcome banner — fixed gradient JSX, content hard-coded.
Static	`showPricingCard`	What does it cost?	Pricing card — PRO PLAN $29/mo with 3 features.
Declarative	`renderStockQuote`	Default-style quote for NVDA at 890.50, up 2.40%, no day high or low.	Default quote card — symbol, price, change pill (up/down arrow + %).
Declarative	`renderStockQuoteNeobrutalist`	Brutalist style quote for TSLA at 245.30, down 1.8%.	Neobrutalist card — yellow background, hard black borders, ▲/▼ glyph.
Brokerage	`showStockQuote`	Brokerage stock quote for AAPL at 185.30, up 0.85%, day high 186.10, day low 184.20.	Quote card — price, % change (colored), day-range subline, optional blurb.
Brokerage	`showPortfolioSummary`	Show my portfolio. Total 124650, day +1842 (+1.5%). Holdings: NVDA $36,520 (29.3%), MSFT $10,500 (8.4%), AAPL $5,700 (4.6%), GOOGL $3,400 (2.7%), TSLA $3,750 (3.0%).	Portfolio summary — total value, day P&L, top holdings with weights.
Brokerage	`showWatchlist`	Show my watchlist: META 512.30 +1.2%, AMZN 185.40 -0.8%, AVGO 1650.20 +3.5%, PLTR 28.75 +5.2%.	Watchlist — Symbol / Price / Δ table with sign-colored % change.
Brokerage	`showOrderTicket`	Prepare a buy order: 25 shares of MSFT at limit $420.50.	Order ticket preview — green/red top stripe by side, type + limit price.
Brokerage	`showPriceAlert`	Alert me via SMS when TSLA crosses above $275.	Alert card — accent left-stripe, ticker direction threshold, notification channel.
Brokerage	`showAnalystRatings`	Wall Street ratings for AMZN: 42 buy, 5 hold, 1 sell, average 12-month target $235.	Ratings stack-bar (buy/hold/sell counts), avg 12-mo target, sample size.
Brokerage	`showEarningsCard`	MSFT Q4 earnings on 2025-07-29: EPS estimate 2.92, actual 2.95. Revenue estimate $64.3B, actual $64.7B.	Earnings card — date, EPS est/actual grid, revenue est/actual, beat/miss pill.
Brokerage	`showNewsCard`	Bearish Bloomberg news 2025-10-30: "Palantir warns on slowing government contracts". Ticker PLTR, sentiment bearish.	News card — source eyebrow, sentiment pill (red/grey/green), headline, ticker chips.
Brokerage	`showAllocationDonut`	Show my asset class allocation donut titled "Asset Mix": Equities 65, Bonds 20, Cash 8, REITs 5, Commodities 2.	Donut chart — conic-gradient ring, labelled legend with percentages.
Brokerage	`showRiskAssessment`	Assess me as aggressive risk, score 9/10, 85% equities, 10% bonds, 5% cash. Notes: long-term growth focus, 25-year horizon.	Risk card — profile label, 1–10 score bar (green→amber→red), allocation grid, notes.
Brokerage	`showStockComparison`	Compare AAPL, GOOGL, NVDA over the last 12 months. Title "AAPL · GOOGL · NVDA", defaultPeriod "1Y". For each ticker provide one period: 1Y with 12 monthly closes Apr 2025 → Mar 2026, realistic values. Wrap with one paragraph on what's driving each name.	Multi-line chart with period tabs (1D/1W/1M/3M/YTD/1Y/MAX) and asset table — each row shows period change (large) + day change (small) + current price; hover the chart to see crosshair date and table values rebase.
Open-ended	`renderDynamicPayload — table`	Return a fake pre-market mover leaderboard — 5 rows with symbol, last, premove_pct, volume	Auto-detected table — bridge tool emits {rows: [...]}, 4-column data table.
Open-ended	`renderDynamicPayload — metric`	Emit a fictional margin-call alert with symbol, equity, maintenance_req, deficit.	Auto-detected metric grid — scalar keys render as labelled mini-cards.
Composed	`text → card`	Brief me on Nvidia in one sentence, then show a quote card for NVDA at 892.10, up 3.1%, day high 895, day low 878.	Markdown bubble (1-sentence company summary) → NVDA quote card.
Composed	`text → card → text`	Brief me on TSLA in one sentence, render its quote card at 245.30 down 1.8% with day high 252 day low 244, then add a one-sentence interpretation of the day's move.	Markdown intro → TSLA quote card → markdown analysis sentence.
Composed	`text → chart → analysis`	Set up: explain in one sentence what this comparison shows. Then render a 12-month AAPL vs MSFT chart (Nov 2024 → Oct 2025, monthly closes, realistic values). Wrap with one sentence on which stock outperformed and why it matters.	Markdown framing → comparison chart → 1-sentence outperformance analysis.

20 of 20 prompts · 5 categories. Hover any row, click the copy icon, paste into the droplet chat to fire it verbatim.

2 · Static generative UI

The component is fixed in source. The LLM only decides when to render it.

See the 2 Static prompts in the reference table above →

3 · Declarative generative UI

Same component, same schema — the LLM fills symbol, price, changePercent, blurb. Two themes exposed as separate actions.

See the 2 Declarative prompts in the reference table above →

4 · Open-ended generative UI

Wildcard render (name: "*") catches any tool call the model dreams up. The renderer auto-detects shape: scalars → metric grid, list-of-objects → table, anything else → JSON fallback. Everything follows the global theme.

See the 2 Open-ended prompts in the reference table above →

Both use the bridge tool renderDynamicPayload. If Gemini ever replies with raw JSON instead of a card, re-ask including “via renderDynamicPayload” in the prompt.

5 · Brokerage catalogue (11 declarative components)

A stock brokerage / advisory assistant. The sidebar can render any of the 11 components below via tool calls filled by Gemini. The wildcard open-ended renderer (section 4) still catches anything the model invents outside this list.

See the 11 Brokerage prompts in the reference table above →

6 · Composed responses

Tool calls don't live alone. Veda can wrap rendered cards with markdown — context before, interpretation after — so the visual answers what and the prose answers so what. The runtime streams text and tool calls in order; no extra plumbing required.

A · Markdown intro + card

📝 → ▢

Veda writes 1–2 sentences of markdown context, then calls a tool whose render() output appears inline below the prose.

See 3 prompts in the reference table above →

B · Markdown intro + card + markdown analysis

📝 → ▢ → 📝

Same as A, plus 1–2 sentences of analysis after the card renders. Useful when the visual answers WHAT and the trailing prose answers SO WHAT.

See 3 prompts in the reference table above →

How it works: when the LLM emits content like <text> <tool_call> <text> , the chat UI renders each chunk as it streams — markdown bubble, then the tool'srender() output, then the trailing markdown bubble. The composition is purely a prompt concern.