Files
langgraphjs/examples/ai-elements
github-actions[bot] 957cac4ea4 chore: version packages (#2526)
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-checkpoint@1.1.1

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

## @langchain/langgraph-checkpoint-redis@1.0.9

### Patch Changes

- [#2525](https://github.com/langchain-ai/langgraphjs/pull/2525)
[`829a32a`](https://github.com/langchain-ai/langgraphjs/commit/829a32a30cc22103b1cb0aba6a027b7ccdb68447)
Thanks [@lhlyu](https://github.com/lhlyu)! - Fix Redis checkpoint
pending write deserialization when a write document has no `value`
field. RedisJSON omits `undefined` values, so `loadPendingWrites` now
restores a missing `value` as `undefined` instead of passing it through
JSON parsing.

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

## @langchain/langgraph-api@1.3.1

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-ui@1.3.1

## @langchain/langgraph-cli@1.3.1

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-api@1.3.1

## @langchain/langgraph@1.4.2

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22
    -   @langchain/langgraph-checkpoint@1.1.1

## @langchain/langgraph-supervisor@1.1.1

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

## @langchain/langgraph-ui@1.3.1

### Patch Changes

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

## @langchain/langgraph-sdk@1.9.22

### Patch Changes

- [#2529](https://github.com/langchain-ai/langgraphjs/pull/2529)
[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(sdk): reconnect SSE streams when heartbeat idle is detected

Detect half-open SSE connections by watching for server keep-alive
heartbeats (`: heartbeat`) and reconnecting with Last-Event-ID or
`since` when they stop. `"auto"` mode arms only after heartbeats are
observed, so long tool calls and HITL pauses do not false-fire on
heartbeat-emitting servers.

- [#2528](https://github.com/langchain-ai/langgraphjs/pull/2528)
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
Allow custom `AgentServerAdapter`s to be late-bound and re-bound to a
thread. Adapters can now implement an optional `setThreadId(threadId)`,
which `client.threads.stream(threadId, { transport })` calls when
binding the active thread — including the lazily-minted id from the
first `submit()` on a `threadId: null` controller. The built-in
`ProtocolSseTransportAdapter`, `ProtocolWebSocketTransportAdapter`, and
`HttpAgentServerAdapter` implement it: `threadId` is now optional at
construction, request URLs derive from the currently-bound thread, and
`paths` entries may be functions of the thread id (`(threadId) =>
string`). This lets a single custom transport back a lazy
thread-creation flow instead of being pinned to one thread at
construction.

- [#2527](https://github.com/langchain-ai/langgraphjs/pull/2527)
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
chore(deps): remove uuid dependency in favor of embedded uuid in core

Replace direct `uuid` package imports with `@langchain/core/utils/uuid`
across
langgraph packages to deduplicate dependencies and align with
@langchain/core's
    embedded UUID utilities.

## @langchain/angular@1.0.23

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22

## @langchain/react@1.0.23

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22

## @langchain/svelte@1.0.23

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22

## @langchain/vue@1.0.23

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22

## @example/ai-elements@0.1.38

### Patch Changes

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph@1.4.2
    -   @langchain/react@1.0.23

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

### Patch Changes

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph@1.4.2
    -   @langchain/react@1.0.23

## @examples/ui-angular@0.0.48

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22
    -   @langchain/langgraph@1.4.2
    -   @langchain/angular@1.0.23

## @examples/ui-multimodal@0.0.24

### Patch Changes

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph@1.4.2
    -   @langchain/react@1.0.23

## @examples/ui-react@0.0.24

### Patch Changes

- Updated dependencies
\[[`ba31f04`](https://github.com/langchain-ai/langgraphjs/commit/ba31f045d1d458a456c6f6441e8ee81d32c5c700),
[`e7e8035`](https://github.com/langchain-ai/langgraphjs/commit/e7e8035fadca5f0d4cbc55bbbb77e65878ab2952),
[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph-sdk@1.9.22
    -   @langchain/langgraph@1.4.2
    -   @langchain/react@1.0.23

## langgraph@1.0.42

### Patch Changes

- Updated dependencies
\[[`9e114e5`](https://github.com/langchain-ai/langgraphjs/commit/9e114e55d362a874878a817740de42fd62ae9db7)]:
    -   @langchain/langgraph@1.4.2

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2026-06-12 14:33:35 -07:00
..
2026-06-12 14:33:35 -07:00
2026-06-12 14:33:35 -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.