DEV Community: Kevin Piacentini

Authenticate users in your React SPA with Kobble

Kevin Piacentini — Mon, 08 Apr 2024 08:09:10 +0000

Introduction

In this tutorial, we'll show you how to add authentication to your React SPA with any provider of your choice using Kobble.

It's so simple that it won't take more than 10 minutes to get setup.

Demo

Here's a demo of what we're going to build:

Demo Page

Here are the features available in this basic single page app:

Users can sign un and sign in
We can view their profile information
Get an access token
Get an id token and more.

Almost everything is handled by Kobble, so you don't have to bother with authentication details.

What's Kobble?

Kobble.io is a monetization platform as a service. It provides a customer portal as a service with built-in Authentication, price tables, quota management and more.

Here we're going to use their authentication system but you will be able to go further later!

Create an application on Kobble

Let's get into it!

Sign in for free at Kobble
Create a new Project
Go to Applications and create an application
In the Redirect URI section, add http://localhost:3000/callback

The callback URL must match your React app. We'll create that callback page later on.

Select your authentication providers

Kobble has already created a customer portal for us. But now, we need to activate the authentication providers we want.

Go to Authentication and activate the providers of your choice (it's straightforward, but you can read the docs if needed).
That's it.

Your Customer Portal should be up and running already at https://[your-project].portal.kobble.io and you can customize it on the Customer Portal section of your dashboard.

Setting up your React app

Here I'm assuming you already have a React app up and running.

If you don't, maybe it's worth starting with the full code we provide at the end of this tutorial.

Install Kobble SDK

In your terminal, run the following command:

npm i -S @kobbleio/auth-spa-js

Then, create a file to init the SDK:

// src/kobble/index.ts

import { createKobbleClient } from '@kobbleio/auth-spa-js'

export const kobbleClient = createKobbleClient({
  domain: import.meta.env.VITE_KOBBLE_DOMAIN,
  clientId: import.meta.env.VITE_KOBBLE_CLIENT_ID,
  redirectUri: import.meta.env.VITE_KOBBLE_REDIRECT_URI
})

Replace the environment variables with the values provided in the Kobble Application we created earlier.

Implement the login

The OAuth flow will work as follows:

the user clicks on the login button
he's redirected to your Kobble customer portal
once logged in, he's redirected back to your callback URL to complete the OAuth flow

Kobble provides everything we need to handle this.

Handle login

To handle login, you only have to use the loginWithRedirect() method provided by our Kobble instance.

You just have to create a button anywhere on your app that looks like this:

// import our kobble instance
import { kobbleClient } from "../kobble";

// ...
// define our login handler
const login = () => {
    kobbleClient.loginWithRedirect();
};

// ...
// rendering the button

<button onClick={login}>Login</button>

Handle the callback

To make sure our flow can be completed, let's create a callback page and use the handleRedirectCallback() method when it's first loaded.

// Inside your Callback page component

    const navigate = useNavigate();

    useEffect(() => {
        const authenticate = async () => {
            try {
                await kobbleClient.handleRedirectCallback();
                navigate('/', {
                    replace: true,
                });
            } catch (e: any) {
                console.log(e.message);
                setError(e.message);
            }
        };

        authenticate();
    }, [navigate]);

// Rest of your code...

Make sure your callback page URL matches the Redirect URI you previously used.

Listen to the user state changes

That's it. Your React app is ready to authenticate your users.

Now, you can listen to the user's state using the following method:

/**
 * This callback is triggered every time the user object changes:
 * - on login
 * - on logout
 * - on access token refreshed
 */
kobbleClient.onAuthStateChanged((data) => {
  console.log('User', data.user)
})

Other methods

The Kobble client also exposes a lot of utility functions, such as:

logout()
getUser()
getIdToken()
getAccessToken()

These functions are especially useful to validate the user is authenticated when dealing with your backend.

Conclusion

In under 10 minutes, we added authentication to our React application using Kobble.io.

Demo website:

https://kobble-react-auth-example.vercel.app

Full Code:

https://github.com/kobble-io/react-auth-example

Thank you!

If you liked this tutorial, feel free to smash the like button and react in the comments below :)

The easiest way to authenticate users with Vue.js

Kevin Piacentini — Fri, 05 Apr 2024 23:13:42 +0000

Introduction

A wise man once said:

The easiest way to code authentication is not to code it.

Well, maybe I was that man. But as a matter of fact, it's true.

The result (in 10 minutes)

First, here's what we're going to build:

Demo Page

As you can see, it's a simple Single Page Application built with Vue.js where our users can sign up / sign in with a few clicks.

Once logged in, we can access various methods to fetch the user's profile, user's access token and more.

Only 10 minutes? What's the catch?

There is no catch. In this tutorial, we're going to use Kobble.io. This service provides a full-featured customer portal as a service that you can use from any website.

This portal includes authentication, monetization, rate-limiting, and more advanced features.

TL;DR: We'll save hours of tedious work by implementing their Auth SPA SDK with a few lines of code.

Create an application on Kobble

Sign in for free at Kobble
Create a new Project
Go to Applications and create an application
In the Redirect URI section, add http://localhost:3000/callback

The callback URL must match your Vue.js app. We'll create that callback page later on.

Select your authentication providers

Kobble has already created a customer portal for us. But now, we need to activate the authentication providers we want.

Go to Authentication and activate the providers of your choice (it's straightforward, but you can read their docs if needed).
That's it.

If you've configured everything correctly, your customer portal should be up and running already at https://[your-project].portal.kobble.io and you can customize it on the Customer Portal section of your dashboard.

Setting up your Vue.js app

Quick note

Here I'm assuming you already have a Vue.JS app up and running. If you don't the easiest way to get started is probably to use a Vite template by running:



npm create vite@latest my-vue-app -- --template vue-ts

Install Kobble SDK

In your terminal, run the following command:



npm i -S @kobbleio/auth-spa-js

Then, create a file to init the SDK:



// src/kobble/index.ts

import { createKobbleClient } from '@kobbleio/auth-spa-js'

export const kobbleClient = createKobbleClient({
  domain: import.meta.env.VITE_KOBBLE_DOMAIN,
  clientId: import.meta.env.VITE_KOBBLE_CLIENT_ID,
  redirectUri: import.meta.env.VITE_KOBBLE_REDIRECT_URI
})

Replace the environment variables with the values provided in the Kobble Application we created earlier.

Implement the login

The OAuth flow will work as follows:

the user clicks on a login button
he's redirected to your customer portal
once logged-in he's redirected back to your callback URL to complete the OAuth flow

Kobble provides everything we need to handle this.

Handle login

To handle login, you only have to use the loginWithRedirect() method provided by our Kobble instance.

You just have to create a button anywhere on your app that looks like this:



<script lang="ts">
// We import the kobbleClient we init before
import { kobbleClient } from '@/kobble';

const login = () => {
   kobbleClient.loginWithRedirect();
};
</script>

<template>
    <button @click="login">Login</button>
</template>

Handle the callback

To make sure our flow can be completed, let's create a callback page and use the handleRedirectCallback() method.



<script lang="ts">
import { kobbleClient } from '@/kobble'

export default {
  async mounted() {
    try {
      await kobbleClient.handleRedirectCallback()
      this.$router.replace({ name: 'home' })
    } catch (e: any) {
      console.log('Error while authenticating', e.message)
    }
  }
}
</script>

<template>
  <div>
    <h1>Authenticating...</h1>
  </div>
</template>

Make sure your callback page URL matches the Redirect URI you previously used.

Listen to the user state changes

That's it. Your vue.js app is ready to authenticate your users.

Now, you can listen to the user's state using the following method:



/**


This callback is triggered every time the user object changes:
- on login
- on logout
- on access token refreshed
*/
kobbleClient.onAuthStateChanged((data) => {
console.log('User', data.user)
})

Other methods

The Kobble client also exposes a lot of utility functions, such as:

logout()
getIdToken()
getAccessToken()

Conclusion

In under 10 minutes, we added authentication to our vuejs application using Kobble.io.

Demo website:

https://vue-auth-example.vercel.app

Full Code:

https://github.com/kobble-io/vue-auth-example

Thank you!

If you liked this tutorial, feel free to smash the like button and react in the comments below :)

Chat with your PDF: Build a PDF Analyst with LlamaIndex and AgentLabs

Kevin Piacentini — Tue, 31 Oct 2023 19:33:28 +0000

In this tutorial, we'll learn how to use some basic features of LlamaIndex to create your PDF Document Analyst.

We'll use the AgentLabs interface to interact with our analysts, uploading documents and asking questions about them.

The tools we'll use

LlamaIndex is a simple, flexible data framework for connecting custom data sources to large language models.

It makes it easy to build Llm backend applications.

AgentLabs will allow us to get a frontend in no time using either Python or TypeScript in our backend (here we'll use Python).

What we are building

Getting started

As usual, let's install all the dependencies we'll need.

If you're using pip:

pip install pypdf langchain llama-index agentlabs-sdk

If you're using poetry:

poetry add pypdf langchain llama-index agentlabs-sdk

And now import them all:

from langchain.llms import OpenAI

from llama_index import SimpleDirectoryReader, ServiceContext, VectorStoreIndex
from llama_index.node_parser import SimpleNodeParser
from llama_index import set_global_service_context
from llama_index.response.pprint_utils import pprint_response
from llama_index.tools import QueryEngineTool, ToolMetadata
from llama_index.query_engine import SubQuestionQueryEngine

from agentlabs.chat import IncomingChatMessage, MessageAttachment
from agentlabs.project import Project
from agentlabs.chat import MessageFormat

import asyncio
import os

Preparing our model

Before to get started, we need to instantiate the model we'll use along this tutorial for handling the users requests and compute our document's embedding (we'll talk more about this later).

Here, we'll use OpenAI's text-davinci-003 model. We pass it a max_tokens value of -1 so it's considered as unlimited.

llm = OpenAI(temperature=0, model_name="text-davinci-003", max_tokens=-1)

Now we construct a ServiceContext, passing it our llm as an argument so that every time the framework needs to call our model, it'll use our llm's instance.

service_context = ServiceContext.from_defaults(llm=llm)
set_global_service_context(service_context=service_context)

What's next?

Okay, so now our users will be able to upload some files.

In order to give our application the ability to retrieve information about these large files, we will need to transform them a bit and store them in a dedicated storage.

Note: If you're not familiar with embeddings, here's an article that explains embeddings in detail.

Long story short, performing semantic research over a normal database is not something we are capable of. To allow our model to retrieve some data by semantic proximity, we'll proceed in two steps:

we'll ask our model to transform the data in a mathematical representation (this process is called embeddings)
we'll store this representation in a database that is capable of retrieving the spatial similarity of two embeddings.

Files handling and indexing

Let's assume we know where the files are stored in the filesystem and we have the absolute paths of the location of every file.

First, we'll initialize a variable that will contain our vector storage index; it will be null at the beginning, you will understand why very soon.

vs_index = None

Now, we'll use the SimpleDirectoryReader and its load_data() method to transform every PDF file into a plain text document using pypdf under the hood.

def load_and_index_files(paths):
  docs = SimpleDirectoryReader(input_files=paths).load_data()

In that same function, we'll now use a VectorStoreIndex.from_documents() to create an in-memory vector store index containing our embeddings.

Under the hood, this method will use our LLM to compute all vector embeddings for us.

Let's update our function:


def load_and_index_files(paths):
  docs = SimpleDirectoryReader(input_files=paths).load_data()
  vs_index = VectorStoreIndex.from_documents(docs)

Final change: since our users will be able to upload multiple documents, we want to re-index and update our vector store index every time a user uploads a new document.

We can achieve this by using the SimpleNodeParser and inserting nodes directly into our index.

Here's our final function:

def load_and_index_files(paths):
  docs = SimpleDirectoryReader(input_files=paths).load_data()
  global vs_index
  if vs_index is None:
    vs_index = VectorStoreIndex.from_documents(docs)
  else:
    parser = SimpleNodeParser.from_defaults(chunk_size=1024, chunk_overlap=20)
    new_nodes = parser.get_nodes_from_documents(docs)
    vs_index.insert_nodes(new_nodes)

Querying

Now, we know how to handle our files and create our indices. We can create what we'll need to query those indices.

To do so, we'll configure a QueryEngine as follows.

engine = vs_index.as_query_engine(similarity_top_k=3)

Now we have our querying engine, we can use it to send some queries:

# or use await if you're in an async function
response = asyncio.run("your query about your document")

But obviously, to get it working, we now need to wrap everything up and to setup the UI for our users.

No worries, this is probably the most straightforward part.

Setting up the UI

We'll start by setting up the user interface with AgentLabs.
It's fairly easy to do:

sign-in to https://agentlabs.dev
create a project
create an agent and name it ChatGPT
create a secret key for this agent

Init the AgentLabs project

Now, we will init AgentLabs with the info they provide to us in our dashboard.

from agentlabs.agent import Agent
from agentlabs.chat import IncomingChatMessage, MessageFormat
from agentlabs.project import Project
import os


alabs = Project(
    project_id="df3e3beb-49c4-4bd7-9193-e7755e4e1578",
    agentlabs_url="https://llamaindex-analyst.app.agentlabs.dev",
    secret=os.environ['AGENTLABS_SECRET'],
)

agent = alabs.agent(id="5fb3e7af-5cb3-4095-bca1-47db49774730")

alabs.connect()
alabs.wait()

Here, we add our secret in an environment variable for safety reasons. All the above variables can be found in your AgentLabs console.

Handling user uploads and messages

We'll use the on_chat_message method provided by AgentLabs to handle every message (including files) sent by the user.

We'll define a handler with a simple logic :

if the message contains one or more attachment, then we'll download them and we'll use the load_and_index_files function we previously created.
if the message contains no attachment but we did not indexed any file yet, we send a kindly message to our user inviting them to upload some files
otherwise, we run the query over our engine and we return the result to the user.

Here's our handler code:

def handle_message(msg: IncomingChatMessage):
  if len(msg.attachments) > 0:
    agent.typewrite(
      conversation_id=msg.conversation_id,
      text="Ok, I am indexing your files"
    )
    st = agent.create_stream(conversation_id=msg.conversation_id, format=MessageFormat.MARKDOWN)

    paths = download_attachments(msg.attachments)
    load_and_index_files(paths)

    st.typewrite("All files have been indexed. You can ask me questions now.")
    st.end()
    return

  if vs_index is None:
    return agent.typewrite(
      conversation_id=msg.conversation_id,
      text="No files have been indexed yet. Please upload some files."
    )

  engine = vs_index.as_query_engine(similarity_top_k=3)

  response = asyncio.run(engine.aquery(msg.text))

  agent.typewrite(
    conversation_id=msg.conversation_id,
    text=response.response,
  )



alabs.on_chat_message(handle_message)

You probably noticed that AgentLabs provides some practical built-in methods to interact with our users in realtime such as agent.typewrite() and agent.create_stream().

You can find more information about these methods in the official documentation.

Et voilà!

Congrats, your project is ready!

You can also retrieve the entire source code here.

Here's again how it looks:

Conclusion

In this tutorial, we only saw some basic querying and storing mechanisms available with LlamaIndex.

However, it gives you an idea about how you can get started an easily prototype powerful llms-apps with AgentLabs and LlamaIndex.

If you liked this tutorial, feel free to leave a comment below and to smash the like buttons :)

Chat with your CSV: leveraging PandasAI, OpenAI, and AgentLabs

Kevin Piacentini — Sat, 28 Oct 2023 13:04:03 +0000

Large language models (LLMs) have seen a remarkable surge in their capabilities, demonstrating proficiency across a multitude of tasks, such as text generation, language translation, and answering inquiries.

PandasAI is a Python library that simplifies the utilization of Pandas by leveraging the power of LLMs.

In this article, we will delve into how PandasAI can be used for conducting basic CSV file analysis with natural language user requests.

What are we going to build?

We will use PandasAI in addition to AgentLabs to craft an intuitive and simple user interface without coding it.

Users will have the capability to upload CSV files and seek insights from the data by posing questions. The system will then generate responses and additionally facilitate the creation of tables and graphs for enhanced data comprehension.

Demo

Watch until the end for the charts ;)

Getting started

First let's install some dependencies we'll need in this tutorial.

If you're using pip:

pip install pandasai openai tabulate matplotlib agentlabs-sdk

If you're using poetry:

poetry add pandasai openai tabulate matplotlib agentlabs-sdk

Now let's import everything so we don't have to worry about it later:

from agentlabs.attachment import Attachment
from agentlabs.agent import Agent
from agentlabs.chat import IncomingChatMessage, MessageFormat
from agentlabs.project import Project
from typing import Any, Dict, List
from pandasai import SmartDataframe
from pandasai.llm import OpenAI
from pandasai.responses.response_parser import ResponseParser
import matplotlib
matplotlib.use('Agg')
import os

No worries, I will explain everything during this tutorial.

Preparing PandasAI

To start using PandasAI we'll need to instantiate the LLM we want.

In this tutorial we're using OpenAI, but you can check for other LLMs in their documentation.

llm = OpenAI(api_token=os.environ['OPENAI_API_KEY'])

| Here we consider our OPENAI_API_KEY is stored in our environment.

Then, we'll have to instantiate a SmartDataFrame. In our case, we'll import the data from a file which is locally stored.

In another tutorial, I will show you how you can simply handle any user-uploaded file with AgentLabs' built-in file upload.

smart_df = SmartDataframe("./netflix.csv", config={
  "llm": llm,
  "save_charts_path": "/tmp/charts",
  "save_charts": True,
  "verbose": True,
})

As you can see, we pass our LLM as an argument, we also set some other options that will be helpful for later:

save_charts_path: this will indicate where the library will save the potential charts figures it generates for us. We use /tmp so it's removed at some point.
save_charts: indicate to the library we want to persist the charts figures.
verbose: self explanatory. It's useful to check what's going on sometimes.

Something is missing

At this stage, we instantiated everything we need to get PandasAI working.

We can start using our SmartDataFrame as follows:

result = smart_df.chat("What is the structure of the file?")

But we still have two problems to solve:

We want the input to be controlled by our users
We want to handle multiple kind of responses (plot images, dataframes, etc.)

Let's solve those two problems now.

Preparing the frontend

We'll start by setting up the user interface with AgentLabs.
It's fairly easy to do:

sign-in to https://agentlabs.dev
create a project
create an agent and name it as you wish
create a secret key for this agent

Init the AgentLabs project

Now, we will init AgentLabs with the info they provide us in our dashboard.

alabs = Project(
  project_id="0fc95376-beeb-4532-a28d-8d2321dd4d0d",
  agentlabs_url="https://csv-analyser.app.agentlabs.dev",
  secret=os.environ['AGENTLABS_SECRET']
)

alabs.connect()
alabs.wait()

| Here we add our secret in an environment variable for safety reasons. All the above variables can be found in your AgentLabs console.

React to user's messages

Your frontend is (almost) ready.

You can now open the URL of your AgentLabs project by clicking "Open my ChatUI".

Our plan to handle user's requests

What we want to do is :

handle every message sent by the users and pass them to PandasAI.
parse the PandasAI result and return it to the user
- if the result is a plot image, we want to send an attachment.
- if the result is a DataFrame we want to send a markdown + a CSV file as an attachment.
- if the result is a string or anything else, we want to send it to the user as it is.

To handle users' messages, we'll use the on_chat_message method and pass our handler as an argument.

Here's how the final code looks like.

def handle_task(message: IncomingChatMessage):
  alabs_agent = alabs.agent("d2d5fc3e-d4f7-45c4-b0d2-264c9f6a1a78")

  result = smart_df.chat(message.text)

  attachments = []

  if isinstance(result, str):
    response = result

  elif result["type"] == "plot":
    attachments = [Attachment.from_local_file(result["value"])]
    response = "Here's the chart you asked for."

  elif result["type"] == "dataframe":
    df = result["value"]
    response = df.to_markdown()
    csv_path = "/tmp/my-csv.csv"
    df.to_csv(csv_path)
    attachments = [Attachment.from_local_file(csv_path)]

  else:
    response = result["value"]

  alabs_agent.send(
    conversation_id=message.conversation_id,
    text=response,
    format=MessageFormat.MARKDOWN,
    attachments=attachments
  )

alabs.on_chat_message(handle_task)

The code above is pretty easy to understand but let's go over it for a second.

First, we instantiate our AgentLabs agent. This is through this agent that we'll be able to send messages back to the user:

def handle_task(message: IncomingChatMessage):
  alabs_agent = alabs.agent("d2d5fc3e-d4f7-45c4-b0d2-264c9f6a1a78")

Then we pass the content of the message to PandasAI and we get a result.

result = smart_df.chat(message.text)

Depending on the result "type" property. We define the format of our response and attachments.

For example here, if the type is a "plot", we assume the "value" is the path to the plot file, so we instantiate an AgentLabs attachment that contains the plot image.

  elif result["type"] == "plot":
    attachments = [Attachment.from_local_file(result["value"])]
    response = "Here's the chart you asked for."

We do that for every type we want to handle.
Later, we send the response to our user using the send() method provided by AgentLabs.

You can see we attach a text message and every potential attachment.

Attachments will be displayed in the chat as images or files and will be downloadable by our users.

  alabs_agent.send(
    conversation_id=message.conversation_id,
    text=response,
    format=MessageFormat.MARKDOWN,
    attachments=attachments
  )

We're mostly done!

Now we're mostly done. However, you're probably wondering yourself "Where do these type and values fields come from in the PandasAI response?"

Well, you're right. Those fields are not available by default.

So currently result = smart_df.chat(message.text) will not return what we expect.

By chance, this is a fairly simple problem to solve thanks to Custom Responses.

Extends the ResponseParser

To change the output format of our result = smart_df.chat(message.text), we can implement our version of the ResponseParser class provided by PandasAI.

This class has 3 methods:

format_dataframe: triggered when the result is a dataframe. - format_plot: triggered when the result is a plot
format_other: triggered when the result is either a dictionary, a string, or a number.

In our version, we just want to return the results as follows:

class CustomResponseParser(ResponseParser):
  def __init__(self, context) -> None:
      super().__init__(context)

  def format_other(self, result) -> dict:
    return result

  def format_dataframe(self, result: dict) -> dict:
      return {
        "type": "dataframe",
        "value": result["value"],
      }

  def format_plot(self, result: dict) -> dict:
    return {
      "type": "plot",
      "value": result["value"]
    }

Then, we need to tell our SmartDataFrame to use our CustomResponseParser, using the response_parser option.

smart_df = SmartDataframe("./netflix.csv", config={
  "llm": llm,
  "save_charts_path": "/tmp/charts",
  "save_charts": True,
  "verbose": True,
  # ADDED THIS LINE:
  "response_parser": CustomResponseParser
})

Et voilà!

Congrats, you've created your very own data assistant capable of parsing and manipulating csv files!

The full code of this tutorial is available here in replit.

And again, here's the result in action:

Conclusion

This is obviously experimental. You will probably face some situations where you would need to play a bit with PandasAI behavior to exactly fit your needs.

However, it's a pretty decent result obtained in no time.

As we mentioned, this example is not capable of handling file upload. This can be easily achieved with AgentLabs. Let me know if you would like to learn more about it :)

Thank you!

If you liked this tutorial, feel free to smash the like button and react in the comments below :)

Adding Memory to your ChatGPT built with LangChain

Kevin Piacentini — Fri, 27 Oct 2023 11:36:01 +0000

In the previous article, I showed you how you can create your very own ChatGPT using LangChain and AgentLabs.

If you have not seen this article I suggest you go read it first.

One limitation of our work was that ChatGPT did not have any memory.

Every time a user were sending a message we were only providing two messages to our model (one as an initial prompt, one for the user's request).

In this version, I will show you how we can add memory to provide more context to our LLM for every request.

Getting started

We'll start from the previous code we already developed here.

Here is it:

from agentlabs.agent import Agent
from agentlabs.chat import IncomingChatMessage, MessageFormat
from agentlabs.project import Project
from typing import Any, Dict, List
from langchain.callbacks.base import BaseCallbackHandler
from langchain.memory import ChatMessageHistory
from langchain.chat_models import ChatOpenAI
from langchain.schema.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
from langchain.schema.output import LLMResult
import os


class AgentLabsStreamingCallback(BaseCallbackHandler):
  def __init__(self, agent: Agent, conversation_id: str):
      super().__init__()
      self.agent = agent
      self.conversation_id = conversation_id

  def on_llm_start(
      self, serialized: Dict[str, Any], prompts: List[str], **kwargs: Any
  ) -> Any:
      self.stream = self.agent.create_stream(format=MessageFormat.MARKDOWN, conversation_id=self.conversation_id)

  def on_llm_new_token(self, token: str, **kwargs: Any) -> Any:
      self.stream.write(token)

  def on_llm_end(self, response: LLMResult, **kwargs: Any) -> Any:
      self.stream.end()

alabs = Project(
  project_id="4e51941a-a76c-4593-8921-c60e984aaa4e",
  agentlabs_url="https://chatgpt-langchain.app.agentlabs.dev",
  secret=os.environ['AGENTLABS_SECRET']
)

def handle_task(message: IncomingChatMessage):
  agent = alabs.agent("7d8ccee9-9316-4634-b8b5-e4628d438d6b")
  messages: List[BaseMessage] = [
          SystemMessage(content="You are a general assistant designed to help people with their daily tasks. You should format your answers in markdown format as you see fit."),
          HumanMessage(content=message.text)
  ]
  callback = AgentLabsStreamingCallback(agent=agent, conversation_id=message.conversation_id)
  llm(messages, callbacks=[callback])

llm = ChatOpenAI(streaming=True)

alabs.on_chat_message(handle_task)

alabs.connect()
alabs.wait()

Preparing the Memory

To add some memory to our example, we'll leverage the ChatMessageHistory class provided by LangChain.

As the documentation says:

The ChatMessageHistory class is responsible for remembering all previous chat interactions. These can then be passed directly back into the model, summarized in some way, or some combination.

In AgentLabs, every message we receive is linked to a conversation because the AgentLabs UI manages this for us.

So what we'll do is we'll store a ChatMessageHistory by conversation_id. To do so, let's create a class responsible of managing our conversations memory.

class ConversationMemoryManager:
    _conversation_id_to_memory: Dict[str, ChatMessageHistory] = {}

    def get_memory(self, conversation_id: str) -> ChatMessageHistory:
        if conversation_id not in self._conversation_id_to_memory:
            self._conversation_id_to_memory[conversation_id] = ChatMessageHistory()
        return self._conversation_id_to_memory[conversation_id]

memory_manager = ConversationMemoryManager()

As you can see, this class just helps us organize and retrieve our ChatMessageHistory by conversation_id, nothing too complex.

Using our ConversationMemoryManager

Now we have our ConversationMemoryManager we can use it every time we receive a message to pass the history context to our ChatGPT.

Let's update our message handler:

def handle_task(message: IncomingChatMessage):
    agent = alabs.agent("7d8ccee9-9316-4634-b8b5-e4628d438d6b")

    memory = memory_manager.get_memory(message.conversation_id)

    if len(memory.messages) == 0:
           memory.add_message(SystemMessage(content="You are a general assistant designed to help people with their daily tasks. You should format your answers in markdown format as you see fit."))

    memory.add_message(HumanMessage(content=message.text))

    callback = AgentLabsStreamingCallback(agent, message.conversation_id)
    output = llm(memory.messages, callbacks=[callback])

    memory.add_message(AIMessage(content=output.content))

This code must be easy to understand.

Every time we get a message from the user, we try to retrieve the corresponding conversation's ChatMessageHistory.

memory = memory_manager.get_memory(message.conversation_id)

If we don't get any memory, which means it's a new conversation, then we add the initial context prompt:

if len(memory.messages) == 0:
    memory.add_message(SystemMessage(content="You are a general assistant designed to help people with their daily tasks. You should format your answers in markdown format as you see fit."))

Then, we add the user's message to the history and pass the history when we call our llm.

memory.add_message(HumanMessage(content=message.text))

callback = AgentLabsStreamingCallback(agent, message.conversation_id)
output = llm(memory.messages, callbacks=[callback])

Finally, we also get the output result of the llm so we can add its response to the ChatMessageHistory as well:

output = llm(memory.messages, callbacks=[callback])

memory.add_message(AIMessage(content=output.content))

Et voilà

Congrats, you just added some basic memory support to your own ChatGPT app.

Full code

Here's a replit containing the entire code we added so far.

Result in video

Here's the final result. As you can see, now our ChatGPT has conversation-scoped memory :)

Conclusion

In this series, we saw how to create a basic clone of ChatGPT with LangChain and AgentLabs.

In the next articles, I will show you more examples of what you can build with these tools!

If you liked this tutorial, feel free to smash the like button and react in the comments below :)

Building your own ChatGPT with LangChain and AgentLabs

Kevin Piacentini — Fri, 27 Oct 2023 10:16:08 +0000

Conversational agents have emerged as a crucial interface between users and machines.

They facilitate natural interactions, making technology more accessible and user-friendly.

Among the forerunners of conversational AI, OpenAI's GPT-3 has made waves with its remarkable ability to understand and generate human-like text.

However, crafting a chatbot with similar capabilities from scratch can be a daunting endeavor, especially for those new to the realm of AI and machine learning.

But worry not, as in this tutorial, we are about to demystify the process of building your very own ChatGPT using the LangChain framework and AgentLabs platform.

LangChain provides a robust framework designed to handle Language Models seamlessly, making it a powerful tool for those aiming to build intelligent agents. On the other hand, AgentLabs offers a frontend as a service solution, enabling you to interact with your users without coding any interface.

Note: In this tutorial, we'll use Python as the primary language, but both LangChain and AgentLabs support TypeScript.

Getting started

To get started you will need to install openai, langchain, agentlabs-sdk.

If you use pip:

pip install openai langchain agentlabs-sdk

If you use poetry:

poetry add openai langchain agentlabs-sdk

Preparing the frontend

We'll start by setting up the user interface with AgentLabs.
It's fairly easy to do:

sign-in to https://agentlabs.dev
create a project
create an agent and name it ChatGPT
create a secret key for this agent

Init the AgentLabs project

Now, we will init AgentLabs with the info they provide to us in our dashboard.

from agentlabs.agent import Agent
from agentlabs.chat import IncomingChatMessage, MessageFormat
from agentlabs.project import Project
import os


alabs = Project(
  project_id="4e51941a-a76c-4593-8921-c60e984aaa4e",
  agentlabs_url="https://chatgpt-langchain.app.agentlabs.dev",
  secret=os.environ['AGENTLABS_SECRET']
)

alabs.connect()
alabs.wait()

| Here we add our secret in an environment variable for safety reasons. All the above variables can be found in your AgentLabs console.

React to user's messages

Your frontend is (almost) ready.

You can now open the URL of your AgentLabs project by clicking "Open my ChatUI".

However, if you test it now, it won't work.

What we want to do is handle every message sent by the users and pass them to our LLM.

To handle users' messages, we'll use the on_chat_message method and pass our handler as an argument.

Let's create a dead simple message handler for now.

def handle_task(message: IncomingChatMessage):
  agent = alabs.agent("7d8ccee9-9316-4634-b8b5-e4628d438d6b")
  agent.typewrite(
    conversation_id=message.conversation_id,
    text="I got your message: " + message.text
  )

alabs.on_chat_message(handle_task)

Our handler is pretty straightforward at the moment.
When we get a message, we tell our frontend (our AgentLabs agent) to write it back to the user.

[No worries, we'll make it smarter]

Now we can test our UI to see how it works.

Here's what you should get:

Here's the full code we got so far:

from agentlabs.agent import Agent
from agentlabs.chat import IncomingChatMessage, MessageFormat
from agentlabs.project import Project
import os


alabs = Project(
  project_id="4e51941a-a76c-4593-8921-c60e984aaa4e",
  agentlabs_url="https://chatgpt-langchain.app.agentlabs.dev",
  secret=os.environ['AGENTLABS_SECRET']
)

def handle_task(message: IncomingChatMessage):
  agent = alabs.agent("7d8ccee9-9316-4634-b8b5-e4628d438d6b")
  agent.typewrite(
    conversation_id=message.conversation_id,
    text="I got your message: " + message.text
  )

alabs.on_chat_message(handle_task)

alabs.connect()
alabs.wait()

Now, let's prepare LangChain and make our ChatGPT alive.

Preparing LangChain

Now we have a frontend, and we need to implement some logic.

Let's import everything we'll need from LangChain SDK.

from typing import Any, Dict, List
from langchain.callbacks.base import BaseCallbackHandler
from langchain.memory import ChatMessageHistory
from langchain.chat_models import ChatOpenAI
from langchain.schema.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
from langchain.schema.output import LLMResult

Now we'll init our LLM and set streaming mode to True so we can stream every token in realtime to our users.

llm = ChatOpenAI(streaming=True)

| IMPORTANT: For this model to work, make sure the OPENAI_API_KEY environment variable is set.

Now, let's update our handler so that every time a message comes in, we forward it to GPT.

We'll first create a message List with a first message giving some context to our model and then we'll append the user's message.

def handle_task(message: IncomingChatMessage):
    messages: List[BaseMessage] = [
            SystemMessage(content="You are a general assistant designed to help people with their daily tasks. You should format your answers in markdown format as you see fit."),
            HumanMessage(content=message.text)
    ]
    llm(messages)

So far so good! But there is a problem with this code.
You probably noticed we lost our AgentLabs agent.

So, even if this code executes, how do we send the model's response back to our frontend?

Well, LangChain provides a feature named Callbacks.

You can extend the BaseCallbackHandler provided by LangChain to get real-time updates from your model.

We'll simply define our callback handler and make sure every time the model streams a token we forward it to the user using our AgentLabs agent.

Let's do it!

class AgentLabsStreamingCallback(BaseCallbackHandler):
    def __init__(self, agent: Agent, conversation_id: str):
        super().__init__()
        self.agent = agent
        self.conversation_id = conversation_id

    def on_llm_start(
        self, serialized: Dict[str, Any], prompts: List[str], **kwargs: Any
    ) -> Any:
        self.stream = self.agent.create_stream(format=MessageFormat.MARKDOWN, conversation_id=self.conversation_id)

    def on_llm_new_token(self, token: str, **kwargs: Any) -> Any:
        self.stream.write(token)

    def on_llm_end(self, response: LLMResult, **kwargs: Any) -> Any:
        self.stream.end()

Now we defined our callback handler, let's instantiate it and use it in our message handler:

def handle_task(message: IncomingChatMessage):
    agent = alabs.agent("7d8ccee9-9316-4634-b8b5-e4628d438d6b")
    messages: List[BaseMessage] = [
            SystemMessage(content="You are a general assistant designed to help people with their daily tasks. You should format your answers in markdown format as you see fit."),
            HumanMessage(content=message.text)
    ]
    callback = AgentLabsStreamingCallback(agent=agent, conversation_id=message.conversation_id)
    llm(messages, callbacks=[callback])

Result

AgentLabs natively supports markdown and plaintext so you can ask ChatGPT to write code.

AgentLabs also supports file upload and many other features that will help you to prototype quickly with LangChain.

Full code

The full code is hosted here on Replit.

Limitation

In this version, we only send two messages to our model, so it has no memory.

In the next tutorial, I show you how you can leverage LangChain's memory feature to store every conversation and make your ChatGPT even smarter.

Conclusion

In conclusion, Langchain and AgentLabs are powerful tools that can be used to prototype conversational AI-based applications.

If you liked this tutorial, feel free to smash the like button and react in the comments below :)