Every AI interface we build ends up needing the same five things: streaming, orchestration, markdown, charts, and motion. These are the libraries we reach for, with the caveats attached.
1. Vercel AI SDK
The default choice for streaming chat in React, and deservedly so. useChat and useCompletion handle the SSE plumbing, message state, and tool calls that you would otherwise write badly yourself. It is provider-agnostic in theory and Vercel-shaped in practice, but it works fine outside their platform. Start here.
2. LangChain.js
The JS port is capable: chains, vector store integrations, agent loops, all runnable in Node or on the edge. The honest caveat is that the abstraction is heavy, and plenty of teams (ours included, on some projects) end up replacing it with a few hundred lines of plain fetch calls once they know what they actually need. Useful for prototyping, negotiable for production.
3. react-markdown
Models are trained on the internet, so they emit Markdown whether you asked for it or not. react-markdown renders it safely, and you will want remark-gfm for tables the moment someone asks the model to compare things. One trap: streaming hands you partially complete Markdown, so expect flickering half-rendered syntax mid-stream and decide early whether you care.
4. Recharts
"Analyze this CSV" is half the AI briefs we get, and the answer needs a chart, not a paragraph. Recharts is composable, declarative, and boring in the good way. It starts to struggle past a few thousand SVG points, but if your model output is that large you have a summarization problem, not a charting one.
5. Framer Motion
An interface that sits frozen for four seconds of inference feels broken even when it is not. A pulsing indicator, messages easing in, a layout animation when the tool results arrive: small touches, and Framer Motion makes each one a few lines. Restraint required. One thinking indicator is reassuring, five animated elements is a carnival.
That is the whole stack for most projects. The streaming protocols and markdown edge cases are solved problems, so spend your time on the part of the product nobody has built yet.
Related reading
The Future of React: AI-Driven ComponentsGenerative UI is starting to work, and it is rough. What model-picked components can do in early 2024, what they can't, and why the registry pattern is the part that matters.Technology2 min readOptimizing LLM Integrations in ReactModel inference is slow and metered per token. Most of the fix lives in the UI layer: optimistic rendering, debounced requests, and counting tokens before you send them.Optimization2 min readCase Study: Scaling AI Workflows with ReactNotes from building a drag and drop agent pipeline editor with React Flow and Zustand, including the render problems that showed up past a few hundred nodes.Case Study2 min read