Forem: Emmanuel Onwuegbusi

Build Your Own AI Agent that Can Browse the Web and Take Actions 🤖

Emmanuel Onwuegbusi — Fri, 09 May 2025 12:44:55 +0000

In this article, we'll explore how to build an AI agent that can automatically browse the web and perform actions using the Supercog Agentic Framework. This powerful agent combines browser automation with AI vision models to create an intelligent web assistant that can navigate websites, extract information, and perform tasks just like a human would.

Outline 📋

Installation
Set up Required API Keys
Running the OSS Operator Agent
Customizing the Agent
Conclusion

Installation 🛠️

Let's install the framework from source to get started:

# Clone the repository
git clone https://github.com/supercog-ai/agentic.git

# Change to the agentic directory
cd agentic

# Create and activate a virtual environment
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Install with browser-use dependencies
uv pip install -e ".[browser-use,dev]"

# Install Playwright browsers
playwright install

Set up Required API Keys 🔑

To use the OSS Operator Agent, you'll need to set up an API key for your chosen model:

Google Gemini API Key (Recommended):
- Sign up at Google AI Studio
- Create an API key
- We recommend using Gemini 2.0 Flash model which is optimized for browser automation tasks and has better context handling
OpenAI API Key (Alternative):
- Sign up at OpenAI
- Create an API key in your account settings
- Can be used with GPT-4 or other OpenAI models

You can set the key as an environment variable:

# For Gemini (recommended)
export GEMINI_API_KEY=your_gemini_key

# OR for OpenAI
export OPENAI_API_KEY=your_openai_key

Running the OSS Operator Agent 🚀

Navigate to the examples directory:

cd examples

Run the OSS operator agent:

python oss_operator.py

The agent will start and you can interact with it through the command line. Try asking it to:
- Get the first 5 posts from Hacker News homepage
- Search for specific information on a website
- Fill out forms or perform actions on websites

Example interaction:

I am your open source Operator. What task would you like me to perform?
> get me the first 5 posts on hackernews homepage

The agent will:

Open a browser window
Navigate to Hacker News
Extract the first 5 posts
Return the results to you

Customizing the Agent 🎯

You can customize the agent by modifying the oss_operator.py file:

Choose Your Model: The agent supports different AI models:

agent = Agent(
    name="OSS Operator",
    model="gemini/gemini-2.0-flash",  # Recommended for browser automation
    # Other options:
    # model="openai/gpt-4o"
    # model="openai/gpt-4"
    tools=[BrowserUseTool()]
)

Use Your Browser: You can configure the agent to use your actual Chrome browser instance (with your cookies and state):

BrowserUseTool(
    chrome_instance_path='/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',  # MacOS
    # For Windows: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
    # For Linux: '/usr/bin/google-chrome'
)

Conclusion 🎉

The OSS Operator Agent demonstrates the power of combining browser automation with AI vision models. Using the Supercog Agentic Framework, you can create all kinds of sophisticated AI Agents just like the web automation agents that can understand and interact with websites in a human-like way.

Some exciting use cases:

Automated web research
Data collection and monitoring
Form filling and submission
Website testing
Content extraction
Automated workflows

To learn more about Supercog Agentic Framework:

Visit the GitHub repository: https://github.com/supercog-ai/agentic
Check out the documentation: https://supercog-ai.github.io/agentic/latest/
Join the Discord community: https://discord.gg/EmPGShjmGu

Don't forget to star the repository if you find it useful! ⭐

Troubleshooting 🔧

If you encounter any issues:

Browser Installation: Make sure Playwright is properly installed:

playwright install

API Key Issues: Verify your API keys are correctly set in the environment variables.
Model Selection: If you run into context limits, try using Gemini 2.0 Flash instead of GPT-4.
Browser Path: If using a custom Chrome instance, ensure the path is correct for your operating system.

Feel free to ask questions in the comments below or open an issue on GitHub if you need help!

Straightforward No-code Meeting Notetaker Agent 📝

Emmanuel Onwuegbusi — Fri, 25 Apr 2025 11:57:47 +0000

In this article, we will set up and run a No-code meeting note taker agent that records and transcribes meetings, generates meeting summaries from the transcription, and saves them into a knowledge base you can interact with, ask for key points, etc.

Outline

Sign up on Supercog
Start the Meeting NoteTaker Agent
Send the bot to join the Meeting
Ask for info from the meeting
Conclusion

Sign up on Supercog

Go to Supercog https://app.supercog.ai/register/ and register:

Supercog is an advanced AI platform that transforms productivity by connecting directly to your business systems and automating tasks. It enables real-time data analysis, generates insights, and empowers teams to create customizable AI solutions tailored to their needs. You can build AI Agents with Supercog to automate tasks.

Start the Meeting NoteTaker Agent

Agents are systems that use LLMs as reasoning engines to determine which actions to take and the inputs to pass to them.

On the homepage (https://app.supercog.ai/home/), scroll to Templates and click the Meeting Bot Agent tab to start chatting quickly:

Send the bot to join the Meeting

In the agent edit page, go to the chat box and enter your prompt that includes your meeting URL

Example:

Join this meeting: https://meet.google.com/example-url-here=here

The bot will join your meeting, record it until it ends, and provide the data as it goes. Supercog will generate a summary from the meeting transcript and index the summary for the RAG process so that you can ask questions to get information from the meeting and get a response based on the meeting.

Ask for info from the meeting

Once the meeting is complete or you leave the meeting, you can go to the chat box to ask questions and get info based on the meeting. For example, in my case, I am finding out what the key points discussed in the meeting were:

You can ask more questions about the meeting, and Supercog will give you responses based on the meeting data.

Conclusion

You can easily do the following and more using Supercog:

Integrate seamlessly with various business systems and popular SaaS applications
Automate repetitive tasks
Do advanced data analysis
Deep research
Podcast generation
Report generation
File data processing, etc

Build Your Own AI Meeting Notetaker Agent using Supercog Agentic Framework

Build Your Own Podcast Producer AI Agent🎙️

Emmanuel Onwuegbusi — Fri, 18 Apr 2025 17:07:09 +0000

In this article, we'll explore how to build an AI News Podcast Producer Agent that automatically generates, narrates, and publishes daily news updates covering AI, Sports, and Finance using Supercog Agentic Framework. This powerful agent combines multiple AI models and tools to create professional-quality podcast episodes.

Outline 📋

Installation Options
Set up Required API Keys
Running the Podcast Agent
Customizing the Prompts
Architecture Overview
Conclusion

Installation Options 🛠️

You have two options for installation:

Option 1: Install from PyPI (Recommended)

# Create and activate a virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install from PyPI
pip install agentic-framework

# Initialize your project
agentic init .

This will create a basic project structure and copy example agents into your directory.

Option 2: Install from Source

# Clone the repository
git clone https://github.com/supercog-ai/agentic.git

# Change to the agentic directory
cd agentic

# Install with all dependencies
uv pip install -e ".[all,dev]"

Set up required API keys 🔑

To use the Podcast Agent, you'll need to set up the following API keys:

Transistor API Key & Show ID:
- Create an account at Transistor.fm
- Create a new podcast show
- Get your Show ID from the URL: https://dashboard.transistor.fm/shows/SHOW-ID/episodes
- Get your API key from Your Account > API Access
Tavily API Key:
- Sign up at Tavily
- Navigate to your dashboard to get your API key
OpenAI API Key:
- Sign up at OpenAI
- Create an API key in your account settings
Anthropic API Key:
- Sign up at Anthropic
- Get your API key from the dashboard

You can set these keys:

Environment Variables:

export TRANSISTOR_API_KEY=your_transistor_key
export TRANSISTOR_SHOW_ID=your_show_id
export TAVILY_API_KEY=your_tavily_key
export OPENAI_API_KEY=your_openai_key
export ANTHROPIC_API_KEY=your_anthropic_key

Running the Podcast Agent 🚀

Navigate to the examples directory:

cd examples/podcast

Run the podcast agent:

python podcast_short.py

Enter the command to start podcast production:

run

The agent will then:

Generate AI news using Claude
Generate sports news using Claude
Generate finance news using Claude
Format the news for broadcast
Convert the text to speech
Publish the episode to Transistor.fm

You can listen to an example episode here: https://share.transistor.fm/s/95fa8302

Customizing the Prompts 🎯

The agent uses prompts defined in podcast_short.yaml to generate each news segment. You can customize these prompts to change:

The style and tone of reporting
The topics covered
The length and detail of each segment
The sources and focus of news gathering

Here's an example of the AI News Reporter prompt:

AI_NEWS_REPORTER: >
  You are an experienced, hard-hitting news reporter. You are preparing a news report.
  Follow these steps precisely:
  1. Search for headlines, using query_news, about "AI and artificial intelligence" but exclude "motley fool".
  2. Download pages for the most interesting articles, max 10.
  3. Now create a long, extensive "morning news" report in the style of NPR or CNN, but with a hard news edge, and reporting as "Supercog News", at least 10,000 characters. Do not print any paragraph headers.

Feel free to modify these prompts to create your own unique podcast format!

Architecture Overview 🏗️

The podcast agent uses several components:

Google News Tool for gathering news
Tavily Search Tool for additional research
Text-to-Speech Tool for narration
Claude and GPT-4 for content generation and formatting
Transistor.fm API for podcast publishing

Each news segment is generated by a specialized agent (AI, Sports, Finance) that uses both news gathering tools and language models to create professional broadcast-style content.

Conclusion 🎉

The AI News Podcast Agent demonstrates the power of the Supercog Agentic Framework for creating complex, multi-step automation workflows. By combining multiple AI models and tools, we can create a fully automated podcast production system that generates, narrates, and publishes professional-quality content.

To learn more about Supercog Agentic Framework:

Visit the GitHub repository: https://github.com/supercog-ai/agentic
Check out the documentation: https://supercog-ai.github.io/agentic/latest/
Join the Discord community: https://discord.gg/EmPGShjmGu

Don't forget to star the repository if you find it useful! ⭐

Build Your Own AI People Research Agent using Supercog Agentic Framework 🔍

Emmanuel Onwuegbusi — Thu, 17 Apr 2025 14:43:14 +0000

In this article, we'll explore how to build an AI People Research Agent that can help you gather detailed information about professionals, their career progression, and company backgrounds. This powerful agent combines LinkedIn data with intelligent analysis to create comprehensive professional profiles.

Outline

Install Supercog Agentic Framework
Set up required API keys
Start the People Researcher Agent
Run your first people research
Understanding the output
Conclusion

Install Supercog Agentic Framework 🛠️

Currently, the easiest way to run Supercog agentic framework is from source. We'll use uv for package management:

Clone the Supercog agentic repository:

git clone https://github.com/supercog-ai/agentic.git

Change to the agentic directory:

cd agentic

Install the project in editable mode with all optional and development tools using uv:

uv pip install -e ".[all,dev]"

Set up required API keys 🔑

To use the People Researcher agent, you'll need to set up the following API keys:

RapidAPI Key (for LinkedIn data access)
OpenAI API Key (for the AI model)

You can set these in one of three ways:

Environment Variables:

export RAPIDAPI_KEY=your_rapidapi_key
export OPENAI_API_KEY=your_openai_api_key

.env File:

RAPIDAPI_KEY=your_rapidapi_key
OPENAI_API_KEY=your_openai_api_key

Using agentic secrets:

agentic secrets set "RAPIDAPI_KEY=your_rapidapi_key"
agentic secrets set "OPENAI_API_KEY=your_openai_api_key"

You can get your RapidAPI key from: https://rapidapi.com/

Start the People Researcher Agent 🚀

Run the following command to start the People Researcher agent:

python examples/people_researcher.py

This will launch the agent in interactive mode, ready to accept your research requests.

Run your first people research 🔍

Once the agent is running, you can start researching people by providing their name and company. Here's an example:

Do a research on Emmanuel Onwuegbusi, he works at Supercog AI

The agent will:

Search for matching LinkedIn profiles
If multiple matches are found, it will ask you to select the correct one
Gather detailed profile information
Research the company background
Generate a comprehensive report

Understanding the output 📊

The agent will provide a detailed report that includes:

Profile overview (name, location, LinkedIn URL)
Career progression
Current role details
Company background
Education history
Skills and endorsements
Certifications and achievements

Here's a snippet example of what the output might look like:

### Background Report on Emmanuel Onwuegbusi

**Profile Overview:**
- **Name:** Emmanuel Onwuegbusi
- **Location:** Nigeria
- **LinkedIn Profile:** [Emmanuel Onwuegbusi](https://www.linkedin.com/in/emmanuelonwuegbusi)
- **Profile Picture:** ![Profile Picture](https://media.licdn.com/dms/image/v2/C5603AQG2ND_gMGxa9w/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1559317269391?e=1750291200&v=beta&t=qumIdOQHknAilHHKTKlG4IVW-6kNRDU57XV7v8ETrCI)
- **Summary:** Emmanuel is a Creative Software Engineer with expertise in Software Engineering, Data Science, Machine Learning, and Technical Writing. He leverages his creative skills and technical knowledge to lead and build data-driven applications.

**Career Progression:**

1. **Current Role: Software Engineer at Supercog AI**
   - **Duration:** September 2024 - Present
   - **Location:** San Francisco, California, United States
   - **Description:** Emmanuel is involved in solving complex problems in application and data integration using GenAI and agentic architectures.
   - **Company Overview:** Supercog AI is a technology company specializing in AI and machine learning solutions, focusing on enhancing business operations through innovative AI-driven products and services.

Conclusion 🎉

The People Researcher agent is a powerful tool for gathering professional information and creating detailed background reports. It's particularly useful for:

Recruiters looking to understand candidate backgrounds
Business professionals researching potential partners or clients
Anyone needing detailed professional profiles

You can customize your research by:

Adding specific companies to narrow down searches
Requesting particular aspects of a person's background
Focusing on specific time periods in their career

To learn more about Supercog Agentic Framework:

Visit the GitHub repository: https://github.com/supercog-ai/agentic
Check out the documentation: https://supercog-ai.github.io/agentic/latest/
Join the Discord community: https://discord.gg/EmPGShjmGu

Don't forget to star the repository if you find it useful! ⭐

Build Your Own AI Meeting Notetaker Agent using Supercog Agentic Framework 🚀

Emmanuel Onwuegbusi — Fri, 04 Apr 2025 16:26:56 +0000

In this article, we will learn to build an AI Meeting Notetaker Agent that records and transcribes meetings, generates meeting summaries from the transcription, and saves that into a knowledge base you can interact with, ask for key points, etc.

Outline

Install Supercog Agentic Framework
Set the required API keys
Set up ngrok for Webhook Callbacks
Start the Meeting NoteTaker Agent
Send bot to Join Meeting
Ask for info from meeting
Conclusion

Install Supercog Agentic Framework

Currently, it's probably easiest to run Supercog agentic framework from source. We use uv for package management:

Git clone supercog agentic:

git clone https://github.com/supercog-ai/agentic.git

change directory to agentic

cd agentic

Install the project in editable mode with all optional and development tools using uv, a faster alternative to pip

uv pip install -e ".[all,dev]"

Set the required API keys

Set the following API keys to use OPENAI llm and Meetings Bots As A Service to for example, join meetings.

export OPENAI_API_KEY=your_openai_api_key
export MEETING_BAAS_API_KEY=your_meetingbaas_api_key

OR
Adding them to .env file

OPENAI_API_KEY=your_openai_api_key
MEETING_BAAS_API_KEY=your_meetingbaas_api_key

OR
using the agentic secrets set command:

agentic secrets set "OPENAI_API_KEY=your_openai_api_key"
agentic secrets set "MEETING_BAAS_API_KEY=your_meetingbaas_api_key"

You can get your meetingbaas API key from: https://meetingbaas.com/

Set up ngrok for Webhook Callbacks

The Meeting Notetaker Agent needs to receive webhook callbacks from the MeetingBaaS service. Since the agent runs locally, we need to expose it to the internet using a tunneling service like ngrok. Here's how to set it up:

Install ngrok:

# On Ubuntu/Debian
sudo apt update && sudo apt install ngrok

# On macOS
brew install ngrok

# On Windows
# Download from https://ngrok.com/download

Sign up for a free ngrok account at https://ngrok.com/ and get your authtoken
Configure ngrok with your authtoken:

ngrok config add-authtoken your_authtoken_here

Start ngrok to tunnel to your agent's port (default 8086):

ngrok http 8086

Set the DEVTUNNEL_HOST environment variable to your ngrok URL:

export DEVTUNNEL_HOST=https://your-ngrok-url.ngrok.io

OR add it to your .env file:

DEVTUNNEL_HOST=https://your-ngrok-url.ngrok.io

Now when you start the Meeting Notetaker Agent, it will be able to receive webhook callbacks from MeetingBaaS through the ngrok tunnel.

Start the Meeting NoteTaker Agent

Run the following command in the terminal to start the Next.js - based web dashboard interface on http://localhost:3000 (by default) and to
simultaneously launch the meeting notetaker agent server (FastAPI) in the background on port 8086 by default (specified by --agent-path examples/meeting_notetaker.py)

agentic dashboard start --agent-path examples/meeting_notetaker.py

Once you start the web dashboard and the FastAPI web server, you can then go to http://localhost:3000 on your web browser to access the dashboard.

Send Bot to Join Meeting

You can copy your meeting URL and paste with a prompt like the following to send the bot to join your meeting:

Join this meeting: https://meet.google.com/example-url-here=here

The bot will join your meeting, record it until it ends, and provide the data as it goes. Supercog agentic will generate a summary from the meeting transcript and index the summary for the RAG process so that you can ask questions to get information from the meeting and get a response based on the meeting.

Ask for info from meeting

You can ask more questions about the meeting, and Supercog agentic framework is going to give you responses based on the meeting data.

Conclusion

You can see more about Supercog Agentic Framework: https://github.com/supercog-ai/agentic

If you are interested in a No-code meeting Note taker agent, you can check out the Supercog Platform: https://supercog.ai/

Also, read this article for a guide: Straightforward No-code Meeting Notetaker Agent

Docs: https://supercog-ai.github.io/agentic/latest/
Join the Discord: https://discord.gg/EmPGShjmGu

How I Build AI Agents in Seconds🤯

Emmanuel Onwuegbusi — Thu, 17 Oct 2024 15:46:30 +0000

In this article, I will show you how I create AI agents that quickly perform my tasks.

As an example, I will create an AI Agent that scrapes the web for me and provides the summary of the scraped webpage.

Outline:

Sign up on Supercog
Create an Agent
Add tools
Enter query
Conclusion

Sign up on Supercog

Go to Supercog https://app.supercog.ai/register/ and register:

Create an Agent

Once you register, you will be taken to the homepage of Supercog app, from this page we can create an AI Agent.

Agents are systems that use LLMs as reasoning engines to determine which actions to take and the inputs to pass them.

Click the Create Your Own Agent button

You can give your Agent a Name and a custom Agent Instructions

Add tools

Tools extend the agent's capabilities by allowing it to perform specific actions, like accessing an external database, etc

We are going to add Zyte Web Scraping Tool to be able to scrape web pages.

Click the Add Tool button

Locate the Internet Agent Tools category, expand it and click on the "+" button to add Zyte Web Scraping Tool:

Enter query

You can now enter your query to scrape web pages. Go to the chat input box and enter your query.

For me, I entered the following text:
Scrape this webpage for me and provide a summary of the main ideas: https://dev.to/emmakodes/seamlessly-create-jira-issues-from-github-using-natural-language-and-supercog-297m_

I got the following response which is a good summary of the article I wrote explaining how to seamlessly Create Jira Issues from GitHub Using Natural Language and Supercog 👏:

Conclusion

You can easily do the following and more using Supercog:

Integrate seamlessly with various business systems and popular SaaS applications
Help to automate repetitive tasks
Do advanced data analysis
Report generation
File data processing
etc

Get News Updates automatically posted to your Discord using Supercog

Emmanuel Onwuegbusi — Fri, 04 Oct 2024 13:44:39 +0000

In this article, we will learn to get News updates on any topic automatically posted to your Discord channel using Supercog.

Supercog is an advanced AI platform that transforms productivity by connecting directly to your business systems and automating tasks. It enables real-time data analysis, generates insights, and empowers teams to create customizable AI solutions tailored to their needs.

Outline

Get your Discord Channel Webhook URL
Sign up on Supercog
Create an agent
Add Tools
Customize the Agent Instructions
Enter Query
Conclusion

You can watch the video tutorial:

Get your Discord Channel Webhook URL

First, you'll need to create a webhook for the specific channel you want to post to.

In Discord:

Go to the channel settings (Edit Channel) :

Click on "Integrations"
Create "New Webhook" or use the existing webhook
Copy the webhook URL

Sign up on Supercog

Go to Supercog https://app.supercog.ai/register/ and register:

Create an agent

Agents are systems that use LLMs as reasoning engines to determine which actions to take and the inputs to pass them.

Click the Morning News Report agent tab to start chatting quickly or Create a New Agent for the task you want to accomplish. Click on the Morning News Report agent for this article.

Add Tools

Tools extend the agent's capabilities by allowing it to perform specific actions, like accessing an external database, etc

We already have most of the tools we need to get News updates in the Morning News Report agent. We are using Tavily Web Search and Web Browsing (Scale SERP) to perform searches and get the News. Text to Speech tool to transform text into high-quality, real-time speech with minimal latency.

We are going to add Discord Tool to be able to send the News to your Discord channel.
Add Discord Tool

Click on the Add Tool button

Click the Connectors dropdown
Scroll down to the Discord tool

Click on the "+" button to add the Discord tool. You will see the New Connection: Discord modal. Enter the Discord Webhook URL you created earlier then click Save:

Customize the Agent Instructions

If you want, you can customize the agent instructions to fit your needs. In my case, I will leave it as is since I want to get news about AI.

Enter Query

You can now enter your query to get the News update on any topic and post to your Discord channel. Go to the chat input box and enter your query.

For me, I entered the following text:

and I got the following output:

I can then enter the following text in the chatbox to send the News update to my discord channel:

And I get the following output in my discord channel:

Awesome🎉

Conclusion

You can easily do the following and more using Supercog:

Integrate seamlessly with various business systems and popular SaaS applications
help to automate repetitive tasks
Do advanced data analysis
report generation
file data processing etc

Seamlessly Create Jira Issues from GitHub Using Natural Language and Supercog

Emmanuel Onwuegbusi — Sat, 28 Sep 2024 19:27:18 +0000

In this article, we will learn to create Jira issues from GitHub using Natural language and Supercog.

Outline

Get your Jira token
Get your GitHub token
Sign up on Supercog
Create an Agent or Click Supercog
Add tools
Enter query
Conclusion

You can watch the video tutorial:

Get your Jira token

Go to Your Profile and Settings tab then click on Manage account. From the nav links, click on Security then scroll and you will find API tokens section. You can then click on Create and manage API tokens to Create your Jira API token

Get your GitHub token

Go to https://github.com/settings/tokens?type=beta to generate your GitHub personal access token

Sign up on Supercog

Go to Supercog's page https://app.supercog.ai/ and sign up:

Create an Agent or Click Supercog

Click the Supercog tab to start chatting quickly or Create a New Agent for the task you want to accomplish. We will click on the Supercog tab for this article to chat quickly.

Add tools

From the right, click on the Add Tool button:

From there, click on the Connectors tab, you will see JIRA as an option. Click on the '+' button then Make connection:
Once you click on the Make connection button, you will see New Connection: JIRA modal:

Type in your:

Jira Username: which is your Jira email address
Jira Token: The token you generated
Jira Url: Your Jira Project Url. It can be something like: https://myproject.atlassian.net/

Then you click Save

Add GitHub tool: Still Click on the Connectors Tools Tab. Click on the '+' button then Make connection. You will see the following modal:

Put in your generated GitHub access token, then click Save

Enter query

We can now start chatting with our GitHub and Jira repos and projects. You can ask any question you want.

Since, we intend to create Jira issues or task from GitHub using Natural language. In the chat box, I can get details of an issue using the following prompt:

query: please show me issue #7 of emmakodes talk-to-your-data repo

and I got the following response:

and then I can easily say in the chat:

query: Now create a jira issue in the AS project from that content

AS is my Jira project_key

and I got the following output:

So Cool🎉

I can go to my Jira Project to see the issue.

Yay👏 We have created the issue in our Jira project:

Conclusion

You can easily do the following and more using Supercog:

Integrate seamlessly with various business systems and popular SaaS applications
help to automate repetitive tasks
Do advanced data analysis
report generation
file data processing etc

Chat with your Supabase Database using Natural language and Supercog

Emmanuel Onwuegbusi — Sat, 21 Sep 2024 06:06:53 +0000

This article will teach you how to interact with your Supabase database using natural language through Supercog.

Outline

Get your Supabase Database URL
Sign up on Supercog
Create an Agent or Click Supercog
Add tools
Enter query
Conclusion

Get your Supabase Database URL

Go to your supabase Project Settings -> Database -> Connection string
Copy your connection string. You will need it to connect to your supabase database.

Sign up on Supercog

Go to Supercog's page https://app.supercog.ai/ and sign up:

Create an Agent or click Supercog

Click the Supercog tab to start chatting quickly or Create a New Agent for the task you want to accomplish. We will click on the Supercog tab for this article to chat quickly.

Add tools

From the right, click on the Add Tool button:

From there, click on the Connectors tab, you will see Database as an option. Click on the '+' button then Make a connection:

Once you click on the Make connection button, you will be shown the New Connection: Database pop up:

You will need to put in the connection string you copied from supabase to The Connection URL for the database input box, then you click Save.

Add The Charting tools. Click on Dev Tools Tab, then click the '+' button to add the Charting tool. We will use this to create our plot.

Enter query

We can now start chatting with our connected supabase database. You can ask any question you want about your database.

For me, I entered the following prompt:
What were the top 3 products sold in the month of August? Make a plot of the result. Use the product_data table and sales_data table but first get their schema

since I have a product table and a sales table. I wanted to know my top 3 products sold in August and also see the plot😊 Super interesting, right?🚀:

I got the following output. It shows my top 3 products sold in the month of August and also the plot:

Conclusion

Interacting with your database is just one of those things you can do with supercog. You can also:

Automate Repetitive Tasks: Set up agents to handle routine processes on a scheduled or on-demand basis.
Connect to various business systems like HubSpot, Postgres, and Jira for seamless data flow
Do advanced Data Analysis
Generate Reports & Insights
Connect to Popular SaaS Applications: Utilize integrations with popular applications for enhanced functionality.
Process File Data: Read and process various file types to extract and utilize relevant information. etc.

Create your own Custom LLM Agent Using Open Source Models (llama3.1)

Emmanuel Onwuegbusi — Fri, 16 Aug 2024 18:30:26 +0000

In this article, we will learn how to create a custom agent that uses an open source llm (llama3.1) that runs locally on our PC. We will also use Ollama and LangChain.

Outline

Install Ollama
Pull model
Serve model
Create a new folder, open it with a code editor
Create and activate Virtual environment
Install langchain langchain-ollama
Build Custom agent with open source model in Python
Conclusion

Install Ollama

Follow the instructions based on your OS type in its GitHub README to install Ollama:

https://github.com/ollama/ollama

I am on a Linux-based PC, so I am going to run the following command in my terminal:

curl -fsSL https://ollama.com/install.sh | sh

Pull model

Fetch the available LLM model via the following command:

ollama pull llama3.1

This will download the default tagged version of the model. Typically, the default points to the latest, smallest sized-parameter model. In this case, it will be llama3.1:8b model.

To download another version of the model, you can go to: https://ollama.com/library/llama3.1 and select the version to install, and then run the ollama pull command with the model and its version number. Example: ollama pull llama3.1:70b

On Mac, the models will be downloaded to ~/.ollama/models

On Linux (or WSL), the models will be stored at /usr/share/ollama/.ollama/models

Serve model

Run the following command to start ollama without running the desktop application.

ollama serve

All models are automatically served on localhost:11434

Create a new folder, open it with a code editor

Create a new folder on your computer and then open it with a code editor like VS Code.

Create and activate Virtual environment

Open the terminal. Use the following command to create a virtual environment .venv and activate it:

python3 -m venv .venv

source .venv/bin/activate

Install langchain langchain-ollama

Run the following command to install langchain and langchain-ollama:

pip install -U langchain langchain-ollama

The above command will install or upgrade the LangChain and LangChain-Ollama packages in Python. The -U flag ensures that the latest versions of these packages are installed, replacing any older versions that may already be present.

Build Custom agent with open source model in Python

Create a Python file for example: main.py and add the following code:

from langchain_ollama import ChatOllama
from langchain.agents import tool
from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
from langchain.agents.format_scratchpad.openai_tools import (
    format_to_openai_tool_messages,
)
from langchain.agents import AgentExecutor
from langchain.agents.output_parsers.openai_tools import OpenAIToolsAgentOutputParser


llm = ChatOllama(
            model="llama3.1",
            temperature=0,
            verbose=True
        )

@tool
def get_word_length(word: str) -> int:
    """Returns the length of a word."""
    return len(word)


tools = [get_word_length]



prompt = ChatPromptTemplate.from_messages(
            [
                (
                    "system",
                    "You are very powerful assistant",
                ),
                ("user", "{input}"),
                MessagesPlaceholder(variable_name="agent_scratchpad"),
            ]
        )

llm_with_tools = llm.bind_tools(tools)

agent = (
    {
        "input": lambda x: x["input"],
        "agent_scratchpad": lambda x: format_to_openai_tool_messages(
            x["intermediate_steps"]
        ),
    }
    | prompt
    | llm_with_tools
    | OpenAIToolsAgentOutputParser()
)

# Create an agent executor by passing in the agent and tools
agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True)
result = agent_executor.invoke({"input": "How many letters in the word educa"})

if result:
    print(f"[Output] --> {result['output']}")
else:
    print('There are no result..')

The above code snippet sets up a LangChain agent using the ChatOllama model (llama3.1) to process user input and utilize a custom tool that calculates word length. It defines a prompt template for the agent, binds the tool to the language model, and constructs an agent that processes input and formats intermediate steps. Finally, it creates an AgentExecutor to invoke the agent with a specific input. We pass a simple question to ask "How many letters in the word educa" and then we print the output or indicate if no result was found.

When we run, we get the following result:

> Entering new AgentExecutor chain...

Invoking: `get_word_length` with `{'word': 'educa'}`


5The word "educa" has 5 letters.

> Finished chain.
[Output] --> The word "educa" has 5 letters.

You see the agent used the model (llama3.1) to call the tool correctly to get the count of letters in the word.

Conclusion

Thanks for reading.

Check Ollama repo here: https://github.com/ollama/ollama

How to Run Llama-3.1🦙 locally in Python using Ollama, LangChain

Emmanuel Onwuegbusi — Fri, 02 Aug 2024 16:03:23 +0000

In this article, we will learn how to run Llama-3.1 model locally on our PC using Ollama and LangChain in Python

Outline

Install Ollama
Pull model
Serve model
Create a new folder, open it with a code editor
Create and activate Virtual environment
Install langchain-ollama
Run Ollama with model in Python
Conclusion

Install Ollama

Follow the instructions based on your OS type in its GitHub README to install Ollama:

https://github.com/ollama/ollama

I am on a Linux-based PC, so I am going to run the following command in my terminal:

curl -fsSL https://ollama.com/install.sh | sh

Pull model

Fetch the available LLM model via the following command:

ollama pull llama3.1

This will download the default tagged version of the model. Typically, the default points to the latest, smallest sized-parameter model. In this case, it will be llama3.1:8b model.

On Mac, the models will be downloaded to ~/.ollama/models

On Linux (or WSL), the models will be stored at /usr/share/ollama/.ollama/models

Serve model

Run the following command to start ollama without running the desktop application.

ollama serve

All models are automatically served on localhost:11434

Create a new folder, open it with a code editor

Create a new folder on your computer and then open it with a code editor like VS Code.

Create and activate Virtual environment

Open the terminal. Use the following command to create a virtual environment .venv and activate it:

python3 -m venv .venv

source .venv/bin/activate

Install langchain-ollama

Run the following command to install langchain-ollama:

pip install -U langchain-ollama

The above command will install or upgrade the LangChain Ollama package in Python. This package allows users to integrate and interact with Ollama models, which are open-source large language models, within the LangChain framework. The -U flag ensures that the package is upgraded to the latest version if it is already installed.

Run Ollama with model in Python

Create a Python file for example: main.py and add the following code:

from langchain_ollama import OllamaLLM

llm = OllamaLLM(model="llama3.1")

response = llm.invoke("The first man on the moon was ...")
print(response)

The above code imports the OllamaLLM class from the LangChain library and initializes an instance of the language model "llama3.1". We pass a prompt about the first man on the moon, and store the generated response in the variable response. When we run the above code we get the following response from the model:

...Neil Armstrong!

On July 20, 1969, Neil Armstrong became the first person to set foot on the lunar surface during the Apollo 11 mission. As he stepped off the lunar module Eagle and onto the moon's surface, he famously declared: "That's one small step for man, one giant leap for mankind."

Conclusion

Thanks for reading.
You can view the Ollama documentation for more commands.

Setup User Auth for your Reflex app using local_auth

Emmanuel Onwuegbusi — Tue, 31 Oct 2023 21:00:18 +0000

In this article, we will configure user authentication for your reflex app by doing everything locally. The user will be able to register, login, and logout.

This article is based on the local_auth example on reflex_examples GitHub page: https://github.com/reflex-dev/reflex-examples/tree/main/local_auth

Outline

Create a new folder, open it with a code editor
Create a virtual environment and activate
Install requirements
reflex setup
local_auth.py
auth_session.py
base_state.py
login.py
registration.py
user.py
run app
conclusion

Create a new folder, open it with a code editor

Create a new folder and name it local_auth then open it with a code editor like VS Code.

Create a virtual environment and activate

Open the terminal. Use the following command to create a virtual environment .venv and activate it:

python3 -m venv .venv

source .venv/bin/activate

Install requirements

We will install reflex to build the app, passlib to simplify the process of securely hashing and managing passwords, and bcrypt- the specific hashing algorithm used to hash passwords securely.
Run the following command in the terminal:

pip install reflex==0.2.9 passlib==1.7.4 bcrypt==4.0.1

reflex setup

Now, we need to create the project using reflex. Run the following command to initialize the template app in local_auth directory.

reflex init

local_auth.py

We will build the homepage of the app. Go to the local_auth subdirectory and open the local_auth.py file. Add the following code to it:

"""Main app module to demo local authentication."""
import reflex as rx

from .base_state import State
from .login import require_login
from .registration import registration_page as registration_page


def index() -> rx.Component:
    """Render the index page.

    Returns:
        A reflex component.
    """
    return rx.fragment(
        rx.color_mode_button(rx.color_mode_icon(), float="right"),
        rx.vstack(
            rx.heading("Welcome to my homepage!", font_size="2em"),
            rx.link("Protected Page", href="/protected"),
            spacing="1.5em",
            padding_top="10%",
        ),
    )


@require_login
def protected() -> rx.Component:
    """Render a protected page.

    The `require_login` decorator will redirect to the login page if the user is
    not authenticated.

    Returns:
        A reflex component.
    """
    return rx.vstack(
        rx.heading(
            "Protected Page for ", State.authenticated_user.username, font_size="2em"
        ),
        rx.link("Home", href="/"),
        rx.link("Logout", href="/", on_click=State.do_logout),
    )


app = rx.App()
app.add_page(index)
app.add_page(protected)
app.compile()

index(): This function defines the behavior for rendering the application's index page. It returns a Reflex component, representing part of the web page's user interface. The index page includes a color mode button, a greeting message, a link to the protected page, and styling for spacing and padding.

protected(): This function is responsible for rendering a protected page that requires user authentication to access. It is decorated with @require_login, ensuring that only authenticated users can view this page. The protected page displays a greeting message personalized for the authenticated user, links to the home page, and provides an option to log out.
The above code renders the following page:

auth_session.py

Create a new file auth_session.py in the local_auth subdirectory and add the following code.

import datetime

from sqlmodel import Column, DateTime, Field, func

import reflex as rx


class AuthSession(
    rx.Model,
    table=True,  # type: ignore
):
    """Correlate a session_id with an arbitrary user_id."""

    user_id: int = Field(index=True, nullable=False)
    session_id: str = Field(unique=True, index=True, nullable=False)
    expiration: datetime.datetime = Field(
        sa_column=Column(DateTime(timezone=True), server_default=func.now()),
        nullable=False,
    )

In this code, an AuthSession class is defined. The purpose of this class is to manage authentication sessions.

The user_id attribute is defined as an integer field, marked as indexed, and non-nullable. It is intended to store the user ID associated with a session.

The session_id attribute is a string field, marked as unique, indexed, and non-nullable. This field ensures that each session has a distinct identifier.

The expiration attribute is of type datetime.datetime. It is defined using the Field class, associated with a SQL model column represented by a Column instance with a datetime type and timezone set to True. The server_default parameter is set to func.now(), which means the default value will be the current time when a new session is created. This field is also non-nullable, ensuring that each session has an expiration time.

base_state.py

Create a new file base_state.py in the local_auth subdirectory and add the following code:

import datetime

from sqlmodel import select

import reflex as rx

from .auth_session import AuthSession
from .user import User


AUTH_TOKEN_LOCAL_STORAGE_KEY = "_auth_tokens"
DEFAULT_AUTH_SESSION_EXPIRATION_DELTA = datetime.timedelta(days=7)


class State(rx.State):
    # The auth_token is stored in local storage to persist across tab and browser sessions.
    auth_token: str = rx.LocalStorage(name=AUTH_TOKEN_LOCAL_STORAGE_KEY)

    @rx.cached_var
    def authenticated_user(self) -> User:
        """The currently authenticated user, or a dummy user if not authenticated.

        Returns:
            A User instance with id=-1 if not authenticated, or the User instance
            corresponding to the currently authenticated user.
        """
        with rx.session() as session:
            result = session.exec(
                select(User, AuthSession).where(
                    AuthSession.session_id == self.auth_token,
                    AuthSession.expiration
                    >= datetime.datetime.now(datetime.timezone.utc),
                    User.id == AuthSession.user_id,
                ),
            ).first()
            if result:
                user, session = result
                return user
        return User(id=-1)  # type: ignore

    @rx.cached_var
    def is_authenticated(self) -> bool:
        """Whether the current user is authenticated.

        Returns:
            True if the authenticated user has a positive user ID, False otherwise.
        """
        return self.authenticated_user.id >= 0

    def do_logout(self) -> None:
        """Destroy AuthSessions associated with the auth_token."""
        with rx.session() as session:
            for auth_session in session.exec(
                AuthSession.select.where(AuthSession.session_id == self.auth_token)
            ).all():
                session.delete(auth_session)
            session.commit()
        self.auth_token = self.auth_token

    def _login(
        self,
        user_id: int,
        expiration_delta: datetime.timedelta = DEFAULT_AUTH_SESSION_EXPIRATION_DELTA,
    ) -> None:
        """Create an AuthSession for the given user_id.

        If the auth_token is already associated with an AuthSession, it will be
        logged out first.

        Args:
            user_id: The user ID to associate with the AuthSession.
            expiration_delta: The amount of time before the AuthSession expires.
        """
        if self.is_authenticated:
            self.do_logout()
        if user_id < 0:
            return
        self.auth_token = self.auth_token or self.get_token()
        with rx.session() as session:
            session.add(
                AuthSession(  # type: ignore
                    user_id=user_id,
                    session_id=self.auth_token,
                    expiration=datetime.datetime.now(datetime.timezone.utc)
                    + expiration_delta,
                )
            )
            session.commit()

The above code defines a class called State, which extends the rx.State class. It includes several functions and properties related to authentication and user sessions.

auth_token: This property stores the authentication token in the local storage to persist it across different browser sessions.

authenticated_user(self): This function returns the currently authenticated user or a dummy user if not authenticated. It uses the rx.session() context manager to execute a SQL query that selects a User and AuthSession where the AuthSession matches the auth_token, has not expired, and corresponds to a user. If a result is found, it returns the user; otherwise, it returns a dummy user.

is_authenticated(self): This function returns a boolean indicating whether the current user is authenticated. It checks if the user's ID is greater than or equal to 0, and returns True if authenticated or False if not.

do_logout(self): This function is used to destroy AuthSessions associated with the auth_token. It begins a session and deletes all AuthSessions with a matching session_id, effectively logging the user out.

_login(self, user_id, expiration_delta): This is a private method used to create an AuthSession for a given user. If the user is already authenticated, it calls do_logout() to log out the current user. It then creates a new AuthSession with the provided user ID and sets an expiration time based on the expiration_delta (defaulting to 7 days). This new session is associated with the auth_token, which is generated if it doesn't exist. The new AuthSession is added to the database and committed within a session context.

login.py

Create a new file login.py in the local_auth subdirectory and add the following code:

"""Login page and authentication logic."""
import reflex as rx

from .base_state import State
from .user import User


LOGIN_ROUTE = "/login"
REGISTER_ROUTE = "/register"


class LoginState(State):
    """Handle login form submission and redirect to proper routes after authentication."""

    error_message: str = ""
    redirect_to: str = ""

    def on_submit(self, form_data) -> rx.event.EventSpec:
        """Handle login form on_submit.

        Args:
            form_data: A dict of form fields and values.
        """
        self.error_message = ""
        username = form_data["username"]
        password = form_data["password"]
        with rx.session() as session:
            user = session.exec(
                User.select.where(User.username == username)
            ).one_or_none()
        if user is not None and not user.enabled:
            self.error_message = "This account is disabled."
            return rx.set_value("password", "")
        if user is None or not user.verify(password):
            self.error_message = "There was a problem logging in, please try again."
            return rx.set_value("password", "")
        if (
            user is not None
            and user.id is not None
            and user.enabled
            and user.verify(password)
        ):
            # mark the user as logged in
            self._login(user.id)
        self.error_message = ""
        return LoginState.redir()  # type: ignore

    def redir(self) -> rx.event.EventSpec | None:
        """Redirect to the redirect_to route if logged in, or to the login page if not."""
        if not self.is_hydrated:
            # wait until after hydration to ensure auth_token is known
            return LoginState.redir()  # type: ignore
        page = self.get_current_page()
        if not self.is_authenticated and page != LOGIN_ROUTE:
            self.redirect_to = page
            return rx.redirect(LOGIN_ROUTE)
        elif page == LOGIN_ROUTE:
            return rx.redirect(self.redirect_to or "/")


@rx.page(route=LOGIN_ROUTE)
def login_page() -> rx.Component:
    """Render the login page.

    Returns:
        A reflex component.
    """
    login_form = rx.form(
        rx.input(placeholder="username", id="username"),
        rx.password(placeholder="password", id="password"),
        rx.button("Login", type_="submit"),
        width="80vw",
        on_submit=LoginState.on_submit,
    )

    return rx.fragment(
        rx.cond(
            LoginState.is_hydrated,  # type: ignore
            rx.vstack(
                rx.cond(  # conditionally show error messages
                    LoginState.error_message != "",
                    rx.text(LoginState.error_message),
                ),
                login_form,
                rx.link("Register", href=REGISTER_ROUTE),
                padding_top="10vh",
            ),
        )
    )


def require_login(page: rx.app.ComponentCallable) -> rx.app.ComponentCallable:
    """Decorator to require authentication before rendering a page.

    If the user is not authenticated, then redirect to the login page.

    Args:
        page: The page to wrap.

    Returns:
        The wrapped page component.
    """

    def protected_page():
        return rx.fragment(
            rx.cond(
                State.is_hydrated & State.is_authenticated,  # type: ignore
                page(),
                rx.center(
                    # When this spinner mounts, it will redirect to the login page
                    rx.spinner(on_mount=LoginState.redir),
                ),
            )
        )

    protected_page.__name__ = page.__name__
    return protected_page

The above code defines a login page and authentication logic. It includes a LoginState class that handles login form submissions, checks user credentials, and manages redirection upon successful login. Additionally, it provides a decorator function called require_login to protect certain pages, ensuring they can only be accessed by authenticated users and redirecting unauthenticated users to the login page.
The above code renders the following page:

registration.py

Create a new file registration.py in the local_auth subdirectory and add the following code:

"""New user registration form and validation logic."""
from __future__ import annotations

import asyncio
from collections.abc import AsyncGenerator

import reflex as rx

from .base_state import State
from .login import LOGIN_ROUTE, REGISTER_ROUTE
from .user import User


class RegistrationState(State):
    """Handle registration form submission and redirect to login page after registration."""

    success: bool = False
    error_message: str = ""

    async def handle_registration(
        self, form_data
    ) -> AsyncGenerator[rx.event.EventSpec | list[rx.event.EventSpec] | None, None]:
        """Handle registration form on_submit.

        Set error_message appropriately based on validation results.

        Args:
            form_data: A dict of form fields and values.
        """
        with rx.session() as session:
            username = form_data["username"]
            if not username:
                self.error_message = "Username cannot be empty"
                yield rx.set_focus("username")
                return
            existing_user = session.exec(
                User.select.where(User.username == username)
            ).one_or_none()
            if existing_user is not None:
                self.error_message = (
                    f"Username {username} is already registered. Try a different name"
                )
                yield [rx.set_value("username", ""), rx.set_focus("username")]
                return
            password = form_data["password"]
            if not password:
                self.error_message = "Password cannot be empty"
                yield rx.set_focus("password")
                return
            if password != form_data["confirm_password"]:
                self.error_message = "Passwords do not match"
                yield [
                    rx.set_value("confirm_password", ""),
                    rx.set_focus("confirm_password"),
                ]
                return
            # Create the new user and add it to the database.
            new_user = User()  # type: ignore
            new_user.username = username
            new_user.password_hash = User.hash_password(password)
            new_user.enabled = True
            session.add(new_user)
            session.commit()
        # Set success and redirect to login page after a brief delay.
        self.error_message = ""
        self.success = True
        yield
        await asyncio.sleep(0.5)
        yield [rx.redirect(LOGIN_ROUTE), RegistrationState.set_success(False)]


@rx.page(route=REGISTER_ROUTE)
def registration_page() -> rx.Component:
    """Render the registration page.

    Returns:
        A reflex component.
    """
    register_form = rx.form(
        rx.input(placeholder="username", id="username"),
        rx.password(placeholder="password", id="password"),
        rx.password(placeholder="confirm", id="confirm_password"),
        rx.button("Register", type_="submit"),
        width="80vw",
        on_submit=RegistrationState.handle_registration,
    )
    return rx.fragment(
        rx.cond(
            RegistrationState.success,
            rx.vstack(
                rx.text("Registration successful!"),
                rx.spinner(),
            ),
            rx.vstack(
                rx.cond(  # conditionally show error messages
                    RegistrationState.error_message != "",
                    rx.text(RegistrationState.error_message),
                ),
                register_form,
                padding_top="10vh",
            ),
        )
    )

The above code is responsible for creating a user registration form and implementing the validation logic for user registration.

RegistrationState class handles user registration. It includes properties for tracking the success of the registration and error messages.

The handle_registration method asynchronously processes the registration form submission. It validates the provided username and password, checks for existing usernames in the database, ensures the passwords match, and then creates a new user and adds it to the database if all checks pass. After a brief delay, it sets the success flag and redirects to the login page.

The registration_page function is a reflex page that renders the user registration form. It includes form fields for the username, password, and password confirmation, as well as a registration button. The form submission is handled by the handle_registration method from RegistrationState.

The page dynamically displays different content based on the registration's success or failure. If registration is successful, it displays a success message and a spinner. If there are validation errors or the registration has not yet succeeded, it shows error messages, the registration form, and adds some padding for spacing.

The above code renders the following page:

user.py

Create a new file user.py in the local_auth subdirectory and add the following code:

from passlib.context import CryptContext
from sqlmodel import Field

import reflex as rx

pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")


class User(
    rx.Model,
    table=True,  # type: ignore
):
    """A local User model with bcrypt password hashing."""

    username: str = Field(unique=True, nullable=False, index=True)
    password_hash: str = Field(nullable=False)
    enabled: bool = False

    @staticmethod
    def hash_password(secret: str) -> str:
        """Hash the secret using bcrypt.

        Args:
            secret: The password to hash.

        Returns:
            The hashed password.
        """
        return pwd_context.hash(secret)

    def verify(self, secret: str) -> bool:
        """Validate the user's password.

        Args:
            secret: The password to check.

        Returns:
            True if the hashed secret matches this user's password_hash.
        """
        return pwd_context.verify(
            secret,
            self.password_hash,
        )

The above code defines a User class for managing user data. It uses the bcrypt algorithm for securely hashing and verifying user passwords. The User class has fields for usernames, password hashes, and an "enabled" status, along with methods for hashing and verifying passwords using bcrypt. This code provides a foundation for securely handling user authentication and password storage in the application.

run app

Run the following commands in the terminal to initialize alembic and create a migration script with the current schema, to generate a script in the alembic/versions directory that will update the database schema and apply migration scripts to bring the database up to date respectively:

reflex db init

reflex db makemigrations --message 'something changed'

reflex db migrate

to start the app run the following:

reflex run

You should see an interface as follows when you go to http://localhost:3000/

When you click on the protected page link, it takes you to the login page. From there, you can either log in or register. If login is successful then you will be able to access the protected page and from there you can logout.

conclusion

You can access the code from reflex local_auth example repo: https://github.com/reflex-dev/reflex-examples/tree/main/local_auth