Files
langgraphjs/examples/ai-elements
github-actions[bot] c418781870 chore: version packages (#2495)
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @langchain/langgraph-api@1.2.5

### Patch Changes

-
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(langgraph): forward named custom stream channels consistently

Forward remote `StreamChannel` emissions as `custom:<name>` protocol
events and normalize them back to custom-channel payloads in the API
session. This aligns JavaScript stream-channel forwarding with the
protocol subscription shape used by remote clients, so `custom:<name>`
subscriptions receive extension channel data consistently.

-   Updated dependencies \[]:
    -   @langchain/langgraph-ui@1.2.5

## @langchain/langgraph-cli@1.2.5

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f)]:
    -   @langchain/langgraph-api@1.2.5

## @langchain/langgraph@1.3.6

### Patch Changes

-
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(langgraph): forward named custom stream channels consistently

Forward remote `StreamChannel` emissions as `custom:<name>` protocol
events and normalize them back to custom-channel payloads in the API
session. This aligns JavaScript stream-channel forwarding with the
protocol subscription shape used by remote clients, so `custom:<name>`
subscriptions receive extension channel data consistently.

- Updated dependencies
\[[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph-sdk@1.9.17

## @langchain/langgraph-sdk@1.9.17

### Patch Changes

- [#2494](https://github.com/langchain-ai/langgraphjs/pull/2494)
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): revive automatic optimistic submit echo

Echo `submit()` input into `values` / `messages` immediately with
client-side
id minting and id-based reconciliation as the server streams back.
Expose
per-message `optimisticStatus` via message metadata (`pending` → `sent`
/
`failed`), shallow-merge non-message keys with rollback when no `values`
arrive, and add an `optimistic: false` hook opt-out. Plumb through
React,
    Vue, Svelte, and Angular with browser e2e coverage.

-
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): coalesce duplicate thread read requests

Coalesce concurrent identical `threads.getState()` and
`threads.getHistory()` reads within the SDK client so transient remounts
do not issue duplicate hydrate requests. Request identity includes the
prepared URL, body, method, and headers, and coalescing is skipped for
caller-provided abort signals, raw response reads, and `onRequest` hooks
to preserve auth and cancellation isolation.

- [#2497](https://github.com/langchain-ai/langgraphjs/pull/2497)
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconcile subagents and subgraphs on thread reconnect

Seed deep-agent subagent cards from checkpoint messages and subgraph
hosts from a single bounded `getHistory` read during `hydrate()`, so
parallel fan-out discovery reappears immediately on refresh instead of
waiting for SSE replay. Subagent execution namespaces are promoted
through the existing guarded discovery state machine (bulk at hydrate,
lazily per opened card via the selector layer). The getHistory cost is
O(1) in requests regardless of fan-out width.

## @langchain/angular@1.0.17

### Patch Changes

- [#2494](https://github.com/langchain-ai/langgraphjs/pull/2494)
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): revive automatic optimistic submit echo

Echo `submit()` input into `values` / `messages` immediately with
client-side
id minting and id-based reconciliation as the server streams back.
Expose
per-message `optimisticStatus` via message metadata (`pending` → `sent`
/
`failed`), shallow-merge non-message keys with rollback when no `values`
arrive, and add an `optimistic: false` hook opt-out. Plumb through
React,
    Vue, Svelte, and Angular with browser e2e coverage.

- [#2497](https://github.com/langchain-ai/langgraphjs/pull/2497)
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconcile subagents and subgraphs on thread reconnect

Seed deep-agent subagent cards from checkpoint messages and subgraph
hosts from a single bounded `getHistory` read during `hydrate()`, so
parallel fan-out discovery reappears immediately on refresh instead of
waiting for SSE replay. Subagent execution namespaces are promoted
through the existing guarded discovery state machine (bulk at hydrate,
lazily per opened card via the selector layer). The getHistory cost is
O(1) in requests regardless of fan-out width.

- Updated dependencies
\[[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph-sdk@1.9.17

## @langchain/react@1.0.17

### Patch Changes

- [#2494](https://github.com/langchain-ai/langgraphjs/pull/2494)
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): revive automatic optimistic submit echo

Echo `submit()` input into `values` / `messages` immediately with
client-side
id minting and id-based reconciliation as the server streams back.
Expose
per-message `optimisticStatus` via message metadata (`pending` → `sent`
/
`failed`), shallow-merge non-message keys with rollback when no `values`
arrive, and add an `optimistic: false` hook opt-out. Plumb through
React,
    Vue, Svelte, and Angular with browser e2e coverage.

- [#2497](https://github.com/langchain-ai/langgraphjs/pull/2497)
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconcile subagents and subgraphs on thread reconnect

Seed deep-agent subagent cards from checkpoint messages and subgraph
hosts from a single bounded `getHistory` read during `hydrate()`, so
parallel fan-out discovery reappears immediately on refresh instead of
waiting for SSE replay. Subagent execution namespaces are promoted
through the existing guarded discovery state machine (bulk at hydrate,
lazily per opened card via the selector layer). The getHistory cost is
O(1) in requests regardless of fan-out width.

- Updated dependencies
\[[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph-sdk@1.9.17

## @langchain/svelte@1.0.17

### Patch Changes

- [#2494](https://github.com/langchain-ai/langgraphjs/pull/2494)
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): revive automatic optimistic submit echo

Echo `submit()` input into `values` / `messages` immediately with
client-side
id minting and id-based reconciliation as the server streams back.
Expose
per-message `optimisticStatus` via message metadata (`pending` → `sent`
/
`failed`), shallow-merge non-message keys with rollback when no `values`
arrive, and add an `optimistic: false` hook opt-out. Plumb through
React,
    Vue, Svelte, and Angular with browser e2e coverage.

- [#2497](https://github.com/langchain-ai/langgraphjs/pull/2497)
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconcile subagents and subgraphs on thread reconnect

Seed deep-agent subagent cards from checkpoint messages and subgraph
hosts from a single bounded `getHistory` read during `hydrate()`, so
parallel fan-out discovery reappears immediately on refresh instead of
waiting for SSE replay. Subagent execution namespaces are promoted
through the existing guarded discovery state machine (bulk at hydrate,
lazily per opened card via the selector layer). The getHistory cost is
O(1) in requests regardless of fan-out width.

- Updated dependencies
\[[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph-sdk@1.9.17

## @langchain/vue@1.0.17

### Patch Changes

- [#2494](https://github.com/langchain-ai/langgraphjs/pull/2494)
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): revive automatic optimistic submit echo

Echo `submit()` input into `values` / `messages` immediately with
client-side
id minting and id-based reconciliation as the server streams back.
Expose
per-message `optimisticStatus` via message metadata (`pending` → `sent`
/
`failed`), shallow-merge non-message keys with rollback when no `values`
arrive, and add an `optimistic: false` hook opt-out. Plumb through
React,
    Vue, Svelte, and Angular with browser e2e coverage.

- [#2497](https://github.com/langchain-ai/langgraphjs/pull/2497)
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconcile subagents and subgraphs on thread reconnect

Seed deep-agent subagent cards from checkpoint messages and subgraph
hosts from a single bounded `getHistory` read during `hydrate()`, so
parallel fan-out discovery reappears immediately on refresh instead of
waiting for SSE replay. Subagent execution namespaces are promoted
through the existing guarded discovery state machine (bulk at hydrate,
lazily per opened card via the selector layer). The getHistory cost is
O(1) in requests regardless of fan-out width.

- Updated dependencies
\[[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph-sdk@1.9.17

## @langchain/langgraph-ui@1.2.5



## @example/ai-elements@0.1.32

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph@1.3.6
    -   @langchain/react@1.0.17

## @examples/assistant-ui-claude@0.1.32

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph@1.3.6
    -   @langchain/react@1.0.17

## @examples/ui-angular@0.0.42

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph@1.3.6
    -   @langchain/langgraph-sdk@1.9.17
    -   @langchain/angular@1.0.17

## @examples/ui-multimodal@0.0.18

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph@1.3.6
    -   @langchain/react@1.0.17

## @examples/ui-react@0.0.18

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`0a0e04e`](https://github.com/langchain-ai/langgraphjs/commit/0a0e04e9ff7e82fd08411cc0094e1f94729a1e1e),
[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f),
[`a9aa8d6`](https://github.com/langchain-ai/langgraphjs/commit/a9aa8d6a9b23f5f7d4c56889fa68697b1e076b31)]:
    -   @langchain/langgraph@1.3.6
    -   @langchain/langgraph-sdk@1.9.17
    -   @langchain/react@1.0.17

## langgraph@1.0.38

### Patch Changes

- Updated dependencies
\[[`658a076`](https://github.com/langchain-ai/langgraphjs/commit/658a076d5b50af9f5b96ab99f26ed629da6e182f)]:
    -   @langchain/langgraph@1.3.6

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2026-06-05 15:52:16 -07:00
..
2026-06-05 15:52:16 -07:00
2026-06-05 15:52:16 -07:00

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 Reasoning block auto-opens during streaming and collapses when done.
  • Streaming messagesMessage + MessageContent + MessageResponse renders streaming markdown via Streamdown with full GFM support.
  • Loading skeleton — a Shimmer placeholder appears between the user's message and the first assistant token.
  • Conversation scrollConversation + ConversationContent + ConversationScrollButton auto-scrolls and shows a jump-to-bottom button when you scroll up.
  • Message actionsMessageActions + MessageAction with a copy button appears below the last assistant message once streaming completes.
  • Prompt inputPromptInput + PromptInputBody + PromptInputTextarea + PromptInputFooter + PromptInputSubmit provides a full-featured input bar.
  • SuggestionsSuggestions + Suggestion shows 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.