|
--- |
|
title: README |
|
emoji: 🦜💹 |
|
colorFrom: blue |
|
colorTo: yellow |
|
sdk: static |
|
pinned: false |
|
--- |
|
|
|
|
|
# 🙋🏻♂️Welcome to the 🦜LangGraph User Group! 🚀 |
|
|
|
Welcome to the LangGraph User Group! We're a community of developers and researchers exploring and building with LangGraph, LangChain's powerful framework for creating stateful, multi-actor applications with LLMs. This organization is hosted on Hugging Face to facilitate collaboration, sharing, and learning within the LangGraph community. |
|
|
|
This page showcases the **LangGraph Agent Chat UI**, a key project developed by the user group. It's a ready-to-use, intuitive interface that makes it easy to interact with your LangGraph agents. Whether you're just getting started with LangGraph or building complex multi-agent systems, this UI will streamline your development and experimentation. |
|
|
|
**Why Join the LangGraph User Group?** |
|
|
|
* **Collaborate:** Connect with other LangGraph users, share your projects, and get help from the community. |
|
* **Learn:** Access tutorials, examples, and best practices for building with LangGraph. |
|
* **Contribute:** Help shape the future of LangGraph by contributing to open-source projects like the Agent Chat UI. |
|
* **Stay Up-to-Date:** Get the latest news and updates on LangGraph development. |
|
* **Showcase:** You can share your Agent Chat UI projects, and graphs with other user group members. |
|
|
|
## LangGraph Code Examples |
|
|
|
To use the Agent Chat UI, you'll need a running LangGraph agent served via LangServe. Here are two Python examples (basic and with human-in-the-loop): |
|
|
|
**Basic LangGraph Agent (Summary):** |
|
|
|
* Uses `langchain_openai`, `langgraph`, `fastapi`, and `langserve`. |
|
* Defines a simple `get_weather` tool. |
|
* Creates a basic agent chain using `ChatPromptTemplate`, `MessagesPlaceholder`, `ChatOpenAI`, and `create_agent_executor`. |
|
* Serves the graph using `FastAPI` and `add_routes` from `langserve`. The `path` argument to `add_routes` is the "Graph ID". |
|
|
|
**LangGraph Agent with Human-in-the-Loop (Summary):** |
|
|
|
* Builds on the basic example. |
|
* Adds a `write_email` tool. |
|
* Includes a `handle_interrupt` function that uses `langgraph.prebuilt.interrupt` to pause execution and request human input when the `write_email` tool is called. The `interrupt` function uses a specific schema that the UI understands. |
|
* The schema includes `"type": "interrupt"`, and an `args` dictionary with `"type"` (response, accept, ignore) and data for the human to review/edit. |
|
|
|
**Key LangGraph Concepts (Illustrated by the UI):** |
|
|
|
* **State Management:** LangGraph uses a state object (often a dictionary) to track the conversation and agent's internal state. The UI displays this state. |
|
* **Checkpoints:** LangGraph automatically saves checkpoints, allowing you to resume conversations or explore different paths. The UI leverages this for time travel. |
|
* **`add_routes` and `path`:** The `path` you use with `langserve.add_routes` is *essential*. It's the "Graph ID" you enter in the UI to connect. |
|
* **Tool Calling:** The UI renders tool calls and results if your agent uses tools (via `bind_tools`). |
|
* **Human Interrupts:** The `interrupt` function, with its specific schema, is how you trigger human-in-the-loop interactions. |
|
|
|
## Join the Community! |
|
|
|
We encourage you to join the LangGraph User Group to connect with fellow developers, ask questions, share your projects, and contribute to the LangGraph ecosystem. Click the "Join Group" button to become a member! We look forward to seeing what you build with LangGraph! |
|
|
|
## Contributing |
|
|
|
Contributions are welcome! Please see the [GitHub repository](https://github.com/langchain-ai/agent-chat-ui) for issues and pull requests. |
|
|
|
## License |
|
|
|
This organisation is an opensource community project, always check the licences in the repositories + report any ambiguities. |
|
|
