Full-Stack Python Chatbot with LangGraph

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:

{
  "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:

pip install uv
uv sync --dev 

Then run the local server:

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
• FastHTML Documentation
• DaisyUI Components