logoassistant-ui

Getting Started

Requirements

You need a LangGraph Cloud API server. You can start a server locally via LangGraph Studio or use LangSmith for a hosted version.

The state of the graph you are using must have a messages key with a list of LangChain-alike messages.

New project from template

Create a new project based on the LangGraph assistant-ui template

npx assistant-ui@latest create -t langgraph my-app

Set environment variables

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

# LANGCHAIN_API_KEY=your_api_key # for production
# LANGGRAPH_API_URL=your_api_url # for production
NEXT_PUBLIC_LANGGRAPH_API_URL=your_api_url # for development (no api key required)
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id

Installation in existing React project

Install dependencies

npm install @assistant-ui/react @assistant-ui/react-langgraph @langchain/langgraph-sdk

Setup a proxy backend endpoint (optional, for production)

This example forwards every request to the LangGraph server directly from the browser. For production use-cases, you should limit the API calls to the subset of endpoints that you need and perform authorization checks.

@/api/api/[...path]/route.ts
import { ,  } from "next/server";
 
export const  = "edge";
 
function () {
  return {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "*",
  };
}
 
async function (: , : string) {
  try {
    const  = ...(/^\/?api\//, "");
    const  = new (.);
    const  = new (.);
    .("_path");
    .("nxtP_path");
    const  = .()
      ? `?${.()}`
      : "";
 
    const : RequestInit = {
      ,
      : {
        "x-api-key": .["LANGCHAIN_API_KEY"] || "",
      },
    };
 
    if (["POST", "PUT", "PATCH"].()) {
      . = await .();
    }
 
    const  = await (
      `${.["LANGGRAPH_API_URL"]}/${}${}`,
      ,
    );
 
    return new (., {
      : .,
      : .,
      : {
        ....,
        ...(),
      },
    });
  } catch (: any) {
    return .({ : .message }, { : .status ?? 500 });
  }
}
 
export const  = (: ) => (, "GET");
export const  = (: ) => (, "POST");
export const  = (: ) => (, "PUT");
export const  = (: ) => (, "PATCH");
export const  = (: ) => (, "DELETE");
 
// Add a new OPTIONS handler
export const  = () => {
  return new (null, {
    : 204,
    : {
      ...(),
    },
  });
};

Setup helper functions

@/lib/chatApi.ts
import {  } from "@langchain/langgraph-sdk";
import {  } from "@assistant-ui/react-langgraph";
 
const  = () => {
  const  = .["NEXT_PUBLIC_LANGGRAPH_API_URL"] || "/api";
  return new ({
    ,
  });
};
 
export const  = async () => {
  const  = ();
  return ..();
};
 
export const  = async (
  : string,
): <<{ : [] }>> => {
  const  = ();
  return ..();
};
 
export const  = async (: {
  : string;
  : ;
}) => {
  const  = ();
  return ..(
    .,
    .["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
    {
      : {
        : .,
      },
      : "messages",
    },
  );
};

Define a MyAssistant component

@/components/MyAssistant.tsx
"use client";
 
import {  } from "react";
import {  } from "@assistant-ui/react";
import {  } from "@assistant-ui/react-langgraph";
import {  } from "@assistant-ui/react-markdown";
 
import { , ,  } from "@/lib/chatApi";
 
const  = ();
 
export function () {
  const  = <string | undefined>();
  const  = ({
    : .,
    : async () => {
      if (!.) {
        const {  } = await ();
        . = ;
      }
      const  = .;
      return ({
        ,
        ,
      });
    },
    : async () => {
      const {  } = await ();
      . = ;
    },
    : async () => {
      const  = await ();
      . = ;
      return { : .values.messages };
    },
  });
 
  return (
    <
      ={}
      assistantMessage={{ components: { Text:  } }}
    />
  );
}

Use the MyAssistant component

@/app/page.tsx
import {  } from "@/components/MyAssistant";
 
export default function () {
  return (
    < ="h-dvh">
      < />
    </>
  );
}

Setup environment variables

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

# LANGCHAIN_API_KEY=your_api_key # for production
# LANGGRAPH_API_URL=your_api_url # for production
NEXT_PUBLIC_LANGGRAPH_API_URL=your_api_url # for development (no api key required)
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id

Setup UI components

Follow the UI Components guide to setup the UI components.

On this page

Edit on Github