Part 1: Setup frontend

Create a new project

Run the following command to create a new Next.js project with the LangGraph assistant-ui template:

npx create-assistant-ui@latest -t langchain my-app
cd my-app

Your project includes the following files:

Setup environment variables

Create a .env.local file in your project with the following variables:

LANGGRAPH_API_URL=https://assistant-ui-stockbroker.vercel.app/api
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker

This connects the frontend to a LangGraph Cloud endpoint running under
https://assistant-ui-stockbroker.vercel.app/api.
This endpoint is running the LangGraph agent defined in this repository.

Start the server

The template also bundles a local LangGraph backend (backend/agent.ts), which this tutorial does not use. Start only the frontend:

npm run dev:frontend

The server will start and you can view the frontend by opening a browser tab to http://localhost:3000.

You should be able to chat with the assistant and see LLM responses streaming in real-time.

Explore features

Streaming

Streaming message support is enabled by default. The template's runtime, useStreamRuntime from @assistant-ui/react-langchain, delegates stream handling to useStream from @langchain/react, which accumulates text and tool call chunks as they arrive.

Markdown support

Rich text rendering using Markdown is enabled by default.