Menu
Language
Theme
Vue SDK for building AI-powered applications with Deep Agents, LangChain and LangGraph.
The package ships a Composition-API–first binding built on top of
the v2 streaming protocol. useStream returns a small, always-on
root handle (values, messages, isLoading, error, …) and
pushes anything namespaced (subagents, subgraphs, media, submission
queue, per-message metadata) behind ref-counted use* selectors
so components only pay for the data they actually consume.
Upgrading from
0.x? Seedocs/v1-migration.mdfor the complete matrix of option, return-shape, and transport changes.
reconnectOnMount /
joinStream dance.ShallowRef /
ComputedRef, auto-disposed via onScopeDispose when the scope
unmounts.useStream<typeof agent>()
unwraps state, tool calls, and subagent state maps from an agent
brand.<img> / <audio> /
<video> players.<Suspense> friendly. hydrationPromise lets you gate
async setup() on initial hydration.npm install @langchain/vue @langchain/corePeer dependencies: vue (^3.4.0), @langchain/core (^1.0.1).
<script setup lang="ts">
import { useStream } from "@langchain/vue";
const stream = useStream({
assistantId: "agent",
apiUrl: "http://localhost:2024",
});
function onSubmit() {
void stream.submit({ messages: [{ type: "human", content: "Hello!" }] });
}
</script>
<template>
<div>
<div v-for="(msg, i) in stream.messages" :key="msg.id ?? i">
{{ typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content) }}
</div>
<button :disabled="stream.isLoading" @click="onSubmit">
Send
</button>
</div>
</template>Reactive fields on the handle are Vue refs (ShallowRef /
ComputedRef). In <script setup>, read them with .value:
stream.messages.value, stream.isLoading.value. In <template>,
Vue auto-unwraps refs, so prefer the shorter
stream.messages / stream.isLoading form.
In-depth guides live in docs/:
useStream options and
return shape.AgentServerAdapter implementations.AgentServerAdapter against your own backend, with a worked
walkthrough of examples/ui-react-transport.useMessageMetadata + submit({ forkFrom }).provideStream,
useStreamContext, and the LangChainPlugin app-level defaults.async setup() on hydrationPromise.For complete end-to-end examples with full agentic UIs, visit the LangChain UI Playground.
MIT
Public v1 name for TransportAdapter plus optional high-level capabilities. Renamed to reflect that this interface now denotes the full agent-server protocol contract (not merely wire transport): any o
Typed error thrown through media.stream / rejected from
media.blob / media.objectURL when a handle fails before its
message completes. Carries the bytes accumulated up to the failure
point on `p
Strip headless-tool interrupts from a user-facing interrupt list.
Execute and resume all newly seen headless-tool interrupts from a values
payload. Callers own handledIds and should clear it when the thread changes.
Parses a headless-tool interrupt value from the graph. Accepts both
toolCall (LangChain JS) and tool_call (Python / JSON snake_case).
Creates a shared useStream instance and provides it to all descendant
components via Vue's provide/inject.
Call this in a parent component's <script setup> to make the stream
available to chi
Subscribe to a scoped audio-media stream. Each handle is yielded
on its first matching content-block-start, exposes
.partialBytes for live access, settles .blob / .objectURL /
.transcript on
Progressive audio playback for AudioMedia handles with a
uniform surface across PCM (streamed) and container
(HTMLAudioElement) strategies.
See useAudioPlayer in the React binding for the full beha
Side-effect counterpart to useChannel. Instead of returning a
reactive buffer, it invokes onEvent once per event for as long as
the calling scope is alive — the idiomatic place for analytics,
loggin
Subscribe to a custom:<name> stream extension — the most-recent
payload emitted by the transformer, scoped to the target namespace.
Returns only the latest value and resumes across serial runs, so
Subscribe to a scoped file-media stream. Pair with
useMediaURL for an <a download href> target.
Subscribe to a scoped image-media stream. Pair with
useMediaURL for <img src>.
Resolve the lazy MediaBase.objectURL promise into a
reactive string suitable for <audio src>, <img src>,
<video src>, or <a download href>. Returns undefined until
the URL is available.
Lif
Read metadata recorded for a specific message id — today exposes
parentCheckpointId, the checkpoint the message was first seen on.
Designed for fork / edit flows:
const meta = useMessageMetad
Subscribe to a scoped messages stream.
Contract:
target) this returns stream.messages — the
always-on root projection; no extra subscription is opened.Vue primitive that composes ChannelRegistry.acquire with Vue's reactivity system.
Contract (mirrors the React useProjection hook but adapted to
Vue's setup + onScopeDispose lifecycle):
Vue Composition API binding for the v2-native stream runtime.
Returns a handle whose projections are Vue refs so templates
auto-unwrap and scripts can feed them into computed/watch.
Scoped views
Accesses the shared stream instance from the nearest ancestor that
called provideStream().
Throws if no ancestor has provided a stream.
Subscribe to a scoped tools (tool-call) stream. Same target and
lifecycle rules as useMessages; at the root this returns
stream.toolCalls directly.
Subscribe to a scoped values stream — the most recent state
payload for a namespace. At the root returns stream.values.
Typing:
useValues(stream)): returns the StateType declaredSubscribe to a scoped video-media stream. Pair with
useMediaURL for <video src>.
Bind a VideoMedia handle to a caller-owned <video> element.
Vue idioms:
videoRef accepts a raw HTMLVideoElement, a Ref<...>, or a
getter. Pair with <video ref="video" /> in the templa