mirror of
https://github.com/langchain-ai/langgraphjs.git
synced 2026-07-21 16:45:24 -04:00
dependabot[bot]
1cb3985878
Bumps the react group with 2 updates: [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) and [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react). Updates `@types/react` from 19.2.16 to 19.2.17 <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react">compare view</a></li> </ul> </details> <br /> Updates `@vitejs/plugin-react` from 6.0.2 to 6.0.3 <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md">@vitejs/plugin-react's changelog</a>.</em></p> <blockquote> <h2>6.0.3 (2026-06-23)</h2> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/640fd358a0e82393acfce4e92e19a6ac6e1641a7"><code>640fd35</code></a> release: plugin-react@6.0.3</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/889efb02cdc4ec978a5e177a37e0213cfded38a4"><code>889efb0</code></a> fix(deps): update all non-major dependencies (<a href="https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react/issues/1249">#1249</a>)</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/6c57dd4c5d71075b48039df2532804e72880da21"><code>6c57dd4</code></a> fix(plugin-react): use '/' base in bundledDev preamble to fix non-root base p...</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/3cc33a703636b558a1c1c99e787ddc6bd64aab2d"><code>3cc33a7</code></a> fix(deps): update react-related dependencies (<a href="https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react/issues/1245">#1245</a>)</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/c0f7c7ff709dc9d88bc1f29f1b27c1b3e2bfcfca"><code>c0f7c7f</code></a> docs: mention the Biome rule in the "Consistent components exports" section (...</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/cd80f0f7b2b750f6e8f719f9c3dbe4f22ddd94db"><code>cd80f0f</code></a> fix(deps): update all non-major dependencies (<a href="https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react/issues/1241">#1241</a>)</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/e38accafea0c7c84f7fc72fd69d9cec731fa7600"><code>e38acca</code></a> fix(deps): update all non-major dependencies (<a href="https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react/issues/1227">#1227</a>)</li> <li><a href="https://github.com/vitejs/vite-plugin-react/commit/9a9bb26c23b966dceed47ff9ec257faeb0e777d9"><code>9a9bb26</code></a> perf(react): improve react compiler preset so that slightly more modules are ...</li> <li>See full diff in <a href="https://github.com/vitejs/vite-plugin-react/commits/plugin-react@6.0.3/packages/plugin-react">compare view</a></li> </ul> </details> <br /> Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore <dependency name> major version` will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself) - `@dependabot ignore <dependency name> minor version` will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself) - `@dependabot ignore <dependency name>` will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself) - `@dependabot unignore <dependency name>` will remove all of the ignore conditions of the specified dependency - `@dependabot unignore <dependency name> <ignore condition>` will remove the ignore condition of the specified dependency and ignore conditions </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
AI Elements — Tool-Calling Agent Example
A self-contained chat interface built with AI Elements components and @langchain/react. It demonstrates how to build a production-quality agentic UI using AI Elements' composable component library.
What it shows
- Tool call rendering — each tool invocation is displayed with
Tool+ToolHeader+ToolContent+ToolInput+ToolOutput, updating live as the agent streams tool input and then the result. - Reasoning display — when the model emits reasoning tokens, a collapsible
Reasoningblock auto-opens during streaming and collapses when done. - Streaming messages —
Message+MessageContent+MessageResponserenders streaming markdown via Streamdown with full GFM support. - Loading skeleton — a
Shimmerplaceholder appears between the user's message and the first assistant token. - Conversation scroll —
Conversation+ConversationContent+ConversationScrollButtonauto-scrolls and shows a jump-to-bottom button when you scroll up. - Message actions —
MessageActions+MessageActionwith a copy button appears below the last assistant message once streaming completes. - Prompt input —
PromptInput+PromptInputBody+PromptInputTextarea+PromptInputFooter+PromptInputSubmitprovides a full-featured input bar. - Suggestions —
Suggestions+Suggestionshows preset prompts before the first message.
Agent
The backing LangGraph agent (packages/agents/src/agents/ai-elements.ts) is a createReactAgent with two simulated tools:
| Tool | Description |
|---|---|
get_weather |
Returns deterministic simulated weather data for any city |
web_search |
Returns three simulated search result objects for any query |
No external API keys are required for the tools.
Setup
Create a .env file in this folder (optional — defaults are provided):
VITE_LANGGRAPH_API_URL=http://localhost:2024 # default when running locally
VITE_LANGGRAPH_ASSISTANT_ID=ai_elements # matches langgraph.json
Run
Start the LangGraph agent server first:
bun run dev --filter=@langchain/playground-agents
Then start this preview app:
bun run dev --filter=@langchain/playground-preview-ai-elements
Open http://localhost:4600.
AI Elements components used
| Component | Source file |
|---|---|
Conversation, ConversationContent, ConversationScrollButton |
src/components/ai-elements/conversation.tsx |
Message, MessageContent, MessageResponse, MessageActions, MessageAction |
src/components/ai-elements/message.tsx |
PromptInput, PromptInputBody, PromptInputTextarea, PromptInputFooter, PromptInputSubmit |
src/components/ai-elements/prompt-input.tsx |
Tool, ToolHeader, ToolContent, ToolInput, ToolOutput |
src/components/ai-elements/tool.tsx |
Reasoning, ReasoningTrigger, ReasoningContent |
src/components/ai-elements/reasoning.tsx |
Suggestions, Suggestion |
src/components/ai-elements/suggestion.tsx |
Shimmer |
src/components/ai-elements/shimmer.tsx |
Components live in src/components/ai-elements/ and are owned by this package (shadcn/AI Elements registry style — copy-paste, not a node_modules import).
Vite path alias
AI Elements components use bare src/ imports (e.g. import { cn } from "src/lib/utils"). The vite.config.ts maps src → ./src to resolve these correctly in both dev and production builds.