repository·main·Indexed 23 days ago
https://github.com/langchain-ai/deep-agents-uiA user interface for interacting with Deep Agents, an open-source agent harness implementing planning, computer access, and sub-agent delegation. It connects to LangGraph deployments to provide a chat interface, state visualization, and tools for managing agent tasks and files. Features include a Debug Mode for step-by-step execution, a ChatInterface for conversation management, and components for tool call visualization and file system interaction.
Deep Agents UI provides two primary modes of interaction:
Additionally, you can monitor the agent's progress by viewing files in the LangGraph state. You can click on any file generated during the run to view its contents directly in the UI.
Once the UI is running at http://localhost:3000, you must provide the following credentials to interact with your agent:
http://127.0.0.1:2024).langgraph.json (e.g., research).lsv2_pt_....Deep Agents UI connects to LangGraph deployments. To deploy an agent (e.g., the deep_research example), navigate to the example directory and run langgraph dev.
To identify the necessary connection details:
langgraph.json file as the key in the graphs object.langgraph dev (typically http://127.0.0.1:2024).Example langgraph.json structure:
"graphs": {
"research": "./agent.py:agent"
}In this case, the Assistant ID is research.
cd deepagents-quickstarts/deep_research
langgraph devTo run the Deep Agents UI locally, clone the repository, install dependencies using yarn, and start the development server.
git clone https://github.com/langchain-ai/deep-agents-ui.git
cd deep-agents-ui
yarn install
yarn devInstead of using the UI settings dialog, you can provide your LangSmith API key via an environment variable. Note that settings configured directly in the UI will take precedence over environment variables.
NEXT_PUBLIC_LANGSMITH_API_KEY="lsv2_xxxx"When running the UI in a standalone mode, you can manage configuration via the StandaloneConfig interface. This configuration is persisted in the browser's localStorage under the key deep-agent-config.
Required fields:
deploymentUrl: The URL of your deployed agent service.assistantId: The unique identifier for the specific assistant you wish to interact with.Optional fields:
langsmithApiKey: An optional key for LangSmith integration.interface StandaloneConfig {
deploymentUrl: string;
assistantId: string;
langsmithApiKey?: string;
}If you encounter the error useChatContext must be used within a ChatProvider, it means you are attempting to call the useChatContext hook in a component that sits outside the ChatProvider component tree.
To fix this, ensure that the component calling useChatContext is a child (or a descendant of a child) of the ChatProvider in your React component hierarchy.
ClientProvider to provide access to the LangGraph SDK client throughout your component tree. You must provide the deploymentUrl of your LangGraph deployment and the required apiKey for authentication. The provider automatically configures the client with the necessary Content-Type and X-Api-Key headers.The useThreads hook provides an infinite-scrolling interface for retrieving conversation threads from a LangGraph deployment. It uses useSWRInfinite under the hood to handle pagination and caching.
To use the hook, pass an optional configuration object:
status: Filter threads by their current Thread["status"] (e.g., 'active', 'completed').limit: The number of threads to fetch per page. Defaults to 20.The hook returns an array of ThreadItem objects, which include a generated title and description derived from the first human and AI messages in the thread's values. If message parsing fails, it falls back to using the thread ID as the title.
Authentication Requirements:
deploymentUrl and assistantId from your project configuration.config.langsmithApiKey or the NEXT_PUBLIC_LANGSMITH_API_KEY environment variable. This key is passed via the X-Api-Key header.The ChatInterface component is the primary UI entry point for interacting with a LangGraph agent. It provides a complete chat experience including message history, tool call visualization, task tracking, and file state management.
To use it, you must provide an assistant object (of type Assistant from @langchain/langgraph-sdk) as a prop. The component relies on a ChatProvider context to manage the underlying stream, messages, and agent state.
Use the useChatContext hook to access the chat state (messages, loading states, etc.) from any component nested within a ChatProvider.
Note: This hook will throw an error if it is called from a component that is not a descendant of a ChatProvider.
Wrap your application (or a specific subtree) with ChatProvider to provide chat state, including assistant information and thread data, to all descendant components. This allows any component within the provider to access the chat state via the useChatContext hook.
ChatProvider accepts the following props:
children: The React nodes to be wrapped.activeAssistant: An Assistant object from @langchain/langgraph-sdk or null.onHistoryRevalidate (optional): A callback function triggered when chat history needs revalidation.thread (optional): A UseStreamThread<StateType> object used to manage the current conversation thread.