{"id":29995205,"url":"https://github.com/webup/langgraph-genui","last_synced_at":"2025-08-05T01:33:37.253Z","repository":{"id":306792040,"uuid":"1024969961","full_name":"webup/langgraph-genui","owner":"webup","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-27T15:58:11.000Z","size":2074,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-27T17:51:24.392Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-23T14:17:56.000Z","updated_at":"2025-07-27T15:58:14.000Z","dependencies_parsed_at":"2025-07-27T17:51:29.304Z","dependency_job_id":"c9b239a3-4dd7-4ea5-bcd0-a54970bde7b3","html_url":"https://github.com/webup/langgraph-genui","commit_stats":null,"previous_names":["webup/langgraph-genui"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/webup/langgraph-genui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webup%2Flanggraph-genui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webup%2Flanggraph-genui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webup%2Flanggraph-genui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webup%2Flanggraph-genui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webup","download_url":"https://codeload.github.com/webup/langgraph-genui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webup%2Flanggraph-genui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268820421,"owners_count":24312378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-05T01:33:33.939Z","updated_at":"2025-08-05T01:33:37.244Z","avatar_url":"https://github.com/webup.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LangGraph Weather Agent with Generative UI\n\n[![CI](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/unit-tests.yml)\n[![Integration Tests](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/integration-tests.yml/badge.svg)](https://github.com/langchain-ai/new-langgraph-project/actions/workflows/integration-tests.yml)\n\nA 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.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./static/studio_ui.png\" alt=\"Graph view in LangGraph studio UI\" width=\"75%\" /\u003e\n\u003c/div\u003e\n\n## Features\n\n🌤️ **Smart City Detection** - Automatically identifies cities from natural language queries  \n🎨 **Generative UI** - Backend dynamically commands frontend to render specific components  \n✨ **Animated Weather Cards** - Modern glass morphism design with city-specific styling  \n🔄 **Hot Reload Development** - Real-time updates during development with LangGraph Studio  \n🧪 **Comprehensive Testing** - Unit and integration tests with CI/CD workflows\n\n## How It Works\n\n1. **User Input**: \"What's the weather in London?\"\n2. **City Detection**: Agent identifies \"London\" from the query\n3. **Dual Response**: \n   - Conversational AI message: \"Here's the weather for London\"\n   - UI Command: Renders animated weather card for London\n4. **Rich Display**: Interactive weather card with temperature, conditions, and animations\n\n### Supported Cities\n- **London** 🌧️ - Gray stormy gradient (59°F)\n- **New York** ☀️ - Sunny orange gradient (68°F) \n- **Tokyo** 🌤️ - Pink sunset gradient (75°F)\n- **San Francisco** ⛅ - Blue ocean gradient (72°F, default)\n\n## Getting Started\n\n\u003c!--\nSetup instruction auto-generated by `langgraph template lock`. DO NOT EDIT MANUALLY.\n--\u003e\n\n\u003c!--\nEnd setup instructions\n--\u003e\n\n1. Install dependencies, along with the [LangGraph CLI](https://langchain-ai.github.io/langgraph/concepts/langgraph_cli/), which will be used to run the server.\n\n```bash\ncd path/to/your/app\npip install -e . \"langgraph-cli[inmem]\"\n```\n\n2. (Optional) Customize the code and project as needed. Create a `.env` file if you need to use secrets.\n\n```bash\ncp .env.example .env\n```\n\nIf you want to enable LangSmith tracing, add your LangSmith API key to the `.env` file.\n\n```text\n# .env\nLANGSMITH_API_KEY=lsv2...\n```\n\n3. Start the LangGraph Server.\n\n```shell\nlanggraph dev\n```\n\nFor more information on getting started with LangGraph Server, [see here](https://langchain-ai.github.io/langgraph/tutorials/langgraph-platform/local-server/).\n\n## Architecture\n\n### Core Components\n\n- **`langgraph.json`** - Configuration hub connecting backend graph to frontend UI\n- **`src/agent/graph.py`** - Weather agent with city detection and UI emission logic\n- **`src/agent/ui.tsx`** - Animated React weather card component\n- **`tests/`** - Comprehensive unit and integration test suites\n\n### Generative UI Flow\n\n```\nUser Query → City Detection → Dual Response\n    ↓              ↓              ↓\n\"weather in    \"London\"     AI Message +\n london\"                    UI Command\n                                ↓\n                         WeatherComponent\n                         (London styling)\n```\n\n### Key Functions\n\n- `weather()` in `graph.py` - Processes queries and emits UI components\n- `push_ui_message(\"weather\", {city}, message)` - Commands frontend rendering\n- `WeatherComponent` - Renders animated cards with city-specific data\n\n## How to Customize\n\n### Adding New Cities\n\n1. **Update city detection** in `src/agent/graph.py`:\n```python\nif \"paris\" in message_content.lower():\n    city = \"Paris\"\n```\n\n2. **Add weather data** in `src/agent/ui.tsx`:\n```typescript\nconst mockWeatherData = {\n  Paris: {\n    temperature: \"18°C\",\n    condition: \"🌧️ Rainy\",\n    // ...\n  }\n}\n```\n\n3. **Add city-specific styling** with gradients and colors\n\n### Extending the Graph\n\n- **Add new nodes**: Extend the graph in `src/agent/graph.py` for more complex workflows\n- **Multiple UI components**: Create additional React components and register them in `langgraph.json`\n- **Real weather API**: Replace mock data with actual weather service integration\n\n## Development\n\nWhile 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.\n\nFollow-up requests extend the same thread. You can create an entirely new thread, clearing previous history, using the `+` button in the top right.\n\nFor 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.\n\nLangGraph 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.\n\n\u003c!--\nConfiguration auto-generated by `langgraph template lock`. DO NOT EDIT MANUALLY.\n{\n  \"config_schemas\": {\n    \"agent\": {\n      \"type\": \"object\",\n      \"properties\": {}\n    }\n  }\n}\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebup%2Flanggraph-genui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebup%2Flanggraph-genui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebup%2Flanggraph-genui/lists"}