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 langgraph my-app
cd my-app

You should see the following files in your project:

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

You can start the server by running the following command:

npm run dev

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. Tokens are streamed in real-time as the LLM generates them.

Markdown support

Rich text rendering using Markdown is enabled by default. You can view /app/page.tsx to see how this is implemented. The makeMarkdownText function accepts a configuration object to customize the markdown parser.

"use client";
 
import { Thread } from "@assistant-ui/react";
import { makeMarkdownText } from "@assistant-ui/react-markdown";
 
const MarkdownText = makeMarkdownText();
 
export default function Home() {
  return (
    <main className="h-full">
      <Thread assistantMessage={{ components: { Text: MarkdownText } }} />
    </main>
  );
}

Add conversation starter messages

In order to help users understand what the assistant can do, we can add some conversation starter messages.

export default function Home() {
  return (
    <div className="flex h-full flex-col">
      <Thread
        welcome={{
          suggestions: [
            {
              prompt: "How much revenue did Apple make last year?",
            },
            {
              prompt: "Is McDonald's profitable?",
            },
            {
              prompt: "What's the current stock price of Tesla?",
            },
          ],
        }}
        assistantMessage={{ components: { Text: MarkdownText } }}
      />
    </div>
  );
}