provideStream & context

provideStream shares a single useStream instance across a component subtree. It accepts the same option shape as useStream; getStream reads the bound handle from any descendant.

Basic usage

Call provideStream during component initialisation (top-level <script>):

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

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

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

Child components read the shared handle with getStream:

<script lang="ts">
  import { getStream } from "@langchain/svelte";

  const stream = getStream();
</script>

<header>
  {#if stream.isLoading}<span>Thinking…</span>{/if}
  {#if stream.error}<span>Error occurred</span>{/if}
</header>

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

<script lang="ts">
  import { getStream, useMessages } from "@langchain/svelte";

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

Type inference

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

<script lang="ts">
  import type { agent } from "./agent";
  import { getStream } from "@langchain/svelte";

  const stream = getStream<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.

Custom adapters

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

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

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

  provideStream({ transport });
</script>

See Transports.

API reference