DEV Community: Exson Joseph

Crafting Conversational Experiences: A Generative UI Portfolio Built with Gemini

Exson Joseph — Sat, 03 Jan 2026 11:26:22 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

My name is Exson Joseph. I'm a AI Engineer and Full-Stack Developer with over 2 years of experience building AI-powered products from end-to-end. I'm skilled at turning ideas into working products, from problem definition and feature design to full-stack implementation and deployment. This portfolio is a showcase of my skills and projects, presented in a unique and interactive way.

Portfolio

How I Built It

This portfolio is a full-stack application designed to be an interactive and engaging.

Tech Stack

Frontend:
- Framework: Next.js (with React and TypeScript)
- Styling: Tailwind CSS
- Animations: Framer Motion
- UI: A custom-built chatbot interface that allows users to ask questions in natural language.
Backend:
- Framework: Node.js with Express
- Database: MongoDB with Mongoose for conversation history.
- AI: Google's Gemini 2.5 Flash model through the @google/genai SDK.

This project consists of two services a Next.js frontend and a Node.js backend both are deployed in Google Cloud Run.

What I'm Most Proud Of

I'm most proud of creating a portfolio that goes beyond a static page. The chatbot interface, powered by Google's Gemini model, allows for a truly interactive and personal experience. I'm particularly excited about the "Generative UI" concept, where the AI has direct control over the user interface, making the portfolio feel alive and intelligent. This project was a great opportunity to combine my skills in full-stack development and generative AI to build something unique and memorable.

A Guide to HITL, HOTL, and HOOTL Workflows

Exson Joseph — Wed, 24 Dec 2025 17:54:11 +0000

In the rush to automate everything with Large Language Models (LLMs), many make a critical mistake they treat AI as a binary choice either a human does the work, or the machine does.

In reality, the most successful AI implementations exist on a spectrum of human intervention. We call these HITL (Human-in-the-Loop), HOTL (Human-on-the-Loop), and HOOTL (Human-out-of-the-Loop).

Choosing the wrong workflow can lead to either a "bottleneck" (too much human interference) or "hallucination disasters" (too much machine autonomy). Here is everything you need to know about these three pillars of AI architecture.

1. Human-in-the-Loop (HITL)

In an HITL workflow, the AI is a sophisticated assistant that cannot finish its task without a human "checkpoint."

When to use it:

High-stakes legal or medical documents.
Creative writing where "voice" and "nuance" are vital.
Generating code for production systems.

Code Example

In this example, Gemini writes a press release, but the script refuses to "publish" it until a human manually reviews and edits the text.

from google import genai
from dotenv import load_dotenv

load_dotenv(override=True)

client = genai.Client()

MODEL_NAME = "gemini-2.5-flash"

def hitl_press_release(topic):
    """HITL: Human reviews and approves/edit AI output before finalizing."""
    prompt = f"Write a short press release for: {topic}"
    ai_draft = client.models.generate_content(
        model=MODEL_NAME,
        contents=prompt
    ).text

    print("\n--- [ACTION REQUIRED] REVIEW AI DRAFT ---")
    print(ai_draft)

    feedback = input("\nWould you like to (1) Accept, (2) Rewrite, or (3) Edit manually? ")

    if feedback == "1":
        final_output = ai_draft
    elif feedback == "2":
        critique = input("What should the AI change? ")
        return hitl_press_release(f"{topic}. Note: {critique}")
    else:
        final_output = input("Paste your manually edited version here: ")

    print("\n[SUCCESS] Press release finalized and saved.")
    return final_output

hitl_press_release("Launch of a new sustainable coffee brand")

2. Human-on-the-Loop (HOTL)

In HOTL, the AI operates autonomously and at scale, but a human stands by a "dashboard" to monitor the outputs. The human doesn't approve every single item instead, they intervene only when they see the AI deviating from the goal.

When to use it:

Live social media moderation.
Real-time customer support chatbots.
Monitoring industrial IoT sensors.

Code Example

In this example, Gemini categorizes customer tickets. The human isn't asked for permission for every ticket, but they have a "Window of Intervention" to stop the process if the AI starts making mistakes.

from google import genai
from dotenv import load_dotenv
import time

load_dotenv(override=True)

client = genai.Client()

MODEL_NAME = "gemini-2.5-flash"

def hotl_support_monitor(tickets):
    """On-the-Loop: Human monitors AI decisions in real-time and can veto."""
    print("System active. Monitoring AI actions... (Press Ctrl+C to PAUSE/VETO)")

    for i, ticket in enumerate(tickets):
        try:
            response = client.models.generate_content(
                model=MODEL_NAME,
                contents=f"Categorize this ticket (Billing/Tech/Sales): {ticket}"
            )
            category = response.text.strip()

            print(f"[Log {i+1}] Ticket: {ticket[:30]}... -> Action: Tagged as {category}")

            time.sleep(2)

        except KeyboardInterrupt:
            print(f"\n[VETO] Human supervisor has paused the system on ticket: {ticket}")
            action = input("Should we (C)ontinue or (S)kip this ticket? ")
            if action.lower() == 's':
                continue
            else:
                pass

tickets = ["My bill is too high", "The app keeps crashing", "How do I buy more?"]
hotl_support_monitor(tickets)

3. Human-out-of-the-Loop (HOOTL)

The AI handles the entire process from start to finish. Human intervention only happens after the fact during an audit or a weekly performance review. This is the goal for high-volume, low-risk tasks.

When to use it:

Spam filtering.
Translating massive databases of product descriptions.
Basic data cleaning and formatting.

Code Example

This script takes customer reviews and summarizes them into a report without ever stopping to ask a human for help.

from google import genai
from dotenv import load_dotenv

load_dotenv(override=True)

client = genai.Client()

MODEL_NAME = "gemini-2.5-flash"

def hootl_batch_processor(data_list):
    """Human-out-of-the-Loop: AI processes batch independently; human reviews final report."""
    print(f"Starting HOOTL process: {len(data_list)} items to process.")
    final_report = []

    for item in data_list:
        response = client.models.generate_content(
            model=MODEL_NAME,
            contents=f"Extract key sentiment (Happy/Sad/Neutral): {item}"
        )
        final_report.append({"data": item, "sentiment": response.text.strip()})

    return final_report

reviews = ["Great food!", "Slow service", "Expensive but worth it"]
report = hootl_batch_processor(reviews)
print("Final Report:", report)

Which one should you build?

Workflow	Interaction Level	Human Effort	Latency (Speed)	Risk Tolerance
HITL	Active	High	Slow	Zero Tolerance (High Risk)
HOTL	Passive	Medium	Medium	Managed Risk (Scale + Safety)
HOOTL	None	Low	Very Fast	Low Risk (High Volume)

Strategies to Analyze Any Size Dataset with LLMs Beyond its Context Limit

Exson Joseph — Tue, 18 Nov 2025 05:46:54 +0000

You've connected your LLM to a SQL database using Model Context Protocol (MCP), run a query, and... oh no. Instead of the manageable 100 rows you expected, you get 50,000 records. Your LLM's context window can only handle a fraction of this data. What now?

Here's how to fix this, starting with the most effective approaches.

The Summary Approach

Instead of dumping raw data, provide strategic summaries that give the LLM (and your users) the big picture.

SELECT 
    COUNT(*) as total_records,
    AVG(sales_amount) as avg_sale,
    MIN(sales_amount) as min_sale,
    MAX(sales_amount) as max_sale,
    COUNT(DISTINCT customer_id) as unique_customers,
    SUM(sales_amount) as total_revenue
FROM sales_data 
WHERE date >= '2024-01-01';

The LLM gets the complete statistical picture in a few dozen tokens instead of thousands. It can identify outliers, understand distributions, and ask intelligent follow-up questions.

Progressive Disclosure Pattern

Think of this as a conversation rather than a data dump:

High-level summary: We have 50,000 sales records totaling $2.4M
Key trends: Sales are growing 15% month-over-month, with Electronics being the top category
Segment analysis: Let me analyze the top 10% of customers who drive 40% of revenue
Deep dive: Show me the actual transactions for our VIP customers last month

Each step is context-aware and builds on previous understanding.

Intelligent Sampling

Not all data points are created equal. Instead of random sampling, use strategic approaches:

SELECT * FROM (
    SELECT *, 
           ROW_NUMBER() OVER (PARTITION BY category ORDER BY RANDOM()) as rn
    FROM products
) WHERE rn <= 10;  -- 10 from each category

-- Importance sampling: focus on what matters
SELECT * FROM customers 
ORDER BY lifetime_value DESC, last_purchase_date DESC
LIMIT 100;

Time-based Chunking

Large datasets often have a time component. Use this to your advantage:

SELECT 
    DATE_TRUNC('week', order_date) as week,
    COUNT(*) as order_count,
    AVG(order_amount) as avg_order_size
FROM orders
GROUP BY DATE_TRUNC('week', order_date)
ORDER BY week;

This helps identify trends, seasonality, and anomalies without overwhelming the context window.

The Outlier-First Method

Often, the most interesting insights live in the extremes:

SELECT *
FROM (
    SELECT *,
           (sales_amount - AVG(sales_amount) OVER()) / STDDEV(sales_amount) OVER() as z_score
    FROM sales_data
) WHERE ABS(z_score) > 3;

The goal isn't to show all your data, it's to derive insights from it. By using these strategies, you transform from someone who struggles with context limits to someone who delivers precise, actionable insights regardless of data size.

Scalable Character Insights from Novels Using Vector Search and LLMs

Exson Joseph — Fri, 20 Jun 2025 02:31:41 +0000

When dealing with small documents say, 5 to 10 pages it's relatively straightforward to generate text embeddings, store them in a vector database, and perform similarity search to retrieve relevant content. This works well for basic use cases where you need to find simple facts, definitions, or short contextual passages.

But what happens when the content isn’t a short article, but an entire novel series like Harry Potter? And what if your goal isn’t just to retrieve a paragraph, but to understand something deep and evolving like a character's personality, motivations, or moral arc across multiple books?

This introduces a number of challenges:

Volume of data: Thousands of pages with rich narrative.
Contextual evolution: A character may grow, change, or contradict themselves across different books.
Relevance and focus: Not all scenes matter equally; many contain noise for this task.

To handle this effectively and efficiently, we need a multi-layered approach that combines the following techniques:

Smart Chunking
Named Entity Recognition (NER)
Vector Search with Metadata Filtering
Retrieval-Augmented Generation (RAG)

Smart Chunking

Instead of naively splitting the text by fixed token lengths, we apply semantic chunking. This means breaking the text at natural boundaries like paragraphs, chapters, or scenes. Sliding windows can be used to preserve context across adjacent sections. This improves the quality of both retrieval and interpretation by keeping meaningful units of thought together.

Named Entity Recognition (NER)

We use NER to automatically identify characters, locations, and other key entities throughout the text. This allows us to tag each chunk with metadata, such as:

Which characters are mentioned
Dialogue vs. narration
Scene context (e.g., setting or action)

By doing this, we can filter the vector search to only include relevant portions of the text when analyzing a specific character.

Vector Search with Metadata Filtering

Once the text is chunked and embedded, we store the vectors in a vector database (e.g., FAISS, Qdrant, or Weaviate). When a user query like:

“What kind of person is Draco Malfoy?”

the system can:

Filter the chunks to those that mention Draco Malfoy.
Search within that filtered set using semantic similarity.
Retrieve the most relevant passages for deeper analysis.

This drastically improves both performance and relevance compared to searching across the entire corpus.

Retrieval-Augmented Generation (RAG)

Finally, the retrieved chunks are passed to a language model using a Retrieval-Augmented Generation pipeline. Instead of just retrieving passages, the LLM is prompted to synthesize an answer based on retrieved evidence.

This enables complex, context-aware answers like:

Descriptions of a character’s evolving traits
Contradictions in behavior across books
Emotional or psychological profiling

Conclusion

Extracting character insights from massive narrative datasets like novel series requires more than just embedding text and running similarity search. It involves a thoughtful combination of:

Smart chunking to preserve semantic structure
NER and metadata for focused retrieval
Vector search to handle scale efficiently
RAG pipelines to generate coherent, high-quality answers

This approach scales well, offers flexibility, and can be adapted to a wide range of literary analysis or knowledge retrieval tasks.

Automating SQL Queries with LangChain and Gemini : A Step-by-Step Guide

Exson Joseph — Wed, 02 Apr 2025 16:26:41 +0000

GitHub Repository

Learn how to automate SQL query generation and execution using LangChain, Google Gemini AI, and MySQL. This guide walks you through setting up a seamless pipeline from transforming natural language questions into SQL queries to executing them and generating insightful answers.

Environment Setup

Creating a Virtual Environment

Isolate your project dependencies by creating a virtual environment:

py -m venv .venv

activate virtual environment

.\.venv\Scripts\activate

Installing Required Packages

Install the necessary Python packages:

pip install mysql-connector-python langchain langchain-community langchain-google-genai python-dotenv

Configuring Environment Variables

Create a .env file with your configuration:

LANGSMITH_TRACING=true
LANGSMITH_ENDPOINT="https://api.smith.langchain.com"
LANGSMITH_API_KEY=your_langsmith_key
LANGSMITH_PROJECT="company-sql"
GOOGLE_API_KEY=your_google_api_key
SQL_HOST=your_db_host
SQL_USER=your_db_username
SQL_PASSWORD=your_db_password
SQL_DB_NAME=your_database_name

Building the SQL Automation Pipeline

Importing Required Modules

from langchain_google_genai import ChatGoogleGenerativeAI
from langchain_community.utilities import SQLDatabase
from langchain_community.tools.sql_database.tool import QuerySQLDatabaseTool
from langchain import hub
from dotenv import load_dotenv
import os

ChatGoogleGenerativeAI : To use Google's Gemini model.
SQLDatabase : Manages database connections using SQL URI.
QuerySQLDatabaseTool : Executes queries and retrieves results.
hub : Accesses pre-defined prompts from LangChain Hub.
load_dotenv : Manages environment variables.
os : Accesses operating system functionality.

Loading Configuration

load_dotenv(override=True)

SQL_HOST=os.getenv("SQL_HOST")
SQL_USER=os.getenv("SQL_USER")
SQL_PASSWORD=os.getenv("SQL_PASSWORD")
SQL_DB_NAME=os.getenv("SQL_DB_NAME")

This code loads sensitive configuration from your .env file, keeping credentials secure and out of your source code.

Initializing Gemini AI Model

llm = ChatGoogleGenerativeAI(model="gemini-1.5-flash")

We're using Google's gemini-1.5-flash model, which offers excellent performance for SQL generation tasks while being cost-effective.

Establishing Database Connection

connection_Uri = f"mysql+mysqlconnector://{SQL_USER}:{SQL_PASSWORD}@{SQL_HOST}/{SQL_DB_NAME}"
db = SQLDatabase.from_uri(connection_Uri)

This creates a connection string and establishes a connection to your MySQL database using the credentials from your environment variables.

Core Functionality Implementation

SQL Query Generation

query_prompt_template = hub.pull("langchain-ai/sql-query-system-prompt")

def write_query(question: str):
    """Generate SQL query from the user's question."""
    prompt = query_prompt_template.invoke(
        {
            "dialect": db.dialect,
            "top_k": 10,
            "table_info": db.get_table_info(),
            "input": question,
        }
    )
    response = llm.invoke(prompt.to_string())

    extraction_prompt = """
    Please extract the SQL query from the following text and return only the SQL query without any additional characters or formatting:

    {response}

    SQL Query:
    """
    # Format the prompt with the actual response
    prompt = extraction_prompt.format(response=response)
    # Invoke the language model with the prompt
    parsed_query = llm.invoke(prompt)
    return parsed_query.content

Pulls a specialized SQL generation prompt from LangChain Hub
Formats the prompt with database schema information
Sends the prompt to Gemini AI for query generation
Uses a second prompt to extract just the SQL from the response

Query Execution

def execute_query(query: str):
    """Execute the SQL query."""
    execute_query_tool = QuerySQLDatabaseTool(db=db)
    return execute_query_tool.invoke(query)

This function creates a query execution tool and runs the generated SQL against your database, returning the raw results.

Natural Language Answer Generation

def generate_answer(question: str, query: str, result: str):
    """Generate an answer using the query results."""
    prompt = (
        "Given the following user question, corresponding SQL query, "
        "and SQL result, answer the user question.\n\n"
        f'Question: {question}\n'
        f'SQL Query: {query}\n'
        f'SQL Result: {result}'
    )
    response = llm.invoke(prompt)
    return response.content

This function takes the original question, generated SQL, and query results, then asks Gemini to formulate a human-friendly answer.

Putting It All Together

question = "Which employee is leading Project Gamma"

query = write_query(question)
result = execute_query(query)
answer = generate_answer(question,query, result )
print(answer)

Output

Charlie Brown is the Marketing Lead for Project Gamma.

Conclusion

This implementation demonstrates how to create a powerful natural language interface for your SQL databases. By combining LangChain's orchestration capabilities with Gemini's advanced language understanding, you can build systems that make data accessible to non-technical users while maintaining the precision of SQL queries.

Complete Code

from langchain_google_genai import ChatGoogleGenerativeAI
from langchain_community.utilities import SQLDatabase
from langchain_community.tools.sql_database.tool import QuerySQLDatabaseTool
from langchain import hub
from dotenv import load_dotenv
import os

# Load environment variables
load_dotenv(override=True)

SQL_HOST=os.getenv("SQL_HOST")
SQL_USER=os.getenv("SQL_USER")
SQL_PASSWORD=os.getenv("SQL_PASSWORD")
SQL_DB_NAME=os.getenv("SQL_DB_NAME")

# Initialize the Gemini model
llm = ChatGoogleGenerativeAI(model="gemini-1.5-flash")

# Connect to the MySQL database
connection_Uri = f"mysql+mysqlconnector://{SQL_USER}:{SQL_PASSWORD}@{SQL_HOST}/{SQL_DB_NAME}"
db = SQLDatabase.from_uri(connection_Uri)

# Pull the SQL query prompt from LangChain Hub
query_prompt_template = hub.pull("langchain-ai/sql-query-system-prompt")


def write_query(question: str):
    """Generate SQL query from the user's question."""
    prompt = query_prompt_template.invoke(
        {
            "dialect": db.dialect,
            "top_k": 10,
            "table_info": db.get_table_info(),
            "input": question,
        }
    )
    response = llm.invoke(prompt.to_string())

    extraction_prompt = """
    Please extract the SQL query from the following text and return only the SQL query without any additional characters or formatting:

    {response}

    SQL Query:
    """
    # Format the prompt with the actual response
    prompt = extraction_prompt.format(response=response)
    # Invoke the language model with the prompt
    parsed_query = llm.invoke(prompt)
    return parsed_query.content

def execute_query(query: str):
    """Execute the SQL query."""
    execute_query_tool = QuerySQLDatabaseTool(db=db)
    return execute_query_tool.invoke(query)

def generate_answer(question: str, query: str, result: str):
    """Generate an answer using the query results."""
    prompt = (
        "Given the following user question, corresponding SQL query, "
        "and SQL result, answer the user question.\n\n"
        f'Question: {question}\n'
        f'SQL Query: {query}\n'
        f'SQL Result: {result}'
    )
    response = llm.invoke(prompt)
    return response.content

question = "Which employee is leading Project Gamma"
query = write_query(question)
result = execute_query(query)
answer = generate_answer(question,query, result )
print(answer)

FastAPI: A Comprehensive Guide

Exson Joseph — Sat, 29 Mar 2025 19:30:35 +0000

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints. In this guide, we'll walk through setting up FastAPI and implementing all the basic CRUD operations.

Installation and Setup

First, let's set up a virtual environment and install FastAPI:

Create a virtual environment

python -m venv venv

Activate the virtual environment

On Windows:

venv\Scripts\activate

On macOS/Linux:

source venv/bin/activate

Install FastAPI with all dependencies

pip install "fastapi[standard]"

Basic FastAPI Application

Let's create a movie API example instead of books. Create a file called app.py:

from fastapi import FastAPI

app = FastAPI()

MOVIES = [
    {"title": "Inception", "director": "Christopher Nolan", "genre": "sci-fi"},
    {"title": "The Shawshank Redemption", "director": "Frank Darabont", "genre": "drama"},
    {"title": "The Dark Knight", "director": "Christopher Nolan", "genre": "action"},
    {"title": "Pulp Fiction", "director": "Quentin Tarantino", "genre": "crime"},
    {"title": "Parasite", "director": "Bong Joon-ho", "genre": "drama"}
]

Running the Application

Start the server with:

uvicorn app:app --reload

The --reload flag enables auto-reload when you make code changes.

Visit http://127.0.0.1:8000/docs to see the interactive Swagger UI documentation.

Implementing CRUD Operations

1. GET Request (Read All)

@app.get('/movies')
async def read_all_movies():
    return MOVIES

This endpoint returns the entire list of movies. The @app.get decorator defines a GET request at the /movies endpoint

2. Path Parameters (Read One)

@app.get('/movies/{movie_title}')
async def get_movie(movie_title: str):
    for movie in MOVIES:
        if movie.get("title").casefold() == movie_title.casefold():
            return movie
    return {"error": "Movie not found"}

This endpoint retrieves a single movie by its title. The {movie_title} in the path is a path parameter that captures the movie title from the URL.

3. Query Parameters (Filtering)

@app.get('/movies/')
async def read_movies_by_genre(genre: str):
    movies_to_return = []
    for movie in MOVIES:
        if movie.get('genre').casefold() == genre.casefold():
            movies_to_return.append(movie)
    return movies_to_return if movies_to_return else {"message": "No movies found in this genre"}

This endpoint filters movies by genre using a query parameter. The genre parameter is passed in the URL as a query string (e.g., /movies/?genre=drama).

4. POST Request (Create)

from fastapi import Body

@app.post('/movies/create_movie')
async def create_movie(new_movie=Body()):
    MOVIES.append(new_movie)
    return {"message": "Movie added successfully", "movie": new_movie}

This endpoint adds a new movie to the list. The Body dependency extracts the JSON body from the request, which contains the new movie's details.

5. PUT Request (Update)

@app.put('/movies/update_movie')
async def update_movie(updated_movie=Body()):
    for i in range(len(MOVIES)):
        if MOVIES[i].get('title').casefold() == updated_movie.get('title').casefold():
            MOVIES[i] = updated_movie
            return {"message": "Movie updated successfully"}
    return {"error": "Movie not found"}

This endpoint updates an existing movie's details. It searches for the movie by title and replaces it with the updated movie data.

6. DELETE Request

@app.delete('/movies/delete_movie/{movie_title}')
async def delete_movie(movie_title: str):
    for i in range(len(MOVIES)):
        if MOVIES[i].get('title').casefold() == movie_title.casefold():
            deleted_movie = MOVIES.pop(i)
            return {"message": "Movie deleted successfully", "deleted_movie": deleted_movie}
    return {"error": "Movie not found"}

This endpoint deletes a movie by its title. It searches for the movie and removes it from the list if found.

Best Practices

Always use virtual environments
Organize your code with routers as your app grows
Add input validation using Pydantic models
Implement proper error handling
Consider adding authentication for production APIs

Langgraph Visualization with get_graph

Exson Joseph — Tue, 25 Mar 2025 18:10:16 +0000

LangGraph is a library created to make it easier to create stateful, multi-agent applications that make use of Large Language Models (LLMs). By expressing complex agent operations as cyclic graphs, it makes it possible to create more dynamic and adaptable behaviors than conventional linear execution models.

Creating and managing chat state graphs can be challenging, but with tools like StateGraph from the langgraph library, you can seamlessly build and visualize complex workflows. This post walks you through a simple example to illustrate how to define custom nodes and edges in a state graph and visualize it using multiple formats.

Prerequisites

Before diving into the code, ensure you have the following Python libraries installed:

pip install langgraph grandalf

Building the Graph

Here’s the core code that constructs a simple state graph, including custom nodes and transitions:

from IPython.display import Image
from typing_extensions import TypedDict
from langgraph.graph import StateGraph, START, END

class State(TypedDict):
    "State to manage all chats"

class MyNode:
    "Custom Node"

# Initialize the graph builder with a state
builder = StateGraph(State)

# Add a custom node
builder.add_node("myNode", MyNode)

# Define the edges for transitions
builder.add_edge(START, "myNode")
builder.add_edge("myNode", END)

# Compile the graph
chat_graph = builder.compile()

Mermaid PNG

This can be rendered directly in a Jupyter Notebook using

IPython.display.Image

Image(chat_graph.get_graph().draw_mermaid_png())

ASCII

The ASCII output provides a minimal yet clear visualization of the node transitions.

print(chat_graph.get_graph().draw_ascii())

Mermaid Code

The draw_mermaid() function outputs the source code for a Mermaid

diagram.print(chat_graph.get_graph().draw_mermaid())

%%{init: {'flowchart': {'curve': 'linear'}}}%%
graph TD;
    __start__([<p>__start__</p>]):::first
    myNode(myNode)
    __end__([<p>__end__</p>]):::last
    __start__ --> myNode;
    myNode --> __end__;
    classDef default fill:#f2f0ff,line-height:1.2
    classDef first fill-opacity:0
    classDef last fill:#bfb6fc

You can copy the Mermaid code from the terminal and visit mermaid.live. Paste the code into the Code section, and you will see the graph rendered under the Diagram section.

Conclusion

StateGraph is a powerful tool for managing and visualizing state transitions in a chat workflow. By combining custom nodes, edges, and flexible visualization options, it simplifies the process of understanding and debugging complex state machines.