https://github.com/webup/langgraph-genui
https://github.com/webup/langgraph-genui
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webup/langgraph-genui
- Owner: webup
- License: mit
- Created: 2025-07-23T14:17:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-27T15:58:11.000Z (11 months ago)
- Last Synced: 2025-07-27T17:51:24.392Z (11 months ago)
- Language: TypeScript
- Size: 1.98 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LangGraph Weather Agent with Generative UI
[](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/unit-tests.yml)
[](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/integration-tests.yml)
A sophisticated weather agent built with [LangGraph](https://github.com/langchain-ai/langgraph) that demonstrates **Generative UI** capabilities. The agent processes natural language weather queries and responds with both conversational text and rich, animated UI components.
## Features
🌤️ **Smart City Detection** - Automatically identifies cities from natural language queries
🎨 **Generative UI** - Backend dynamically commands frontend to render specific components
✨ **Animated Weather Cards** - Modern glass morphism design with city-specific styling
🔄 **Hot Reload Development** - Real-time updates during development with LangGraph Studio
🧪 **Comprehensive Testing** - Unit and integration tests with CI/CD workflows
## How It Works
1. **User Input**: "What's the weather in London?"
2. **City Detection**: Agent identifies "London" from the query
3. **Dual Response**:
- Conversational AI message: "Here's the weather for London"
- UI Command: Renders animated weather card for London
4. **Rich Display**: Interactive weather card with temperature, conditions, and animations
### Supported Cities
- **London** 🌧️ - Gray stormy gradient (59°F)
- **New York** ☀️ - Sunny orange gradient (68°F)
- **Tokyo** 🌤️ - Pink sunset gradient (75°F)
- **San Francisco** ⛅ - Blue ocean gradient (72°F, default)
## Getting Started
1. Install dependencies, along with the [LangGraph CLI](https://langchain-ai.github.io/langgraph/concepts/langgraph_cli/), which will be used to run the server.
```bash
cd path/to/your/app
pip install -e . "langgraph-cli[inmem]"
```
2. (Optional) Customize the code and project as needed. Create a `.env` file if you need to use secrets.
```bash
cp .env.example .env
```
If you want to enable LangSmith tracing, add your LangSmith API key to the `.env` file.
```text
# .env
LANGSMITH_API_KEY=lsv2...
```
3. Start the LangGraph Server.
```shell
langgraph dev
```
For more information on getting started with LangGraph Server, [see here](https://langchain-ai.github.io/langgraph/tutorials/langgraph-platform/local-server/).
## Architecture
### Core Components
- **`langgraph.json`** - Configuration hub connecting backend graph to frontend UI
- **`src/agent/graph.py`** - Weather agent with city detection and UI emission logic
- **`src/agent/ui.tsx`** - Animated React weather card component
- **`tests/`** - Comprehensive unit and integration test suites
### Generative UI Flow
```
User Query → City Detection → Dual Response
↓ ↓ ↓
"weather in "London" AI Message +
london" UI Command
↓
WeatherComponent
(London styling)
```
### Key Functions
- `weather()` in `graph.py` - Processes queries and emits UI components
- `push_ui_message("weather", {city}, message)` - Commands frontend rendering
- `WeatherComponent` - Renders animated cards with city-specific data
## How to Customize
### Adding New Cities
1. **Update city detection** in `src/agent/graph.py`:
```python
if "paris" in message_content.lower():
city = "Paris"
```
2. **Add weather data** in `src/agent/ui.tsx`:
```typescript
const mockWeatherData = {
Paris: {
temperature: "18°C",
condition: "🌧️ Rainy",
// ...
}
}
```
3. **Add city-specific styling** with gradients and colors
### Extending the Graph
- **Add new nodes**: Extend the graph in `src/agent/graph.py` for more complex workflows
- **Multiple UI components**: Create additional React components and register them in `langgraph.json`
- **Real weather API**: Replace mock data with actual weather service integration
## Development
While iterating on your graph in LangGraph Studio, you can edit past state and rerun your app from previous states to debug specific nodes. Local changes will be automatically applied via hot reload.
Follow-up requests extend the same thread. You can create an entirely new thread, clearing previous history, using the `+` button in the top right.
For more advanced features and examples, refer to the [LangGraph documentation](https://langchain-ai.github.io/langgraph/). These resources can help you adapt this template for your specific use case and build more sophisticated conversational agents.
LangGraph Studio also integrates with [LangSmith](https://smith.langchain.com/) for more in-depth tracing and collaboration with teammates, allowing you to analyze and optimize your chatbot's performance.