ReactGenie annotates React components to expose data, actions, and views, parses composite voice commands into a DSL, and renders native graphical output against shared UI context.
assistant-ui separates Agent Chat into headless React primitives, a conversation runtime, and backend adapters, so the UI does not have to bind directly to one model SDK's message state.
CopilotKit is more than a chat box. Its React components, AG-UI events, shared state, and interrupt flows connect an agent's execution to an existing product interface.
Liveblocks packages rooms, presence, conflict-free storage, comments, and notifications as managed product primitives; adoption still requires alignment with existing auth, canonical databases, and data lifecycle.
The AI SDK splits an AI message into a parts array — text, reasoning, source-url, tool-* — each an independent typed fragment (introduced in v5, unchanged since). That data structure dictates how modern AI conversation UIs are written: render by switching on part.type, handing each fragment to its component. This post unpacks the design logic of the parts model, useChat's streaming behavior, and how it became the foundation for component libraries like AI Elements.
Component distribution used to offer two roads: npm packages (black-box dependencies) or manual copy-paste. The shadcn registry standardizes a third — components described as JSON with embedded source and dependencies, installed by CLI straight into your repo as your own code. Anyone can host a registry (AI Elements is one), and the official MCP server lets AI agents browse and install components directly.
TanStack Router (1.0 in December 2023, ~20M weekly downloads) makes paths, params, and search params compile-time inferred: navigating to a nonexistent route is a type error, not a runtime 404. This post unpacks its three core designs — type safety, first-class search params, and Query-integrated loaders — and why AI agents writing code amplifies their value.
TanStack Router (19.7M weekly downloads) + Query (55.8M) + Zustand (44.5M) as the core, with Vite, react-hook-form + Zod (224M), Tailwind + shadcn, and Vitest + Playwright — the current default stack for serious SPAs. The AI era adds three new selection criteria: does the docs site ship llms.txt (all of TanStack does; React Router doesn't), can type safety act as an agent guardrail, and does the source code live in your repo where an agent can read it.
AI Elements is Vercel's React component library for the AI SDK ecosystem — the registry currently holds 48 components covering Conversation, Reasoning, Sources, Tool, and the rest of the AI-interface vocabulary. It follows the shadcn model: npx ai-elements@latest copies the source into your project, fully editable, mapped one-to-one onto useChat's message parts.
Next.js 15 + React 19's App Router shifts rendering responsibility from the client to the server. use cache ties caching logic directly to data functions instead of scattering it across fetch options. Both DaoDao and NobodyClimb chose this stack for very practical reasons.
shadcn/ui is not an npm package — it copies component source code directly into your project, giving you full ownership. DaoDao uses it to build packages/ui, a shared component library used across three Next.js apps.
No Provider, no reducer — global state in just a few lines. NobodyClimb uses it for auth and UI state, paired with TanStack Query for server state.
For complex multi-hop questions, a single RAG search isn't enough. Agentic RAG lets the LLM evaluate whether retrieved results are sufficient — if not, it rewrites the query and searches again, forming a ReAct loop.