@langchain/vue 0.1.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @langchain/vue
 
-Vue SDK for building AI-powered applications with [LangChain](https://js.langchain.com/) and [LangGraph](https://langchain-ai.github.io/langgraphjs/). Provides a `useStream` composable that manages streaming, state, branching, and interrupts using Vue's reactivity system.
+Vue SDK for building AI-powered applications with [Deep Agents](https://docs.langchain.com/oss/javascript/deepagents/overview), [LangChain](https://docs.langchain.com/oss/javascript/langchain/overview) and [LangGraph](https://docs.langchain.com/oss/javascript/langgraph/overview). It provides a `useStream` composable that manages streaming, state, branching, and interrupts using Vue's reactivity system.
 
 ## Installation
 
@@ -24,12 +24,12 @@ const { messages, submit, isLoading } = useStream({
 
 <template>
   <div>
-    <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    <div v-for="(msg, i) in messages" :key="msg.id ?? i">
       {{ msg.content }}
     </div>
 
     <button
-      :disabled="isLoading.value"
+      :disabled="isLoading"
       @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
     >
       Send
@@ -58,7 +58,7 @@ const { messages, submit, isLoading } = useStream({
 
 ## Return Values
 
-All reactive properties are Vue `computed` or `ref` values.
+All reactive properties are Vue `computed` or `ref` values that [auto-unwrap](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates) in `<template>` blocks — use them directly (e.g. `messages`, not `messages.value`). The `queue` object is `reactive`, so its nested properties also auto-unwrap in templates.
 
 | Property | Type | Description |
 |---|---|---|
@@ -73,8 +73,8 @@ All reactive properties are Vue `computed` or `ref` values.
 | `setBranch(branch)` | `function` | Switch to a different conversation branch. |
 | `getMessagesMetadata(msg, index?)` | `function` | Get branching and checkpoint metadata for a message. |
 | `switchThread(id)` | `(id: string \| null) => void` | Switch to a different thread. Pass `null` to start a new thread on next submit. |
-| `queue.entries` | `Ref<ReadonlyArray<QueueEntry>>` | Pending server-side runs. Each entry has `id` (server run ID), `values`, `options`, and `createdAt`. |
-| `queue.size` | `Ref<number>` | Number of pending runs on the server. |
+| `queue.entries` | `ReadonlyArray<QueueEntry>` | Pending server-side runs. Each entry has `id` (server run ID), `values`, `options`, and `createdAt`. |
+| `queue.size` | `number` | Number of pending runs on the server. |
 | `queue.cancel(id)` | `(id: string) => Promise<boolean>` | Cancel a pending run on the server by its run ID. |
 | `queue.clear()` | `() => Promise<void>` | Cancel all pending runs on the server. |
 
@@ -134,12 +134,12 @@ const { messages, interrupt, submit } = useStream<
 
 <template>
   <div>
-    <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    <div v-for="(msg, i) in messages" :key="msg.id ?? i">
       {{ msg.content }}
     </div>
 
-    <div v-if="interrupt.value">
-      <p>{{ interrupt.value.value.question }}</p>
+    <div v-if="interrupt">
+      <p>{{ interrupt.value.question }}</p>
       <button @click="submit(null, { command: { resume: 'Approved' } })">
         Approve
       </button>
@@ -171,7 +171,7 @@ const { messages, submit, getMessagesMetadata, setBranch } = useStream({
 
 <template>
   <div>
-    <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    <div v-for="(msg, i) in messages" :key="msg.id ?? i">
       <p>{{ msg.content }}</p>
 
       <template v-if="getMessagesMetadata(msg, i)?.branchOptions">
@@ -221,17 +221,17 @@ const { messages, submit, isLoading, queue, switchThread } = useStream({
 
 <template>
   <div>
-    <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    <div v-for="(msg, i) in messages" :key="msg.id ?? i">
       {{ msg.content }}
     </div>
 
-    <div v-if="queue.size.value > 0">
-      <p>{{ queue.size.value }} message(s) queued</p>
+    <div v-if="queue.size > 0">
+      <p>{{ queue.size }} message(s) queued</p>
       <button @click="queue.clear()">Clear Queue</button>
     </div>
 
     <button
-      :disabled="isLoading.value"
+      :disabled="isLoading"
       @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
     >
       Send
@@ -270,17 +270,17 @@ const {
 
 <template>
   <div>
-    <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    <div v-for="(msg, i) in messages" :key="msg.id ?? i">
       <p>{{ msg.content }}</p>
       <span v-if="getMessagesMetadata(msg, i)?.streamMetadata">
         Node: {{ getMessagesMetadata(msg, i)?.streamMetadata?.langgraph_node }}
       </span>
     </div>
 
-    <p>Current branch: {{ branch.value }}</p>
+    <p>Current branch: {{ branch }}</p>
 
     <button
-      :disabled="isLoading.value"
+      :disabled="isLoading"
       @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
     >
       Send
@@ -289,11 +289,114 @@ const {
 </template>
 ```
 
-The custom transport interface returns the same properties as the standard `useStream` composable, including `getMessagesMetadata`, `branch`, `setBranch`, `switchThread`, and all message/interrupt/subagent helpers. When using a custom transport, `getMessagesMetadata` returns stream metadata sent alongside messages during streaming; `branch` and `setBranch` provide local branch state management.
+The custom transport interface returns the same properties as the standard `useStream` composable, including `getMessagesMetadata`, `branch`, `setBranch`, `switchThread`, and all message/interrupt/subagent helpers. When using a custom transport, `getMessagesMetadata` returns stream metadata sent alongside messages during streaming; `branch` and `setBranch` provide local branch state management. `onFinish` is also supported and receives a synthetic `ThreadState` built from the final locally streamed values; the run metadata argument is `undefined`.
+
+## Sharing State with `provideStream`
+
+When multiple components need access to the same stream (a message list, a header, an input bar), use `provideStream` and `useStreamContext` to share a single stream instance via Vue's `provide`/`inject`:
+
+```vue
+<!-- ChatContainer.vue -->
+<script setup lang="ts">
+import { provideStream } from "@langchain/vue";
+
+provideStream({
+  assistantId: "agent",
+  apiUrl: "http://localhost:2024",
+});
+</script>
+
+<template>
+  <ChatHeader />
+  <MessageList />
+  <MessageInput />
+</template>
+```
+
+```vue
+<!-- MessageList.vue -->
+<script setup lang="ts">
+import { useStreamContext } from "@langchain/vue";
+
+const { messages } = useStreamContext();
+</script>
+
+<template>
+  <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+    {{ msg.content }}
+  </div>
+</template>
+```
+
+```vue
+<!-- MessageInput.vue -->
+<script setup lang="ts">
+import { useStreamContext } from "@langchain/vue";
+import { ref } from "vue";
+
+const { submit, isLoading } = useStreamContext();
+const input = ref("");
+
+function send() {
+  submit({ messages: [{ type: "human", content: input.value }] });
+  input.value = "";
+}
+</script>
+
+<template>
+  <form @submit.prevent="send">
+    <textarea v-model="input" />
+    <button :disabled="isLoading.value" type="submit">Send</button>
+  </form>
+</template>
+```
+
+### App-Level Configuration with `LangChainPlugin`
+
+Use the Vue plugin to set default configuration for all `useStream` calls:
+
+```typescript
+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, `apiUrl` is inherited automatically:
+
+```vue
+<script setup lang="ts">
+import { useStream } from "@langchain/vue";
+
+const stream = useStream({ assistantId: "agent" });
+</script>
+```
+
+### Multiple Agents
+
+Nest `provideStream` calls for multi-agent scenarios — Vue's `provide`/`inject` scoping ensures each subtree gets its own stream:
+
+```vue
+<!-- ResearchPanel.vue -->
+<script setup lang="ts">
+import { provideStream } from "@langchain/vue";
+provideStream({ assistantId: "researcher", apiUrl: "http://localhost:2024" });
+</script>
+
+<template>
+  <MessageList />
+  <MessageInput />
+</template>
+```
 
 ## Playground
 
-For complete end-to-end examples with full agentic UIs, visit the [LangGraph Playground](https://github.com/langchain-ai/langgraphjs).
+For complete end-to-end examples with full agentic UIs, visit the [LangChain UI Playground](https://docs.langchain.com/playground).
 
 ## License
 

package/dist/context.cjs

@@ -0,0 +1,112 @@
+const require_index = require("./index.cjs");
+let vue = require("vue");
+//#region src/context.ts
+const STREAM_CONTEXT_KEY = Symbol("langchain-stream");
+const LANGCHAIN_OPTIONS = Symbol("langchain-options");
+/**
+* Vue plugin that provides default LangGraph configuration to all components.
+*
+* When installed, `useStream` composables throughout the application will
+* automatically use the configured `apiUrl` and `client` without requiring
+* explicit options.
+*
+* @example
+* ```typescript
+* 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:
+* ```vue
+* <script setup lang="ts">
+* import { useStream } from "@langchain/vue";
+*
+* // apiUrl is inherited from the plugin — no need to repeat it
+* const stream = useStream({ assistantId: "agent" });
+* <\/script>
+* ```
+*/
+const LangChainPlugin = { install(app, options = {}) {
+	app.provide(LANGCHAIN_OPTIONS, options);
+} };
+/**
+* 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 children via `useStreamContext()`.
+*
+* @example
+* ```vue
+* <!-- ChatContainer.vue -->
+* <script setup lang="ts">
+* import { provideStream } from "@langchain/vue";
+*
+* provideStream({ assistantId: "agent", apiUrl: "http://localhost:2024" });
+* <\/script>
+*
+* <template>
+*   <ChatHeader />
+*   <MessageList />
+*   <MessageInput />
+* </template>
+* ```
+*
+* @returns The stream instance (same as calling `useStream` directly).
+*/
+function provideStream(options) {
+	const stream = require_index.useStream(options);
+	(0, vue.provide)(STREAM_CONTEXT_KEY, stream);
+	return stream;
+}
+/**
+* Accesses the shared stream instance from the nearest ancestor that
+* called `provideStream()`.
+*
+* Throws if no ancestor has provided a stream.
+*
+* @example
+* ```vue
+* <!-- MessageList.vue -->
+* <script setup lang="ts">
+* import { useStreamContext } from "@langchain/vue";
+*
+* const { messages } = useStreamContext();
+* <\/script>
+*
+* <template>
+*   <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+*     {{ msg.content }}
+*   </div>
+* </template>
+* ```
+*
+* @example With type parameters for full type safety:
+* ```vue
+* <script setup lang="ts">
+* import { useStreamContext } from "@langchain/vue";
+* import type { agent } from "./agent";
+*
+* const { toolCalls } = useStreamContext<typeof agent>();
+* <\/script>
+* ```
+*/
+function useStreamContext() {
+	const context = (0, vue.inject)(STREAM_CONTEXT_KEY);
+	if (context == null) throw new Error("useStreamContext() requires a parent component to call provideStream(). Add provideStream({ assistantId: '...' }) in an ancestor component.");
+	return context;
+}
+//#endregion
+exports.LANGCHAIN_OPTIONS = LANGCHAIN_OPTIONS;
+exports.LangChainPlugin = LangChainPlugin;
+exports.provideStream = provideStream;
+exports.useStreamContext = useStreamContext;
+
+//# sourceMappingURL=context.cjs.map

package/dist/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.cjs","names":["useStream"],"sources":["../src/context.ts"],"sourcesContent":["import { provide, inject, type InjectionKey, type App, type Plugin } from \"vue\";\nimport type { BagTemplate } from \"@langchain/langgraph-sdk\";\nimport type {\n  ResolveStreamOptions,\n  InferBag,\n  InferStateType,\n  UseStreamCustomOptions,\n} from \"@langchain/langgraph-sdk/ui\";\nimport { Client } from \"@langchain/langgraph-sdk\";\nimport { useStream } from \"./index.js\";\n\n/**\n * Configuration options for the LangChain Vue plugin.\n * These provide default values that `useStream` will pick up automatically.\n */\nexport interface LangChainPluginOptions {\n  /** Base URL of the LangGraph API. */\n  apiUrl?: string;\n  /** API key for authenticating with the LangGraph API. */\n  apiKey?: string;\n  /** Pre-configured Client instance. */\n  client?: Client;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst STREAM_CONTEXT_KEY: InjectionKey<any> = Symbol(\"langchain-stream\");\n\nexport const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions> =\n  Symbol(\"langchain-options\");\n\n/**\n * Vue plugin that provides default LangGraph configuration to all components.\n *\n * When installed, `useStream` composables throughout the application will\n * automatically use the configured `apiUrl` and `client` without requiring\n * explicit options.\n *\n * @example\n * ```typescript\n * import { createApp } from \"vue\";\n * import { LangChainPlugin } from \"@langchain/vue\";\n * import App from \"./App.vue\";\n *\n * const app = createApp(App);\n * app.use(LangChainPlugin, {\n *   apiUrl: \"http://localhost:2024\",\n * });\n * app.mount(\"#app\");\n * ```\n *\n * Then in any component:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStream } from \"@langchain/vue\";\n *\n * // apiUrl is inherited from the plugin — no need to repeat it\n * const stream = useStream({ assistantId: \"agent\" });\n * </script>\n * ```\n */\nexport const LangChainPlugin: Plugin<[LangChainPluginOptions?]> = {\n  install(app: App, options: LangChainPluginOptions = {}) {\n    app.provide(LANGCHAIN_OPTIONS, options);\n  },\n};\n\n/**\n * Creates a shared `useStream` instance and provides it to all descendant\n * components via Vue's `provide`/`inject`.\n *\n * Call this in a parent component's `<script setup>` to make the stream\n * available to children via `useStreamContext()`.\n *\n * @example\n * ```vue\n * <!-- ChatContainer.vue -->\n * <script setup lang=\"ts\">\n * import { provideStream } from \"@langchain/vue\";\n *\n * provideStream({ assistantId: \"agent\", apiUrl: \"http://localhost:2024\" });\n * </script>\n *\n * <template>\n *   <ChatHeader />\n *   <MessageList />\n *   <MessageInput />\n * </template>\n * ```\n *\n * @returns The stream instance (same as calling `useStream` directly).\n */\nexport function provideStream<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n>(\n  options:\n    | ResolveStreamOptions<T, InferBag<T, Bag>>\n    | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>,\n): ReturnType<typeof useStream<T, Bag>> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const stream = useStream<T, Bag>(options as any);\n  provide(STREAM_CONTEXT_KEY, stream);\n  return stream;\n}\n\n/**\n * Accesses the shared stream instance from the nearest ancestor that\n * called `provideStream()`.\n *\n * Throws if no ancestor has provided a stream.\n *\n * @example\n * ```vue\n * <!-- MessageList.vue -->\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n *\n * const { messages } = useStreamContext();\n * </script>\n *\n * <template>\n *   <div v-for=\"(msg, i) in messages.value\" :key=\"msg.id ?? i\">\n *     {{ msg.content }}\n *   </div>\n * </template>\n * ```\n *\n * @example With type parameters for full type safety:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n * import type { agent } from \"./agent\";\n *\n * const { toolCalls } = useStreamContext<typeof agent>();\n * </script>\n * ```\n */\nexport function useStreamContext<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n>(): ReturnType<typeof useStream<T, Bag>> {\n  const context = inject(STREAM_CONTEXT_KEY);\n  if (context == null) {\n    throw new Error(\n      \"useStreamContext() requires a parent component to call provideStream(). \" +\n        \"Add provideStream({ assistantId: '...' }) in an ancestor component.\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;AAyBA,MAAM,qBAAwC,OAAO,mBAAmB;AAExE,MAAa,oBACX,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC7B,MAAa,kBAAqD,EAChE,QAAQ,KAAU,UAAkC,EAAE,EAAE;AACtD,KAAI,QAAQ,mBAAmB,QAAQ;GAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,cAId,SAGsC;CAEtC,MAAM,SAASA,cAAAA,UAAkB,QAAe;AAChD,EAAA,GAAA,IAAA,SAAQ,oBAAoB,OAAO;AACnC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCT,SAAgB,mBAG0B;CACxC,MAAM,WAAA,GAAA,IAAA,QAAiB,mBAAmB;AAC1C,KAAI,WAAW,KACb,OAAM,IAAI,MACR,8IAED;AAEH,QAAO"}

package/dist/context.d.cts

@@ -0,0 +1,112 @@
+import { useStream } from "./index.cjs";
+import { InjectionKey, Plugin } from "vue";
+import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
+import { BagTemplate, Client } from "@langchain/langgraph-sdk";
+
+//#region src/context.d.ts
+/**
+ * Configuration options for the LangChain Vue plugin.
+ * These provide default values that `useStream` will pick up automatically.
+ */
+interface LangChainPluginOptions {
+  /** Base URL of the LangGraph API. */
+  apiUrl?: string;
+  /** API key for authenticating with the LangGraph API. */
+  apiKey?: string;
+  /** Pre-configured Client instance. */
+  client?: Client;
+}
+declare const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions>;
+/**
+ * Vue plugin that provides default LangGraph configuration to all components.
+ *
+ * When installed, `useStream` composables throughout the application will
+ * automatically use the configured `apiUrl` and `client` without requiring
+ * explicit options.
+ *
+ * @example
+ * ```typescript
+ * 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:
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStream } from "@langchain/vue";
+ *
+ * // apiUrl is inherited from the plugin — no need to repeat it
+ * const stream = useStream({ assistantId: "agent" });
+ * </script>
+ * ```
+ */
+declare const LangChainPlugin: Plugin<[LangChainPluginOptions?]>;
+/**
+ * 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 children via `useStreamContext()`.
+ *
+ * @example
+ * ```vue
+ * <!-- ChatContainer.vue -->
+ * <script setup lang="ts">
+ * import { provideStream } from "@langchain/vue";
+ *
+ * provideStream({ assistantId: "agent", apiUrl: "http://localhost:2024" });
+ * </script>
+ *
+ * <template>
+ *   <ChatHeader />
+ *   <MessageList />
+ *   <MessageInput />
+ * </template>
+ * ```
+ *
+ * @returns The stream instance (same as calling `useStream` directly).
+ */
+declare function provideStream<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(options: ResolveStreamOptions<T, InferBag<T, Bag>> | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>): ReturnType<typeof useStream<T, Bag>>;
+/**
+ * Accesses the shared stream instance from the nearest ancestor that
+ * called `provideStream()`.
+ *
+ * Throws if no ancestor has provided a stream.
+ *
+ * @example
+ * ```vue
+ * <!-- MessageList.vue -->
+ * <script setup lang="ts">
+ * import { useStreamContext } from "@langchain/vue";
+ *
+ * const { messages } = useStreamContext();
+ * </script>
+ *
+ * <template>
+ *   <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+ *     {{ msg.content }}
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @example With type parameters for full type safety:
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStreamContext } from "@langchain/vue";
+ * import type { agent } from "./agent";
+ *
+ * const { toolCalls } = useStreamContext<typeof agent>();
+ * </script>
+ * ```
+ */
+declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
+//#endregion
+export { LANGCHAIN_OPTIONS, LangChainPlugin, LangChainPluginOptions, provideStream, useStreamContext };
+//# sourceMappingURL=context.d.cts.map

package/dist/context.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.cts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAeA;;;UAAiB,sBAAA;EAEf;EAAA,MAAA;EAIA;EAFA,MAAA;EAEe;EAAf,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;;;;;;;;;;;;;;;;;AA6EtC;;iBA9CgB,aAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,OAAA,EACI,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA,KACpC,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA,KACzD,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuClB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}

package/dist/context.d.ts

@@ -0,0 +1,112 @@
+import { useStream } from "./index.js";
+import { InjectionKey, Plugin } from "vue";
+import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
+import { BagTemplate, Client } from "@langchain/langgraph-sdk";
+
+//#region src/context.d.ts
+/**
+ * Configuration options for the LangChain Vue plugin.
+ * These provide default values that `useStream` will pick up automatically.
+ */
+interface LangChainPluginOptions {
+  /** Base URL of the LangGraph API. */
+  apiUrl?: string;
+  /** API key for authenticating with the LangGraph API. */
+  apiKey?: string;
+  /** Pre-configured Client instance. */
+  client?: Client;
+}
+declare const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions>;
+/**
+ * Vue plugin that provides default LangGraph configuration to all components.
+ *
+ * When installed, `useStream` composables throughout the application will
+ * automatically use the configured `apiUrl` and `client` without requiring
+ * explicit options.
+ *
+ * @example
+ * ```typescript
+ * 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:
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStream } from "@langchain/vue";
+ *
+ * // apiUrl is inherited from the plugin — no need to repeat it
+ * const stream = useStream({ assistantId: "agent" });
+ * </script>
+ * ```
+ */
+declare const LangChainPlugin: Plugin<[LangChainPluginOptions?]>;
+/**
+ * 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 children via `useStreamContext()`.
+ *
+ * @example
+ * ```vue
+ * <!-- ChatContainer.vue -->
+ * <script setup lang="ts">
+ * import { provideStream } from "@langchain/vue";
+ *
+ * provideStream({ assistantId: "agent", apiUrl: "http://localhost:2024" });
+ * </script>
+ *
+ * <template>
+ *   <ChatHeader />
+ *   <MessageList />
+ *   <MessageInput />
+ * </template>
+ * ```
+ *
+ * @returns The stream instance (same as calling `useStream` directly).
+ */
+declare function provideStream<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(options: ResolveStreamOptions<T, InferBag<T, Bag>> | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>): ReturnType<typeof useStream<T, Bag>>;
+/**
+ * Accesses the shared stream instance from the nearest ancestor that
+ * called `provideStream()`.
+ *
+ * Throws if no ancestor has provided a stream.
+ *
+ * @example
+ * ```vue
+ * <!-- MessageList.vue -->
+ * <script setup lang="ts">
+ * import { useStreamContext } from "@langchain/vue";
+ *
+ * const { messages } = useStreamContext();
+ * </script>
+ *
+ * <template>
+ *   <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+ *     {{ msg.content }}
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @example With type parameters for full type safety:
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStreamContext } from "@langchain/vue";
+ * import type { agent } from "./agent";
+ *
+ * const { toolCalls } = useStreamContext<typeof agent>();
+ * </script>
+ * ```
+ */
+declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
+//#endregion
+export { LANGCHAIN_OPTIONS, LangChainPlugin, LangChainPluginOptions, provideStream, useStreamContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAeA;;;UAAiB,sBAAA;EAEf;EAAA,MAAA;EAIA;EAFA,MAAA;EAEe;EAAf,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;;;;;;;;;;;;;;;;;AA6EtC;;iBA9CgB,aAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,OAAA,EACI,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA,KACpC,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA,KACzD,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuClB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}