https://github.com/langchain-ai/langgraph-fullstack-python
https://github.com/langchain-ai/langgraph-fullstack-python
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/langchain-ai/langgraph-fullstack-python
- Owner: langchain-ai
- License: mit
- Created: 2025-02-20T00:18:40.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-02T04:48:55.000Z (6 months ago)
- Last Synced: 2025-04-02T13:01:51.304Z (6 months ago)
- Language: Python
- Size: 43.9 KB
- Stars: 80
- Watchers: 5
- Forks: 23
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-LangGraph - `langgraph-fullstack-python`
README
# Full-Stack Python Chatbot with LangGraph
[](https://github.com/langchain-ai/langgraph-fullstack-python/actions/workflows/unit-tests.yml)
[](https://github.com/langchain-ai/langgraph-fullstack-python/actions/workflows/integration-tests.yml)
[](https://langgraph-studio.vercel.app/templates/open?githubUrl=https://github.com/langchain-ai/langgraph-fullstack-python)
This template demonstrates how to build a full-stack chatbot application using LangGraph's HTTP configuration capabilities. It showcases how to combine a React-style agent with a modern web UI, all hosted within a single LangGraph deployment.
## Key Features
- 🌐 **Single Deployment** - Host both your agent and UI in one LangGraph deployment
- 🎨 **Modern UI** - Beautiful chat interface built with FastHTML
- 🔄 **React-Style Agent** - Intelligent chatbot using LangGraph's React agent pattern
- 🛠️ **Easy Configuration** - Simple HTTP routing setup through `langgraph.json`
- ⚡ **Fast Development** - Rapid prototyping with FastHTML's server-side components
## How It Works
### HTTP Configuration
The magic happens in `langgraph.json`, where we configure both the agent and HTTP routes:
```json
{
"dependencies": ["."],
"graphs": {
"agent": "./src/react_agent/graph.py:graph"
},
"http": {
"app": "./src/react_agent/app.py:app"
}
}
```
This configuration:
1. Defines the agent graph in `graph.py`
2. Sets up HTTP routes through FastHTML in `app.py`
### FastHTML UI
The UI is built using FastHTML, a lightweight server-side component framework. Key features:
- Modern chat interface using DaisyUI components
- Real-time message updates
- Clean, responsive design
### LangGraph Agent
The chatbot uses LangGraph's React agent pattern, which:
- Processes messages through a Claude 3 model
- Maintains conversation state
- Can be easily extended with custom tools
## Getting Started
Install the dependencies:
```bash
pip install uv
uv sync --dev
```
Then run the local server:
```bash
uv run langgraph dev --no-browser
```
Visit `http://localhost:2024` to interact with your chatbot!
## Customization
### Modify the Agent
Edit `src/react_agent/graph.py` to:
- Change the system prompt
- Add custom tools
- Modify the agent's behavior
### Customize the UI
Edit `src/react_agent/app.py` to:
- Update the chat interface
- Add new components
- Modify styling
## Next Steps
- Add persistent storage for chat history
- Implement custom tools for your agent
- Enhance the UI with additional features
- Deploy to production using LangGraph Platform
For more examples and detailed documentation:
- [LangGraph Documentation](https://langchain-ai.github.io/langgraph)
- [FastHTML Documentation](https://fasthtml.readme.io)
- [DaisyUI Components](https://daisyui.com/components)