langgraphjs-gen-ui-examples  by langchain-ai

Generative UI agents with LangGraph.js

created 4 months ago
289 stars

Top 91.9% on sourcepulse

GitHubView on GitHub
Project Summary

This repository showcases generative UI agents built with LangGraph.js, targeting developers and researchers looking to integrate dynamic, interactive user interfaces into their LLM-powered applications. It provides example implementations for common use cases like travel planning, stock trading, and email assistance, demonstrating how LangGraph can orchestrate complex agentic workflows with rich UI components.

How It Works

The examples leverage LangGraph's state-machine-like approach to define multi-step agentic processes. Agents are composed of nodes representing specific actions or LLM calls, connected by edges that dictate the flow. The core innovation lies in integrating "generative UI" components, which are dynamically rendered within a chat interface based on tool calls or specific agent states, allowing for interactive data display and user input capture within the conversation.

Quick Start & Requirements

  • Install dependencies with pnpm install.
  • Set environment variables in .env for OPENAI_API_KEY and GOOGLE_API_KEY. Optional keys include ANTHROPIC_API_KEY and FINANCIAL_DATASETS_API_KEY.
  • Start the server with pnpm agent.
  • Official Agent Chat UI repo: https://github.com/langchain-ai/langgraphjs-gen-ui-examples

Highlighted Details

  • Demonstrates a "Supervisor" agent that routes requests to specialized sub-agents (Stockbroker, Trip Planner, Open Code, Order Pizza, Email Agent).
  • Features interactive UI components for stock price display, accommodation selection, and pizza ordering.
  • Includes a "Human in the Loop" (HITL) mechanism for the email agent, allowing user interaction to confirm or modify agent actions.
  • Showcases streaming generative UI components for a "Writer Agent" that displays story titles and content in a side panel.

Maintenance & Community

This repository is part of the LangChain.ai ecosystem. Further community engagement and roadmap details can typically be found through LangChain's official channels.

Licensing & Compatibility

The repository appears to be under a permissive license, likely MIT, consistent with the LangChain.ai project. This generally allows for commercial use and integration into closed-source applications.

Limitations & Caveats

The "Open Code" agent is explicitly stated as a dummy implementation for UI demonstration purposes and does not generate actual code. Some agents, like the stockbroker, require specific API keys for financial data access.

Health Check
Last commit

3 months ago

Responsiveness

Inactive

Pull Requests (30d)
1
Issues (30d)
0
Star History
85 stars in the last 90 days

Explore Similar Projects

Feedback? Help us improve.