entries ai · verified 2026-10-01 · react + react-native

Generative UI & in-app AI

draftedconfidence: lowtrack: heldthis tier holds 64% on the public scorecard (7/14 graded · 0 overturned) →

related decisions: ondevice-ai

cited by: networking · alt-frameworks · ondevice-ai · ai-devtools

re-verified 8× — 2026-10-08 · 2026-09-24 · 2026-09-10 · 2026-08-24 · 2026-08-07 · 2026-07-20 +2 · changelog

recommendation

Vercel AI SDK for streaming chat + tool-calling on React and React Native; assistant-ui or Tambo for prebuilt chat UI; Streamdown to render streaming markdown on the web. TanStack AI is the type-safe alternative, still 0.x in RC, to re-weigh at 1.0. Fast-moving (confidence: low): treat picks as current-best, not settled.

render model output as live components → json-render
agent-style UI → Cedar
already TanStack-stack (Query/Router/Start), or need image/speech/video generation hooks or subagents → TanStack AI (RC, still 0.x — pin)
streaming LLM markdown in React Native → native markdown parsing off the JS thread (the Margelo reading; react-native-streamdown is the early SWM Labs option, spike before adopting)

Low confidence — fast-moving or lightly-vetted domain: treat the pick as a vetted lead and prototype before committing.

Options & tradeoffs

the field considered — and why each one isn’t the default here

option	tradeoff	evidence
Vercel AI SDK / json-render	streaming chat + tool-calling, the default SDK (ai 7.0.x, verified vs npm 2026-09-24); json-render renders model output as components (now RN too).	ships in 4/34
assistant-ui / Tambo	prebuilt chat/generative-UI components; Tambo 1.0 adds state persistence + streaming, self-host or cloud.
Cedar / Streamdown	Cedar = agent-UI toolkit; Streamdown = streaming-markdown renderer for LLM output on the WEB. The React Native sibling is a separate package; see note: RN STREAMING MARKDOWN.
TanStack AI (@tanstack/ai + ai-react)	type-safe TS AI SDK: streaming chat, tool calling, agents, host-side MCP client, generation hooks beyond chat; the first real Vercel-AI-SDK alternative, in RC since 0.48 (2026-08-21). 0.63.0 (2026-09-30, verified vs npm + the GitHub release) adds a World Labs 3D-world-generation adapter and typed subagent inputs, on top of 0.59's first-class subagents; see note: TANSTACK AI.	265k/wk

evidence: npm weekly downloads (signals snapshot) · “ships in n/D” = adoption across the production-app census, honest denominators

npm weekly downloads (from the corpus's last signals run): ai 34.5M · @tanstack/ai 265k · @tanstack/ai-react 90k

Verified notes

This entry is cloud-LLM app UI; on-device inference belongs to RB-E-ONDEVICE-AI. The category has three layers: the SDK that streams tokens and runs tools (Vercel AI SDK, TanStack AI), the chat components (assistant-ui, Tambo, Cedar), and the renderers for model output (json-render, Streamdown). The default picks one library per layer; the live contest is the SDK layer, where TanStack AI is converging on 1.0 and a tripwire re-opens the default when it gets there. Across all three, the interoperable spec layer (A2UI/AG-UI/MCP) is where the category is standardizing (see reading: Architectural Patterns for Generative UI in React). TANSTACK AI (2026-09-24, verified vs the GitHub release + npm): RC PHASE since 2026-08-21 (0.48), with 24 tree-shakable provider adapters and AG-UI (20+ agent frameworks) as its official protocol, plus generation hooks (useGenerateImage/Speech/Video, useTranscription). 0.59 (ai-react 0.28.0, same train) adds FIRST-CLASS SUBAGENTS: chat({ subagents }) starts named child agents (router-spawned, or a synthetic tool when there is no router), the stream emits AG-UI SUBAGENT_* events keyed by subagentRunId, the client stores nested type:'subagent' parts, and useChat().subagents / part.subagent are the same live handle with stop(); in the React chat UI kit the same defineAgent list goes to options.subagents and a subagent card can style its own child's parts. 0.54 was 2026-09-10. Vercel became a GOLD TanStack partner 2026-09-08 and shipped two first-party adapters: @tanstack/ai-vercel-gateway (route chat/embeddings/image/summarization across providers behind one AI-Gateway key, with per-request provider preferences and fallbacks) and @tanstack/ai-sandbox-vercel (Vercel microVMs as the execution environment for TanStack AI's sandbox system, resumable by ID with files intact and a dev-server port for previews) → the "which agent" and "where it runs" choices are now separable. Competitive read: TanStack AI's main alternative is Vercel's own AI SDK. SINCE 0.59 (verified vs the 0.61.0/0.63.0 GitHub release notes, 2026-09-30): 0.61 added `@tanstack/ai-worldlabs` (`worldlabsWorld()` via `generateWorld()`, World Labs/Marble 3D world generation — a viewer URL plus splat/mesh assets), a fifth generation modality beyond image/speech/video/transcription. 0.63 added an optional `inputSchema` to `defineAgent`: the parent model writes the child subagent's input against that schema (typed `ctx.input` inside `run`, a bad input bounces back to the model as a tool error without starting the child) — requires tool-mode subagents (`chat()` throws if `subagents.router` meets an agent carrying `inputSchema`). RN STREAMING MARKDOWN (2026-09-24, verified vs npm + the repo): the "Streamdown" option row is the WEB renderer. A distinct React Native sibling, react-native-streamdown, lives under the software-mansion-LABS org (not the main software-mansion org the rest of that family ships from): ~406★, npm 0.3.0 published 2026-09-04 — early, so spike it before adopting. The problem it targets is real and RN-specific: streaming incomplete Markdown token-by-token flickers (raw ** / * briefly visible) when you re-render JS-side per token, and native parsing avoids that. Do not conflate the two packages when reading newsletter rows. ADJACENT: Vercel's Eve is a file-based agent framework (an agent = a folder of tools/connections/channels/schedules; MCP connections, human-approval gates, sandboxed subagents). It is the agent BACKEND you would surface through these UI libs, not a React UI library. HISTORY: 2026-10-01 REOPENED: TanStack AI 0.63 (ai-worldlabs 3D-world generation, typed subagent inputSchema); added the thoughtbot just-in-time-AI-consent reading. 2026-09-24 CORRECTED: react-native-streamdown 0.3.0 was published 2026-09-04 (the note gave its 2026-09-10 check date as the version date). 2026-09-24 GAP CLOSED: TanStack AI 0.59 / ai-react 0.28 first-class subagents. 2026-09-10 GAP CLOSED: TanStack AI 0.54 + Vercel Gold partnership adapters; react-native-streamdown lead, distinct from the web Streamdown row (reconciled from harvest/2026-08-27). 2026-08-24 GAP CLOSED: TanStack AI enters RC (0.48, 24 providers, AG-UI official protocol). 2026-08-07 GAP CLOSED: boda.sh generative-UI architecture taxonomy. 2026-07-20 GAP CLOSED: Margelo RN chat-stack reading + TanStack AI 0.41. 2026-07-10 GAP CLOSED: TanStack AI added (three independent React Weekly signals, verified vs npm).

Canonical reading

Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.

Respecting your users' dread of the clankersthoughtbot

A consent-design argument for AI features: opt-in and JUST-IN-TIME, not blanket — show the specific problem the AI solves, then ask contextually ('stuck on this form?'), with granular per-capability checkboxes ('book appointments' vs 'share all health data') rather than one all-or-nothing toggle, an easy no-friction fallback to the manual workflow, guards that warn before accepting sensitive input and reject PII before it reaches the LLM, and a revocation UI showing what the AI currently can access.

Generative User Interfaces — rendering UI with language modelsVercel (AI SDK)

The core generative-UI mental model: tools return structured JSON that maps to React component props; the client-side switch-statement scaling problem; and the server-side createStreamableUI/RSC solution for streaming components during generation.

Architectural Patterns for Generative UI in Reactboda.sh (Pixelmatters Show & Tell talk, 2026-07-29)

The field map above the Vercel reading's single pattern — three generative-UI architectures with working demos: (1) tool-constrained JSON mapped onto an existing component registry (Mastra + AI SDK), (2) declarative component-tree specs (A2UI v0.9) transported over the AG-UI protocol (CopilotKit demo) — native rendering with a safe payload, no arbitrary code execution, (3) open-ended LLM-emitted HTML/CSS/JS sandboxed in iframes via MCP Apps. Argues the interoperable spec layer (A2UI/AG-UI/MCP) is where the category is standardizing, over any one framework.

How to Build a Performant AI Markdown RendererTiger Abrodi

The architecture behind streaming-markdown rendering (the Streamdown problem): repairing incomplete markdown before parsing, block-level memoization to avoid re-parsing every token, processor caching, and startTransition for smooth streaming.

Building a ChatGPT-Style AI Chat App in React Native with RAG & StreamingDave Mkpa-Eke (Margelo)

A production RN chat-app architecture (MargeloChat): stream OpenAI over WebSocket with UTF-8 decoding off the JS thread (react-native-nitro-websockets), native markdown parsing (Software Mansion's react-native-enriched-markdown), Legend List v3 for the transcript, keyboard-controller for composer tracking, true-sheet + liquid-glass for chrome, Pinecone RAG over nitro-fetch — 57-60fps by keeping every expensive step native or UI-thread. Margelo self-promotes its Nitro ecosystem throughout; the architectural principle stands independent of the vendor picks.

Sources

Related in ai: ondevice-ai · ai-devtools