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.

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.

    Create a new assistant

  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)

    Assistant Demo