Stock Quote
A market snapshot for one stock, ETF, index or crypto, with a candlestick or line chart per range.
Experience · Shares patterns with Chart, KPI Card
≈ 3,588 tokens per use (tool 1,177 · guidance 204 · typical payload 2,207)How token costs are estimated
Example: Stock Quote
How's Figma doing this month?
Figma, Inc.
FIG · NYSE
Past month: 2.34% decrease(-$0.5500)
Prev close $21.48Period high $24.78 on Sep 15, 2026. Period low $19.58 on Sep 28, 2026.Use the left and right arrow keys to move between points.
| Date | Open | High | Low | Close | Volume |
|---|---|---|---|---|---|
| Sep 15, 2026 | $23.54 | $24.78 | $23.48 | $23.88 | 8.5M |
| Sep 16, 2026 | $23.45 | $23.70 | $22.66 | $23.06 | 11.3M |
| Sep 17, 2026 | $23.03 | $23.63 | $22.75 | $23.29 | 8.4M |
| Sep 18, 2026 | $23.50 | $23.59 | $22.56 | $22.69 | 33.9M |
| Sep 21, 2026 | $22.85 | $22.99 | $22.24 | $22.33 | 10.8M |
| Sep 22, 2026 | $23.17 | $23.19 | $21.07 | $21.80 | 18.4M |
| Sep 23, 2026 | $21.77 | $22.48 | $21.67 | $21.76 | 8.9M |
| Sep 24, 2026 | $21.62 | $22.00 | $21.12 | $21.34 | 10.7M |
| Sep 25, 2026 | $21.25 | $21.65 | $20.80 | $20.85 | 10.4M |
| Sep 28, 2026 | $20.30 | $20.54 | $19.58 | $20.25 | 10.2M |
| Sep 29, 2026 | $20.23 | $20.82 | $19.86 | $20.72 | 11.1M |
| Sep 30, 2026 | $20.78 | $21.55 | $20.67 | $21.02 | 10.5M |
| Oct 1, 2026 | $21.70 | $22.03 | $20.92 | $21.57 | 11M |
| Oct 2, 2026 | $21.75 | $21.75 | $21.01 | $21.36 | 7.9M |
| Oct 5, 2026 | $21.25 | $22.06 | $21.08 | $22.01 | 7.7M |
| Oct 6, 2026 | $22.21 | $22.32 | $21.80 | $21.93 | 6.8M |
| Oct 7, 2026 | $22.02 | $22.29 | $21.24 | $21.62 | 5.7M |
| Oct 8, 2026 | $21.62 | $22.67 | $21.45 | $22.63 | 10.6M |
| Oct 9, 2026 | $22.71 | $23.19 | $22.23 | $22.50 | 7.8M |
| Oct 12, 2026 | $22.23 | $22.29 | $21.39 | $21.96 | 9.1M |
| Oct 13, 2026 | $22.09 | $23.05 | $21.76 | $21.76 | 12.3M |
| Oct 14, 2026 | $21.39 | $21.94 | $21.08 | $21.48 | 12.5M |
| Oct 15, 2026 | $21.31 | $23.09 | $21.25 | $22.99 | 14.7M |
- Day range
- $21.25 – $23.09
- 52-wk range
- $16.60 – $58.58
- Volume
- 14.7M
Market closedOct 15, 4:00 PM EDTYahoo Finance (opens in a new tab)Not investment advice.
When to use
- The user asks how a stock, ETF, index or crypto is doing, and a market data tool returned its quote and price history.
When not to use
- You don't have a quote from a tool. Never invent, estimate or recall prices.
- The user is comparing several instruments. Use a Chart or a Data Table.
- The user asks whether to buy or sell. The component has no trade actions, and the agent shouldn't give investment advice.
How the agent should use it
- Copy every price, candle and stat from the tool result unchanged. Every market field is data-bound.
- Only include the ranges the tool returned, and set
defaultRangeto the one the question is about. - Keep the summary in your reply. The card shows the price, the day's change, the range change and the chart.
- Pass at most four
statsthat help answer the question (day range, 52-week range, volume, one valuation figure). - Set
delayed,marketStateandtimezonefrom the source. Times on the axis and in the bottom line use the exchange's time zone. - Leave out
o,handlwhen the source has one price per point. The chart then draws a line, and the Candles view is disabled for that range.
Interaction
- Range and view. Range buttons appear only for the ranges provided, with the change over the selected range beside them. The view starts as candles when a range has at least two full candles, and as a line otherwise. Both are local state; nothing is sent to the agent.
- High and low. Pills mark the period high above its candle and the low below its candle. The dashed line is the previous close, named in the key under the chart.
- Keyboard. The chart is focusable. Left and Right move between points, Home and End jump to the first and last, and Escape clears. Each point's date, open, high, low, close and volume are announced in a live region and shown in the tooltip.
Layout
The price is the focal number, with the day's change beside it. Below sit the range buttons, the chart and up to four stats. One quiet line at the bottom carries the market state, the quote time, the source and "Delayed", plus a fixed "Not investment advice." note.
Accessibility
The chart's SVG is hidden from screen readers. A visually hidden table lists every point in the visible range, and the period high and low are described in text. Up and down use an arrow icon and a sign as well as color. The colors are local tokens with contrast checked on the card in both themes:
| Token | Light (on #ffffff) | Dark (on #2b2b29) |
|---|---|---|
--stock-up | #15803d, 5.02:1 | #4ade80, 8.14:1 |
--stock-down | #b91c1c, 6.47:1 | #f87171, 5.13:1 |
All four pass 4.5:1 for the change text and 3:1 for the candles. Up candles are hollow and down candles filled, so color isn't the only cue there either.
Installation
npx shadcn@latest add https://your-site.com/r/stock-quote.json
Usage
The Stock Quote is display-only, so the tool can return immediately:
import { tool } from "ai"
import { stockQuoteTool } from "@/components/genui/stock-quote.schema"
const tools = {
[stockQuoteTool.name]: tool({
description: stockQuoteTool.description,
inputSchema: stockQuoteTool.inputSchema,
execute: async () => ({ shown: true }),
}),
}Render it through the Renderer under show_stock, or directly:
<StockQuote {...part.input} status={part.state === "input-streaming" ? "streaming" : "ready"} />While streaming, the header renders first, then the price, then a chart placeholder until candles arrive.
With LangGraph
Push it from a graph node with ui.push({ name: "show_stock", props }, { message }), and render the thread's UI messages with the Renderer.
Schema
| Prop | Type | Notes |
|---|---|---|
symbol | string | Data-bound. Ticker |
name | string | Data-bound. Shown as the title |
exchange | string? | Data-bound |
logo | { url, darkUrl?, alt? }? | Data-bound. The company's logo mark (http(s) or a same-origin path), with an optional dark-mode version. Shown in a grey tile beside the name; dropped if it fails to load. Never invent a URL |
currency | string | ISO 4217. Default USD |
timezone | string? | IANA time zone of the exchange |
price, change, changePercent | number | Data-bound. changePercent is in points: -1.8 means -1.8% |
asOf | string | Data-bound. ISO date-time |
delayed | boolean? | Adds "Delayed" to the bottom line |
marketState | "open" | "closed" | "pre" | "post"? | Shown in the bottom line, e.g. "After hours" |
defaultRange | "1D" | "5D" | "1M" | "6M" | "YTD" | "1Y" | "5Y"? | Must be one of ranges |
previousClose | number? | Data-bound. Dashed reference line |
ranges | { key, candles: { t, o?, h?, l?, c, v? }[] }[] | Data-bound. 1–7 ranges, up to 400 points each |
stats | { label, value }[]? | Data-bound. Up to 8, e.g. Open, Day range, P/E |
source | { label, url? } | Data-bound. Linked when the URL is http(s) |
Host props: status (streaming or ready) and className.