Skip to content

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.11 or higher:

python --version
# Python 3.11.13

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. 

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 successfull 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.

Toy Story Trailer

Toy Story Trailer

8. Try another prompts

Prompt: Tell me details about Toy Story, including poster

This prompt NextGenUI renders as a card with image and facts.

Toy Story

Title
Toy Story
Release Year
2022-11-02
Imdb Rating
8.3