create-agent-chat-app/templates/vite

Chat UI

This Chat UI is a Vite + React application which enables chatting with any LangGraph server with a messages key through a chat interface.

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:

VITE_API_URL=http://localhost:2024
VITE_ASSISTANT_ID=agent

Tip

If you want to connect to a production LangGraph server, read the Going to Production section.

To use these variables:

1. Copy the .env.example file to a new file named .env
2. Fill in the values in the .env file
3. Restart the application

When these environment variables are set, the application will use them instead of showing the setup form.

Hiding Messages in the Chat

You can control the visibility of messages within the Chat UI in two main ways:

1. Prevent Live Streaming:

To stop messages from being displayed as they stream from an LLM call, add the langsmith:nostream tag to the chat model's configuration. The UI normally uses on_chat_model_stream events to render streaming messages; this tag prevents those events from being emitted for the tagged model.

Python Example:

from langchain_anthropic import ChatAnthropic

# Add tags via the .with_config method
model = ChatAnthropic().with_config(
    config={"tags": ["langsmith:nostream"]}
)

TypeScript Example:

import { ChatAnthropic } from "@langchain/anthropic";

const model = new ChatAnthropic()
  // Add tags via the .withConfig method
  .withConfig({ tags: ["langsmith:nostream"] });

Note: Even if streaming is hidden this way, the message will still appear after the LLM call completes if it's saved to the graph's state without further modification.

2. Hide Messages Permanently:

To ensure a message is never displayed in the chat UI (neither during streaming nor after being saved to state), prefix its id field with do-not-render- before adding it to the graph's state, along with adding the langsmith:do-not-render tag to the chat model's configuration. The UI explicitly filters out any message whose id starts with this prefix.

Python Example:

result = model.invoke([messages])
# Prefix the ID before saving to state
result.id = f"do-not-render-{result.id}"
return {"messages": [result]}

TypeScript Example:

const result = await model.invoke([messages]);
// Prefix the ID before saving to state
result.id = `do-not-render-${result.id}`;
return { messages: [result] };

This approach guarantees the message remains completely hidden from the user interface.

Going to Production

Once you're ready to go to production, you'll need to update how you connect, and authenticate requests to your deployment. By default, the chat UI is setup for local development, and connects to your LangGraph server directly from the client. This is not possible if you want to go to production, because it requires every user to have their own LangSmith API key, and set the LangGraph configuration themselves.

Setup

To productionize the chat UI, you'll need to setup custom authentication in your LangGraph deployment, so that you can call your LangGraph server from the client without the need for API keys.

Custom authentication in your LangGraph deployment is a robust way of authenticating requests to your LangGraph server. Using custom authentication, you can allow requests to be made from the client, without the need for a LangSmith API key. Additionally, you can specify custom access controls on requests.

To set this up in your LangGraph deployment, please read the LangGraph custom authentication docs for Python, and TypeScript here.

Once you've set it up on your deployment, you should make the following changes to the chat UI:

1. Configure any additional API requests to fetch the authentication token from your LangGraph deployment which will be used to authenticate requests from the client.
2. Set the VITE_API_URL environment variable to your production LangGraph deployment URL.
3. Set the VITE_ASSISTANT_ID environment variable to the ID of the assistant you want to use when fetching, and submitting runs via the chat interface.
4. Modify the useTypedStream (extension of useStream) hook to pass your authentication token through headers to the LangGraph server:

const streamValue = useTypedStream({
  apiUrl: import.meta.env.VITE_API_URL,
  assistantId: import.meta.env.VITE_ASSISTANT_ID,
  // ... other fields
  defaultHeaders: {
    Authentication: `Bearer ${addYourTokenHere}`, // this is where you would pass your authentication token
  },
});