mirror of
https://github.com/langchain-ai/langgraph-fullstack-python.git
synced 2026-07-24 12:45:29 -04:00
William Fu-Hinthorn
233 lines
8.1 KiB
Markdown
233 lines
8.1 KiB
Markdown
# 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)
|
|
|
|
|
|
<!--
|
|
Configuration auto-generated by `langgraph template lock`. DO NOT EDIT MANUALLY.
|
|
{
|
|
"config_schemas": {
|
|
"agent": {
|
|
"type": "object",
|
|
"properties": {
|
|
"model": {
|
|
"type": "string",
|
|
"default": "anthropic/claude-3-5-sonnet-20240620",
|
|
"description": "The name of the language model to use for the agent's main interactions. Should be in the form: provider/model-name.",
|
|
"environment": [
|
|
{
|
|
"value": "anthropic/claude-1.2",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-2.0",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-2.1",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-3-5-sonnet-20240620",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-3-haiku-20240307",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-3-opus-20240229",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-3-sonnet-20240229",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "anthropic/claude-instant-1.2",
|
|
"variables": "ANTHROPIC_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-0125",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-0301",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-0613",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-1106",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-16k",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-3.5-turbo-16k-0613",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-0125-preview",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-0314",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-0613",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-1106-preview",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-32k",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-32k-0314",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-32k-0613",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-turbo",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-turbo-preview",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4-vision-preview",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4o",
|
|
"variables": "OPENAI_API_KEY"
|
|
},
|
|
{
|
|
"value": "openai/gpt-4o-mini",
|
|
"variables": "OPENAI_API_KEY"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"environment": [
|
|
"TAVILY_API_KEY"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
--> |