Files
langgraphjs/examples/ai-elements
github-actions[bot] 39df14b11f chore: version packages (#2513)
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.0

### Minor Changes

- [#2452](https://github.com/langchain-ai/langgraphjs/pull/2452)
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
`DeltaChannel` and the writes-history saver API (beta).

`DeltaChannel` is a reducer channel that stores only a sentinel in
checkpoint
blobs instead of the full accumulated value, reconstructing state on
read by
replaying ancestor writes through a batch reducer. This avoids
re-serializing
the entire accumulated value at every step (e.g. long message
histories).

- `DeltaChannel(reducer, { snapshotFrequency })` in
`@langchain/langgraph` —
count-based snapshot cadence (default `snapshotFrequency=1000`) plus a
system bound `DELTA_MAX_SUPERSTEPS_SINCE_SNAPSHOT` (default 5000, env
        `LANGGRAPH_DELTA_MAX_SUPERSTEPS_SINCE_SNAPSHOT`).
- `messagesDeltaReducer` — a batching-invariant messages reducer that
coerces
        raw object/string writes, for use with `DeltaChannel`.
- `BaseCheckpointSaver.getDeltaChannelHistory({ config, channels })`
(beta) —
walks the parent chain returning per-channel `{ writes, seed? }`, with a
        direct-storage override in `MemorySaver`.
- `counters_since_delta_snapshot` added to `CheckpointMetadata`;
`DeltaSnapshot`
        serialization support in the JSON+ serializer.

Reconstruction is wired through the Pregel read/execution paths
(initialization,
`getState`, `updateState`, local reads) and `exit` durability
accumulates and
anchors delta writes so threads remain reconstructible without forcing
    snapshots.

### Patch Changes

- [#2450](https://github.com/langchain-ai/langgraphjs/pull/2450)
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
node-level timeouts.

A `timeout` option is now supported on `StateGraph.addNode`, the
functional API
(`task`/`entrypoint`), and the `Send` constructor. Pass a number of
milliseconds
    for a hard wall-clock cap, or a `TimeoutPolicy` for finer control:

    ```ts
    import { TimeoutPolicy } from "@langchain/langgraph";

    // hard wall-clock cap on each attempt
    builder.addNode("agent", agentFn, { timeout: 60_000 });

    // full control
    builder.addNode("agent", agentFn, {
      timeout: {
        runTimeout: 60_000, // hard wall-clock cap, never refreshed
        idleTimeout: 10_000, // cap on time without observable progress
        refreshOn: "auto", // "auto" | "heartbeat"
      },
    });

    // per-task override
    new Send("agent", state, { timeout: { idleTimeout: 5_000 } });
    ```

    When a timeout fires, a `NodeTimeoutError` (carrying `node`, `kind`
(`"run"`/`"idle"`), `timeout`, `elapsed`, `runTimeout`, `idleTimeout`)
is raised,
the attempt's buffered writes are dropped, and the node's `AbortSignal`
is
aborted. `idleTimeout` is refreshed by observable progress (writes,
custom
stream-writer calls, child-task scheduling, callback events) or an
explicit
    `runtime.heartbeat()` call. The timer resets per retry attempt, and
    `NodeTimeoutError` is retryable under the default retry policy.

Ports langchain-ai/langgraph#7599,
[#7646](https://github.com/langchain-ai/langgraphjs/issues/7646), and
[#7659](https://github.com/langchain-ai/langgraphjs/issues/7659).

## @langchain/langgraph@1.4.0

### Minor Changes

- [#2449](https://github.com/langchain-ai/langgraphjs/pull/2449)
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
cooperative, between-superstep graph draining via `RunControl`.

    A new `RunControl` (exported from `@langchain/langgraph`) exposes
`requestDrain(reason)` plus read-only `drainRequested` / `drainReason`.
Pass it
through the new `control` option on `invoke` / `stream` / `streamEvents`
(and the
functional API). It is surfaced on `runtime.control`, so nodes can read
it or call
    `requestDrain()` themselves, and it is propagated into subgraphs.

When a drain is requested, the Pregel loop checks the flag at the top of
each
superstep (after the previous step's writes are applied and
checkpointed): if more
tasks remain it saves the checkpoint and throws the new `GraphDrained`
error (also
under `durability: "exit"`), so the run can be resumed later from the
same config.
If the graph naturally finishes on that tick it returns normally and the
caller can
inspect `control.drainRequested`. A drain requested inside a subgraph
bubbles up and
stops the parent at its next boundary. Draining never cancels work that
is already
running — pair it with an `AbortSignal` if you need a hard upper bound.

- [#2452](https://github.com/langchain-ai/langgraphjs/pull/2452)
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
`DeltaChannel` and the writes-history saver API (beta).

`DeltaChannel` is a reducer channel that stores only a sentinel in
checkpoint
blobs instead of the full accumulated value, reconstructing state on
read by
replaying ancestor writes through a batch reducer. This avoids
re-serializing
the entire accumulated value at every step (e.g. long message
histories).

- `DeltaChannel(reducer, { snapshotFrequency })` in
`@langchain/langgraph` —
count-based snapshot cadence (default `snapshotFrequency=1000`) plus a
system bound `DELTA_MAX_SUPERSTEPS_SINCE_SNAPSHOT` (default 5000, env
        `LANGGRAPH_DELTA_MAX_SUPERSTEPS_SINCE_SNAPSHOT`).
- `messagesDeltaReducer` — a batching-invariant messages reducer that
coerces
        raw object/string writes, for use with `DeltaChannel`.
- `BaseCheckpointSaver.getDeltaChannelHistory({ config, channels })`
(beta) —
walks the parent chain returning per-channel `{ writes, seed? }`, with a
        direct-storage override in `MemorySaver`.
- `counters_since_delta_snapshot` added to `CheckpointMetadata`;
`DeltaSnapshot`
        serialization support in the JSON+ serializer.

Reconstruction is wired through the Pregel read/execution paths
(initialization,
`getState`, `updateState`, local reads) and `exit` durability
accumulates and
anchors delta writes so threads remain reconstructible without forcing
    snapshots.

- [#2451](https://github.com/langchain-ai/langgraphjs/pull/2451)
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
feat(langgraph): add node-level error handlers

`StateGraph.addNode(name, fn, { errorHandler })` now accepts a
first-class
node-level error handler. The handler runs ONLY after the failing node's
`retryPolicy` is exhausted, so retry and handling stay decoupled. It
receives a
typed `NodeError { node, error }` and the typed node input state, can
return a
state update, and can route to a recovery branch via `new Command({ goto
})`
    (saga / compensation flows).

Failure provenance is checkpointed (via a reserved `ERROR_SOURCE_NODE`
write) so
handlers observe the same context after a checkpoint resume. Uncaught
node
errors without a handler still abort the run as before, and
`GraphBubbleUp`
    errors (such as `interrupt()`) are never swallowed by a handler.

`StateGraph.setNodeDefaults({ errorHandler })` now also accepts a
graph-wide
default handler. It is materialized at `compile()` as a single shared
handler
and invoked for every regular node that does not set its own
`errorHandler`. A
per-node handler always takes precedence, the default never catches a
failure
raised by an error-handler node itself (handler failures fail the run),
and the
    default is not inherited by subgraphs.

    Ports the Python feature from langchain-ai/langgraph#7233.

- [#2450](https://github.com/langchain-ai/langgraphjs/pull/2450)
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
node-level timeouts.

A `timeout` option is now supported on `StateGraph.addNode`, the
functional API
(`task`/`entrypoint`), and the `Send` constructor. Pass a number of
milliseconds
    for a hard wall-clock cap, or a `TimeoutPolicy` for finer control:

    ```ts
    import { TimeoutPolicy } from "@langchain/langgraph";

    // hard wall-clock cap on each attempt
    builder.addNode("agent", agentFn, { timeout: 60_000 });

    // full control
    builder.addNode("agent", agentFn, {
      timeout: {
        runTimeout: 60_000, // hard wall-clock cap, never refreshed
        idleTimeout: 10_000, // cap on time without observable progress
        refreshOn: "auto", // "auto" | "heartbeat"
      },
    });

    // per-task override
    new Send("agent", state, { timeout: { idleTimeout: 5_000 } });
    ```

    When a timeout fires, a `NodeTimeoutError` (carrying `node`, `kind`
(`"run"`/`"idle"`), `timeout`, `elapsed`, `runTimeout`, `idleTimeout`)
is raised,
the attempt's buffered writes are dropped, and the node's `AbortSignal`
is
aborted. `idleTimeout` is refreshed by observable progress (writes,
custom
stream-writer calls, child-task scheduling, callback events) or an
explicit
    `runtime.heartbeat()` call. The timer resets per retry attempt, and
    `NodeTimeoutError` is retryable under the default retry policy.

Ports langchain-ai/langgraph#7599,
[#7646](https://github.com/langchain-ai/langgraphjs/issues/7646), and
[#7659](https://github.com/langchain-ai/langgraphjs/issues/7659).

- [#2461](https://github.com/langchain-ai/langgraphjs/pull/2461)
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)
Thanks [@christian-bromann](https://github.com/christian-bromann)! - Add
`StateGraph.setNodeDefaults()` for setting graph-wide node policy
defaults (`retryPolicy`, `cachePolicy`). Per-node values passed to
`addNode` always take precedence, and defaults are resolved at
`compile()` time so call order does not matter. Defaults are not
inherited by subgraphs. Ports Python's `set_node_defaults()`
(langchain-ai/langgraph#7747).

### Patch Changes

- [#2179](https://github.com/langchain-ai/langgraphjs/pull/2179)
[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(core): time travel replay/fork for graphs with interrupts and
subgraphs

Ports Python fixes for stale RESUME writes during replay, wrong subgraph
checkpoint loading during time travel, missing fork checkpoints on
replay, and direct-to-subgraph time travel.

- [#2514](https://github.com/langchain-ai/langgraphjs/pull/2514)
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix(schema): expose StateSchema JSON schemas for Studio introspection

    Route StateSchema runtime definitions through getJsonSchema() and
    getInputJsonSchema() so LangGraph Studio receives state, input, and
    context schemas when graphs use the StateSchema primitive.

Fixes [#2466](https://github.com/langchain-ai/langgraphjs/issues/2466)

- [#2471](https://github.com/langchain-ai/langgraphjs/pull/2471)
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
perf(core): skip debug checkpoint snapshots when not streaming them

Avoid building full-state `mapDebugCheckpoint` payloads on every tick
when
    no consumer subscribed to `checkpoints` or `debug` stream modes. v3
companion checkpoint envelopes are unchanged (they come from values
metadata).

- [#2472](https://github.com/langchain-ai/langgraphjs/pull/2472)
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
perf(core): index pending writes for O(1) task-prep lookups

Build a PendingWritesIndex once per \_prepareNextTasks call so resume
and
skip-done-task checks avoid repeated linear scans over
checkpointPendingWrites.

- [#2473](https://github.com/langchain-ai/langgraphjs/pull/2473)
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
perf(core): optimize applyWrites, interrupt seen, and channel errors

Reduce allocations in \_applyWrites, fix O(N²) interrupt versions_seen
updates,
skip stack traces on EmptyChannelError control flow, and cache task
lists in
    the pregel loop and runner.

- [#2444](https://github.com/langchain-ai/langgraphjs/pull/2444)
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
feat(remote): add RemoteGraph v3 streaming support

Expose the v3 `streamEvents` surface for `RemoteGraph` by adapting
remote SDK thread streams to the local `GraphRunStream` shape.

- Updated dependencies
\[[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198)]:
    -   @langchain/langgraph-checkpoint@1.1.0

## @langchain/langgraph-checkpoint-mongodb@1.3.4

### Patch Changes

- [#2517](https://github.com/langchain-ai/langgraphjs/pull/2517)
[`67a4f8d`](https://github.com/langchain-ai/langgraphjs/commit/67a4f8da580eb527fa6f201a4c72895754fe37f7)
Thanks [@jackjin1997](https://github.com/jackjin1997)! - fix:
`MongoDBSaver.putWrites` now honors `WRITES_IDX_MAP`, pinning special
channels (`__error__`, `__scheduled__`, `__interrupt__`, `__resume__`)
to fixed negative indices instead of the call-local ordinal. Previously
a mixed `putWrites([[...regular...], [INTERRUPT, …]], taskId)` placed
the INTERRUPT at a positive idx that could collide with a regular write
at the same `(task_id, idx)`, and the unconditional `$set` upsert
silently overwrote whichever row landed there first. The
conflict-resolution clause now matches the Postgres / SQLite (TS and
Python) checkpointers: `$set` only when every channel is a special one,
`$setOnInsert` otherwise.

## @langchain/langgraph-checkpoint-postgres@1.0.3

### Patch Changes

- [#2512](https://github.com/langchain-ai/langgraphjs/pull/2512)
[`375c73f`](https://github.com/langchain-ai/langgraphjs/commit/375c73fcd1ef06145301df80466fda35c0a99385)
Thanks [@jackjin1997](https://github.com/jackjin1997)! - fix: reject SQL
`LIKE` wildcards (`%`, `_`) and the backslash escape character in
`PostgresStore` namespace labels. `BaseStore.search()` matches
namespaces via `namespace_path LIKE ${prefix}%`, and these characters in
caller-supplied namespace labels are interpreted as wildcards by
Postgres even through a bound parameter — letting a namespace prefix of
`["%"]` match every namespace in the store across tenants.
`validateNamespace` now throws for these characters at all `search` /
`get` / `put` entrypoints, keeping store-wide consistency. CWE-1336.

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

### Patch Changes

- [#2518](https://github.com/langchain-ai/langgraphjs/pull/2518)
[`9182ea3`](https://github.com/langchain-ai/langgraphjs/commit/9182ea35ecc1f932eb864fa7dc4fb32a00c5f7d6)
Thanks [@jackjin1997](https://github.com/jackjin1997)! - fix:
`RedisSaver.putWrites` now honors `WRITES_IDX_MAP`, pinning special
channels (`__error__`, `__scheduled__`, `__interrupt__`, `__resume__`)
to fixed negative indices in their Redis key
(`checkpoint_write:…:<idx>`) instead of the call-local ordinal.
Previously a mixed `putWrites([[…regular…], [INTERRUPT, …]], taskId)`
placed the INTERRUPT key at the positive idx of its position in the
batch, where a peer task's regular write at the same idx would overwrite
it via the unconditional `JSON.SET`. The conflict-resolution clause now
matches Postgres / SQLite / MongoDB: unguarded `JSON.SET` when every
write is a special channel, `JSON.SET … NX` (insert-or-ignore)
otherwise.

## @langchain/langgraph-checkpoint-sqlite@1.0.3

### Patch Changes

- [#2516](https://github.com/langchain-ai/langgraphjs/pull/2516)
[`f6a6d26`](https://github.com/langchain-ai/langgraphjs/commit/f6a6d26b7e69003c4fa052f3cd3319f3e72f0f8f)
Thanks [@jackjin1997](https://github.com/jackjin1997)! - fix:
`SqliteSaver.putWrites` now honors `WRITES_IDX_MAP`, pinning special
channels (`__error__`, `__scheduled__`, `__interrupt__`, `__resume__`)
to fixed negative indices instead of the call-local ordinal. Previously
a follow-up `putWrites([[INTERRUPT, …]], taskId)` for the same
checkpoint silently `REPLACE`d the regular write previously stored at
`idx=0` for that task, losing data. The conflict-resolution clause also
now matches the Python checkpointer contract: `OR REPLACE` only when
every channel is a special one (so e.g. INTERRUPT→RESUME state
transitions overwrite), `OR IGNORE` otherwise.

## @langchain/angular@1.0.21

### Patch Changes

- [#2515](https://github.com/langchain-ai/langgraphjs/pull/2515)
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix: make AnyStream a true supertype so selector hooks need no cast

    A concrete `useStream<typeof agent>()` handle was not assignable to
    `AnyStream` because generic-computed covariant members (`toolCalls`,
`values`) don't widen under `any` — `InferToolCalls<any>[]` resolves to
`AssembledToolCall<…, never>[]`, narrower than a concrete handle.
Override
    those members with their widest forms (preserving each framework's
reactivity wrapper — plain arrays for React/Svelte, `ShallowRef` for
Vue,
`Signal` for Angular) so the message/tool/value selector hooks accept a
    fully-typed stream without an `as AnyStream` cast.

## @langchain/react@1.0.21

### Patch Changes

- [#2515](https://github.com/langchain-ai/langgraphjs/pull/2515)
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix: make AnyStream a true supertype so selector hooks need no cast

    A concrete `useStream<typeof agent>()` handle was not assignable to
    `AnyStream` because generic-computed covariant members (`toolCalls`,
`values`) don't widen under `any` — `InferToolCalls<any>[]` resolves to
`AssembledToolCall<…, never>[]`, narrower than a concrete handle.
Override
    those members with their widest forms (preserving each framework's
reactivity wrapper — plain arrays for React/Svelte, `ShallowRef` for
Vue,
`Signal` for Angular) so the message/tool/value selector hooks accept a
    fully-typed stream without an `as AnyStream` cast.

## @langchain/svelte@1.0.21

### Patch Changes

- [#2515](https://github.com/langchain-ai/langgraphjs/pull/2515)
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix: make AnyStream a true supertype so selector hooks need no cast

    A concrete `useStream<typeof agent>()` handle was not assignable to
    `AnyStream` because generic-computed covariant members (`toolCalls`,
`values`) don't widen under `any` — `InferToolCalls<any>[]` resolves to
`AssembledToolCall<…, never>[]`, narrower than a concrete handle.
Override
    those members with their widest forms (preserving each framework's
reactivity wrapper — plain arrays for React/Svelte, `ShallowRef` for
Vue,
`Signal` for Angular) so the message/tool/value selector hooks accept a
    fully-typed stream without an `as AnyStream` cast.

## @langchain/vue@1.0.21

### Patch Changes

- [#2515](https://github.com/langchain-ai/langgraphjs/pull/2515)
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41)
Thanks [@christian-bromann](https://github.com/christian-bromann)! -
fix: make AnyStream a true supertype so selector hooks need no cast

    A concrete `useStream<typeof agent>()` handle was not assignable to
    `AnyStream` because generic-computed covariant members (`toolCalls`,
`values`) don't widen under `any` — `InferToolCalls<any>[]` resolves to
`AssembledToolCall<…, never>[]`, narrower than a concrete handle.
Override
    those members with their widest forms (preserving each framework's
reactivity wrapper — plain arrays for React/Svelte, `ShallowRef` for
Vue,
`Signal` for Angular) so the message/tool/value selector hooks accept a
    fully-typed stream without an `as AnyStream` cast.

## @example/ai-elements@0.1.36

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0
    -   @langchain/react@1.0.21

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

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0
    -   @langchain/react@1.0.21

## @examples/ui-angular@0.0.46

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0
    -   @langchain/angular@1.0.21

## @examples/ui-multimodal@0.0.22

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0
    -   @langchain/react@1.0.21

## @examples/ui-react@0.0.22

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`49b8c1a`](https://github.com/langchain-ai/langgraphjs/commit/49b8c1a04cf03a77069a955816b0f5af2f68ab41),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0
    -   @langchain/react@1.0.21

## langgraph@1.0.40

### Patch Changes

- Updated dependencies
\[[`01c67df`](https://github.com/langchain-ai/langgraphjs/commit/01c67dfa4dfea98509d6e1f35fa16de8c5d6a7c4),
[`d12d269`](https://github.com/langchain-ai/langgraphjs/commit/d12d2693308e37951266bc8197daa656daa6e2aa),
[`a8e7659`](https://github.com/langchain-ai/langgraphjs/commit/a8e7659a9d22fd84425aaf26bda88667c76b185a),
[`9e0201d`](https://github.com/langchain-ai/langgraphjs/commit/9e0201d8bd2d85490ca49e7e62126bda32b9121b),
[`9b96f60`](https://github.com/langchain-ai/langgraphjs/commit/9b96f60af64c0d25f780cfe00c1cb7698f3b5773),
[`8e06ace`](https://github.com/langchain-ai/langgraphjs/commit/8e06ace95cd2279a8cf9d350f01268a253376dc9),
[`d65a920`](https://github.com/langchain-ai/langgraphjs/commit/d65a9209d7fad603f45562c2b28c3d25502c8318),
[`2f6d873`](https://github.com/langchain-ai/langgraphjs/commit/2f6d87368e590ae2fc2a7990fd13cb0a5fe3c198),
[`a8b0036`](https://github.com/langchain-ai/langgraphjs/commit/a8b0036557333d16c95dfe51ccd61ee4cfdc600b),
[`4096933`](https://github.com/langchain-ai/langgraphjs/commit/4096933741e44d065e9b172f3bf86a621a88cc1e),
[`801d955`](https://github.com/langchain-ai/langgraphjs/commit/801d955d391f9fd9326a6696bff6c2f039883301)]:
    -   @langchain/langgraph@1.4.0

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