Langgraphjs Gen Ui Examples

LangGraph Generative UI Examples

This repository contains a series of agents intended to be used with the [Agent Chat UI](https://agentchat.vercel.app) ([repo](https://github.com/langchain-ai/agent-chat-ui)).


Setup

[!TIP] 🎥 Want to watch a video walkthrough instead? Click [here](https://youtu.be/sCqN01R8nIQ).

First, clone this repository:

git clone https://github.com/langchain-ai/langgraphjs-gen-ui-examples.git

cd langgraphjs-gen-ui-examples

Then, install dependencies:

# pnpm is the default package manager in this project
pnpm install

Next, copy the `.env.example` file, and set the necessary environment variables:

cp .env.example .env

Only [OpenAI](https://platform.openai.com/), and [Google GenAI](https://aistudio.google.com/), API keys are required ([Financial Datasets](https://www.financialdatasets.ai/) is only required if you want to call the stockbroker graph, and [Anthropic](https://console.anthropic.com) is only used in the pizza ordering agent).

# Required
OPENAI_API_KEY=""
GOOGLE_API_KEY=""

# Optional, but recommended for best in class tracing and observability.
# LANGSMITH_PROJECT="default"
# LANGSMITH_API_KEY=""
# LANGSMITH_TRACING_V2=true

# Optional
# ANTHROPIC_API_KEY=""
# FINANCIAL_DATASETS_API_KEY=""

Start the LangGraph server:

pnpm agent

You should see output similar to:

          Welcome to

╦  ┌─┐┌┐┌┌─┐╔═╗┬─┐┌─┐┌─┐┬ ┬
║  ├─┤││││ ┬║ ╦├┬┘├─┤├─┘├─┤
╩═╝┴ ┴┘└┘└─┘╚═╝┴└─┴ ┴┴  ┴ ┴.js

- 🚀 API: http://localhost:2024
- 🎨 Studio UI: https://smith.langchain.com/studio?baseUrl=http://localhost:2024

Example usage

The following are some prompts, and corresponding graph IDs you can use to test the agents:

• Graph ID: agent:
  • What can you do? - Will list all of the tools/actions it has available
  • Show me places to stay in - Will trigger a generative UI travel agent which renders a UI t