Getting started

@langchain/svelte ships a useStream hook together with a small family of companion selector hooks. The root hook gives you always-on access to thread state, messages, tool calls, and interrupts; the selector hooks open ref-counted subscriptions for the things that aren't needed on every view (per-subagent messages, media streams, submission queue, message metadata, raw channels).

Learn more: For end-to-end tutorials and UI patterns, see the LangChain frontend documentation.

Installation

npm install @langchain/svelte @langchain/core

Peer dependencies: svelte (^5) and @langchain/core.

Your first chat

Mount useStream once per thread. Point it at a running agent server and render messages:

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

  const stream = useStream({
    assistantId: "agent",
    apiUrl: "http://localhost:2024",
  });
</script>

{#each stream.messages as msg, i (msg.id ?? i)}
  <div>{msg.content}</div>
{/each}

<button disabled={stream.isLoading} onclick={() => stream.submit({ messages: [{ type: "human", content: "Hello!" }] })}>
  Send
</button>

Use the graph name from your langgraph.json as assistantId.

Mental model

@langchain/svelte splits the surface into two layers:

1. Root composable (useStream). Owns the thread lifecycle, the transport, and a handful of always-on projections: values, messages, toolCalls, interrupts, error, isLoading, and the subagent / subgraph discovery maps. Mount it once per thread.
2. Companion composables. Each opens a ref-counted subscription when the first component mounts it and releases it when the last consumer unmounts. Use them for anything scoped to a namespace, a subagent / subgraph, a specific message, an extension channel, or a media stream.

import { useStream, useMessages, useSubmissionQueue } from "@langchain/svelte";

function Chat() {
  const stream = useStream({ assistantId: "agent", apiUrl: "/api" });

  // Root: free read, no new subscription.
  const messages = useMessages(stream); // same as stream.messages

  // Scoped: opens a subscription on mount.
  const queue = useSubmissionQueue(stream);
}

The key idea: views that don't render a subagent's messages never pay for that subagent's wire traffic. Subscriptions follow the component tree.

Runnable examples

The streaming cookbook collects end-to-end, runnable apps built on these hooks. Clone it and run any example from the typescript/ workspace:

Where to go next