Fullstack Chat Client

Agent Chat UI

Agent Chat UI is a Next.js application which enables chatting with any LangGraph server with a `messages` key through a chat interface.

[!NOTE] 🎥 Watch the video setup guide [here](https://youtu.be/lInrwVnZ83o).

Setup

1. Clone both repos

git clone https://github.com/starmorph/fullstack-chat-server/tree/main

git clone https://github.com/starmorph/fullstack-chat-client

Terminal Tab 1: Server

1. cp .env.example .env
2. fill out env
3. yarn
4. npx @langchain/langgraph-cli dev --no-browser

Terminal Tab 2: Client

1. cp .env.example .env
2. fill out env
3. pnpm i && pnpm dev

Terminal Tab 3: Stripe Webhook (for purchases + credits)

stripe listen --events customer.subscription.created,customer.subscription.updated,customer.subscription.deleted --forward-to localhost:3000/api/webhooks/stripe

Use the App

1. Open localhost:3000
2. Sign up -> confirm email
3. login
4. pricing page --> purchase credits
   a. should see stripe events in Terminal Tab 3
5. should see success page, new credits added
6. back to home, chat with app, credits get deducted

Usage

Once the app is running (or if using the deployed site), you'll be prompted to enter:

• Deployment URL: The URL of the LangGraph server you want to chat with. This can be a production or development URL.
• Assistant/Graph ID: The name of the graph, or ID of the assistant to use when fetching, and submitting runs via the chat interface.
• LangSmith API Key: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers.

After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.

Environment Variables

You can bypass the initial setup form by setting the following environment variables:

NEXT_PUBLIC_API_URL=http://lo