Adding a Chat Client to a LangGraph Assistant

What you need first

Previously, I deployed an enhanced retrieval template to langgraph cloud. Now, I want to point a chat client to it using assistant-ui.

The following are required before deploying the chat client:

1. An existing node.js installation.
2. An active deployment on the LangGraph Cloud API Server. Assistant UI can be also be installed in an existing React Project, as covered in the assistant-ui langgraph cloud docs.

Creating the chat client

To create a new chat client, I'll follow these steps:

1. Ensure npx is installed.

   npm install -g npx
   

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

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

3. Create a new assistant for your graph on LangSmith using LangGraph Studio or the API Docs.

   

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

   LANGCHAIN_API_KEY=your_api_key
   LANGGRAPH_API_URL=your_api_url
   NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_assistant_id
   

5. Ensure the LangChain API Key is also present in your LangSmith API Keys to allow access to your deployments.

6. Navigate to the assistant-ui project root folder and start the node.js server.

   npm run dev
   

7. You can now use the Chat Client using the server's port! (https://localhost:3000 in my case)