tools-only LangGraph & Web Components quickstart
This quickstart shows how to use NextGenUI agent with LangGraph and Web Components.
Example code provides you all steps to have fully working a Movies LangGraph assistant extended by NextGen UI Agent.
Full working example is stored in libs/next_gen_ui_langgraph/readme_example.py.
Prerequisites
Before you start this quickstart, ensure you have have installed Python 3.12 or higher:
python --version
# Python 3.13.0
For LLM configure Open API Key stored in env. variable OPENAI_API_KEY or
install Ollama provider locally.
echo $OPENAI_API_KEY
# sk-proj-....
# or local Ollama
ollama -v
# ollama version is 0.9.6
1. Install dependencies
Install NextGen UI agent packages next-gen-ui-agent, next-gen-ui-langgraph and NextGenUI web component rendering next_gen_ui_rhds_renderer:
pip install -U next-gen-ui-agent next-gen-ui-langgraph next_gen_ui_rhds_renderer
!!! note
It's common to create a virtual environment first in your project.
sh python3 -m venv .venv && source .venv/bin/activate
2. Configure LLM chat model
Configure LangGraph chat model.
import os
from langchain_openai import ChatOpenAI
if not os.environ.get("OPENAI_API_KEY"):
# getpass.getpass("Enter your OpenAI API key: ")
os.environ["OPENAI_API_KEY"] = "ollama"
# OpenAPI
llm = ChatOpenAI(model="gpt-4o", temperature=0)
# or local ollama
llm = ChatOpenAI(model="llama3.2", base_url="http://localhost:11434/v1")
3. Create your agent
The easiest way how to create an agent in LangGraph is to use prebuilt create_react_agent function.
Following example is a movie assistant with hard-coded data about Toy Story movie.
import json
from langgraph.prebuilt import create_react_agent
# Mocked backend data
movie_toy_story = [
{
"movie": {
"languages": ["English"],
"year": 1995,
"imdbId": "0114709",
"runtime": 81,
"imdbRating": 8.3,
"movieId": "1",
"countries": ["USA"],
"imdbVotes": 591836,
"title": "Toy Story",
"url": "https://themoviedb.org/movie/862",
"revenue": 373554033,
"tmdbId": "862",
"plot": "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.",
"posterUrl": "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
"released": "2022-11-02",
"trailerUrl": "https://www.youtube.com/watch?v=v-PjgYDrg70",
"budget": 30000000,
"actors": ["Jim Varney", "Tim Allen", "Tom Hanks", "Don Rickles"],
},
}
]
# Search movie tool
def search_movie(title: str):
"""Call to find movie.
Args:
title: Movie title e.g. 'Toy Story'
"""
if "toy story" in title.lower():
print(f"Returning JSON payload of '{title}' movie")
return json.dumps(movie_toy_story, default=str)
return None
movies_agent = create_react_agent(
model=llm,
tools=[search_movie],
prompt="You are useful movies assistant to answer user questions",
)
4. Create NextGenUI Agent
For easy integration use prebuilt NextGenUI LangGraph agent NextGenUILangGraphAgent which returns standard LangGraph agent.
from next_gen_ui_langgraph import NextGenUILangGraphAgent
ngui_agent = NextGenUILangGraphAgent(model=llm).build_graph()
5. Configure Rendering
Consider which rendering you prefer. To use web components you can use prebuilt Red Hat Design System (rhds) web component rendering shipped
in next_gen_ui_rhds_renderer package.
# NextGenUI config - Standard LangGraph agent configuration
component_system = "rhds"
ngui_cfg = {"configurable": {"component_system": component_system}}
6. Run agents
Run movies agent to get data and text summarization:
prompt = "Play Toy Story movie trailer"
movies_response = movies_agent.invoke(
{"messages": [{"role": "user", "content": prompt}]}
)
# Print text reponse:
print("\n\n===Movies Text Answer===\n", movies_response["messages"][-1].content)
Run NextGen UI Agent to get web component
import asyncio
ngui_response = asyncio.run(
# Run Next Gen UI Agent. Pass movies agent response directly.
ngui_agent.ainvoke(movies_response, ngui_cfg),
)
print(f"\n\n===Next Gen UI {component_system} Rendition===\n", ngui_response["renditions"][0].content)
Running this assistant with user's questions Play Toy Story movie trailer generates following output of movies agent:
===Movies Text Answer===
Here's the answer to the original user question:
[Intro music plays]
Narrator (in a deep, dramatic voice): "In a world where toys come to life..."
[Scene: Andy's room, toys are scattered all over the floor. Woody, a pull-string cowboy toy, is centered on a shelf.]
Narrator: "One toy stands tall."
[Scene: Close-up of Woody's face]
and Next Gen UI web component rendering:
===Next Gen UI rhds Rendition===
<rh-video-embed class="ngui-video-player">
<img slot="thumbnail" src="https://img.youtube.com/vi/v-PjgYDrg70/maxresdefault.jpg" alt="Toy Story Movie Trailer"/>
<template>
<iframe title="Toy Story Movie Trailer" width="900" height="499" src="https://www.youtube.com/embed/v-PjgYDrg70" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Toy Story Movie Trailer</p>
</rh-video-embed>
<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
<style>
.ngui-video-player {
&::part(caption) {
font-family: var(--rh-font-family-heading);
text-align: center;
}
</style>
7. Render web component
Take the rendition of NextGenUI Agent in you web app. To successfully render rhds web component you need to install RHDS itself. Follow installation guide.
This is inline component rendering. Try to play trailer, full-screen mode, resize window etc.
8. Try another prompts
Prompt: Tell me details about Toy Story, including poster
This prompt NextGenUI renders as a card with image and facts.
<dt>Title</dt>
<dd>Toy Story</dd>
<dt>Release Year</dt>
<dd>2022-11-02</dd>
<dt>Imdb Rating</dt>
<dd>8.3</dd>