@Whats_AI @bromann You can bring your own component library with OpenUI and just replace the "library" property of the Renderer. There is an example using @shadcn: openui.com/docs/openui-la…
English
LangChain JS
154 posts
LangChain JS
@LangChain_JS
Ship great agents fast with our open source JS frameworks – LangChain, LangGraph, and Deep Agents. Maintained by @LangChain.
Beigetreten Ocak 2026
12 Folgt1.7K Follower
@bromann @LangChain_JS OpenUI seems like a solid pick for agent frontends. Curious how the component library compares to building custom with React + streaming from scratch?
English
I am very bullish on OpenUI (openui.com) .. it comes with great components out of the box, streaming protocol is super efficient and has a super small footprint!
Also .. very easy to put together with @LangChain_JS 🚀
LangChain JS@LangChain_JS
AI just built a full dashboard UI… while thinking🤔 We added @thesysdev’s OpenUI to @LangChain frontend docs 👀 with a live demo. Ask an agent for a report → watch it stream: • KPI cards • charts • tables • structured layouts No templates. No hardcoded components. Just the model designing the UI in real-time. 📚 docs.langchain.com/oss/javascript…
English
Integrating OpenUI with @LangChain_JS is three steps:
1. openuiLibrary.prompt() → generate the openui-lang system prompt once at startup
2. useStream() → inject it as the first message of every new thread
3.
English
Most gen-UI approaches stream text into a chat bubble.
OpenUI by @thesysdev does something different: the agent writes a program in "openui-lang", and a Renderer turns it into a real React component tree with cards, charts, tables, tabs, forms 🎨
The trick is hoisting: root = Stack([header, kpis, chart]) is written first so the page shell appears immediately, then each section fills in as the model defines it. Zero layout shift. Full progressive render 💪
Purpose-built for data-rich reports and dashboards where the model is both analyst and UI designer.
English
AI just built a full dashboard UI… while thinking🤔
We added @thesysdev’s OpenUI to @LangChain frontend docs 👀 with a live demo.
Ask an agent for a report → watch it stream:
• KPI cards
• charts
• tables
• structured layouts
No templates. No hardcoded components.
Just the model designing the UI in real-time.
📚 docs.langchain.com/oss/javascript…
GIF
English
LangChain JS retweetet
langchain has had a model profile attribute since ~november! cool to see this pattern getting attention
every chat model auto-loads capabilities at init: context window, tool calling, structured output, modalities, reasoning.
works across Anthropic, OpenAI, Google, Bedrock, etc. thanks to data powered by the open-source models.dev project.
we use the data for auto-configuring agents, summarization middleware, input gating, and more.
more in thread 🧵
Lance Martin@RLanceMartin
a useful trick: Claude API now programmatically lists capabilities for every model (context window, thinking mode, context management support, etc). just ask Claude Code or use the API directly. platform.claude.com/docs/en/api/py…
English
LangChain JS retweetet
DeepAgents SDK is fantastic. I use it to build almost all my agentic software at this point.
It seems to find a great balance between ‘batteries included’ and ‘choose your own adventure’
The team also puts a lot of work into the docs, which obviously are consumable by your agent.
I have never met @Vtrivedy10 and have no affiliation with LangChain / DeepAgents, other than being a highly thankful user who appreciates all this awesome stuff we can now build with.
I need to put together some tutorials / guides here but it’s been hard because I have been having way too much fun building things
Viv@Vtrivedy10
the deepagents library is basically our starting point for doing harness engineering and shipping agents the internal agents used at the company are built on it (background coding, GTM/SDR, research) there’s primitives we find really useful across our evals and dogfooding like filesystems, multi-model, context management like compaction and large tool call offloading the goal is to give builders a good starting harness and the tools to customize and extend it to any task they want we have a lot of fun watching the open source community and customers ship with deepagents and also build evals that actually measure and improve their agents over time reach out if you’re building agents, doing harness engineering, exploring the space - we wanna help!
English
We just shipped new docs showing how to wire @langchain/react's #useStream hook to any React UI library 🎉
Two ready-to-go integrations:
🧩 AI Elements: composable, @shadcn - ui-style components for chat
🤖 @assistantui: headless runtime with a full thread UI out of the box
📚 docs.langchain.com/oss/python/lan…
English
English
English
If you can imagine it, you can render it!
Great gen-ui example by @CopilotKit build with @LangChain 🚀
CopilotKit🪁@CopilotKit
Introducing Open Generative UI Repo 🌟 We built an open-source version of @claudeai's new feature for your own AI agents! It's a template for building rich, interactive AI-generated UI with CopilotKit and @LangChain LangGraph. Ask the agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams — all rendered as live HTML/SVG inside a sandboxed iframe. 👾 Check it out: github.com/CopilotKit/Ope…
English
What you get out of the box with zero custom state:
✅ Streaming markdown (full GFM) via Streamdown
✅ Reasoning tokens that auto-collapse when done
✅ Live tool call status: pending → result (or error)
✅ Shimmer skeleton while the first token arrives
✅ Auto-scroll with a jump-to-bottom button
✅ Thread persistence + reconnect on page refresh
✅ New chat / thread switching in one line
This is what "batteries included" looks like in 2026.
ANY component library, ANY framework, FULL customizable‼️
English
Then wire stream.messages into AI Elements components and get reasoning blocks, live tool call status, and streaming markdown 🚀 completely free 🙌
You can bring and connect ANY component library 📦
Full example: github.com/langchain-ai/l…
English
Built a full streaming AI chat UI 🤔 with reasoning tokens, live tool calls, and shimmer loading states 🤯 in under 50 lines of React‼️
@langchain/react + AI Elements (elements.ai-sdk.dev by @vercel) is the combo you didn't know you needed. 🧵
GIF
English
English
#useStream now available for @reactjs, @vuejs, @sveltejs, and @angular 🚀
One hook to stream AI agents to your frontend. Same API across every framework 🤯
npm i @langchain/react @langchain/vue @langchain/svelte @langchain/angular
English
Every node execution in a @LangChain agent creates a checkpoint -- a full snapshot of the agent's state.
Time travel lets you inspect any checkpoint, see exactly what the agent knew at that moment, and resume execution from that point to explore a different path.
It's a debugger, an undo button, and an audit log. One line to resume: stream.submit(null, { checkpoint }).
Stop treating agent failures as dead ends.
Docs: docs.langchain.com/oss/python/lan…
GIF
English
What if your chat UI worked like git?
@LangChain’s branching chat treats conversations as trees, not lists. Edit any message, regenerate any response, and navigate between versions -- all without losing a single token.
Every edit forks from a checkpoint. Every branch is preserved. Switch between them instantly with setBranch().
Stop forcing users down a single conversational path.
Docs: docs.langchain.com/oss/python/lan…
GIF
English
LangChain JS retweetet
Context windows are finite. Good agents know *when* to compress.
We just added an autonomous context compression tool to Deep Agents (SDK + CLI) so models can trigger compaction at clean task boundaries instead of waiting for a hard token threshold.
Read all about it ⬇️
Mason Daugherty@masondrxy
English