provideStream & context

provideStream shares a single useStream instance across a component subtree without prop drilling. It accepts the same option shape as useStream; useStreamContext reads the bound stream from any descendant.

Basic usage

Call provideStream in a parent component's <script setup>:

<!-- ChatContainer.vue -->
<script setup lang="ts">
import { provideStream } from "@langchain/vue";

provideStream({ assistantId: "agent", apiUrl: "http://localhost:2024" });
</script>

<template>
  <ChatHeader />
  <MessageList />
  <MessageInput />
</template>

Child components read the shared handle with useStreamContext:

<script setup lang="ts">
import { useStreamContext } from "@langchain/vue";

const { isLoading, error } = useStreamContext();
</script>

<template>
  <header>
    <span v-if="isLoading">Thinking…</span>
    <span v-if="error != null">Error occurred</span>
  </header>
</template>

Companion composables (useMessages, useToolCalls, etc.) work against the handle from useStreamContext:

<script setup lang="ts">
import { useMessages, useStreamContext } from "@langchain/vue";

const stream = useStreamContext();
const messages = useMessages(stream);
</script>

App-wide defaults with LangChainPlugin

Install the plugin once to avoid repeating apiUrl / client on every useStream call:

import { createApp } from "vue";
import { LangChainPlugin } from "@langchain/vue";
import App from "./App.vue";

const app = createApp(App);
app.use(LangChainPlugin, { apiUrl: "http://localhost:2024" });
app.mount("#app");

Then in any component:

<script setup lang="ts">
import { useStream } from "@langchain/vue";

const stream = useStream({ assistantId: "agent" });
</script>

Type inference

Pass the agent brand to useStreamContext to flow state / tool-call / subagent inference through:

<script setup lang="ts">
import type { agent } from "./agent";
import { useStreamContext } from "@langchain/vue";

const stream = useStreamContext<typeof agent>();
</script>

This is equivalent to calling useStream<typeof agent>() directly. See Type safety.

Nested layouts (multi-agent)

Call provideStream in separate parent components — each subtree gets its own stream handle:

<template>
  <div class="grid">
    <ResearchPanel />
    <WriterPanel />
  </div>
</template>

<!-- ResearchPanel.vue -->
<script setup lang="ts">
import { provideStream } from "@langchain/vue";
provideStream({ assistantId: "researcher", apiUrl: "http://localhost:2024" });
</script>

Custom adapters

provideStream accepts the same discriminated option bag as useStream, including a custom AgentServerAdapter:

<script setup lang="ts">
import { provideStream, HttpAgentServerAdapter } from "@langchain/vue";

const transport = new HttpAgentServerAdapter({
  apiUrl: "/api/chat",
  threadId: "thread-123",
});

provideStream({ transport });
</script>

See Transports.

API reference