# Part 1: Setup frontend
URL: /docs/runtimes/langgraph/tutorial/part-1

Create a Next.js project with the LangGraph assistant-ui template.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

## 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
```

You should see the following files in your project:

- name

  my-app

* name

  app

- name

  api

* name

  \[...\_path]

- name

  route.ts

* name

  assistant.tsx

- name

  globals.css

* name

  layout.tsx

- name

  page.tsx

* name

  components

- name

  assistant-ui

* name

  thread.tsx

- name

  ui

* name

  button.tsx

- name

  tooltip.tsx

* name

  lib

- name

  chatApi.ts

* name

  utils.ts

- name

  components.json

* name

  next.config.ts

- name

  package.json

* name

  postcss.config.mjs

- name

  tsconfig.json

### 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](https://github.com/assistant-ui/assistant-ui-stockbroker/blob/main/backend).

### 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. The LangGraph integration includes sophisticated message handling that efficiently manages streaming responses:

- Messages are accumulated and updated in real-time using `LangGraphMessageAccumulator`
- Partial message chunks are automatically merged using `appendLangChainChunk`
- The runtime handles all the complexity of managing streaming state

This means you'll see tokens appear smoothly as they're generated by the LLM, with proper handling of both text content and tool calls.

### Markdown support

Rich text rendering using Markdown is enabled by default.