Build Your Own OpenClaw Using Vercel, Composio, Supermemory

[00:00] Learn how to build an AI agent with [00:02] cursor and nex.js. You'll basically [00:04] build your own version of open claw. [00:07] This course covers the entire [00:10] development process utilizing the AI [00:13] SDK, super memory, and composio to [00:16] create an intelligent system capable of [00:19] executing complex actions. Sean Eskeel [00:22] developed this course and Composio [00:25] provided a grant to make this course [00:27] possible. Welcome to the course, Build [00:29] Your Own Open Claw from Scratch. In this [00:31] video, we're going to build an AI agent [00:34] that we can chat with through Telegram [00:36] that has persistent memory, so it [00:38] actually learns from every single [00:40] conversation. This agent will be able to [00:43] actually do things for you, and we're [00:45] going to take major inspiration from the [00:48] popular open-source project, OpenClaw. [00:50] OpenClaw is an AI agent that runs on [00:52] your local machine. It has 371,000 [00:55] stars on GitHub and it's one of the [00:57] fastest growing open source projects of [00:59] all time. It can connect to tools that [01:01] you already use like Gmail, Slack, [01:04] Linear, learn from your style over time, [01:07] and everything runs on your own machine. [01:10] All right, so first I'll show you a [01:12] quick demo of what we're going to be [01:13] building. I'm here on my deployed [01:16] Versell app, which is what we're [01:18] actually going to use to deploy our [01:21] finished AI agent. And here we have a UI [01:24] that kind of looks similar to chat GBT. [01:27] We have a sidebar where we can toggle [01:30] our past chats and we have our user [01:34] account here on the bottom left. We can [01:37] toggle dark mode, [01:39] sign out, and even check out some of our [01:41] settings. Over here, we can click to see [01:44] some of the available models from Versel [01:46] AI Gateway Router. At the time of [01:48] filming this, you get $5 of free Versel [01:52] AI gateway credits every month, I [01:54] believe. But I'm just actually going to [01:56] choose Claude Sonnet 4.6. And I'm going [01:59] to test out one of these prompts. [02:03] If we ask it to write an essay about [02:05] Silicon Valley, it'll create this nice [02:07] sidebar where it'll create a markdown [02:11] document that we can actually interact [02:12] with. If we ask it about the weather, [02:14] it'll put the weather into these dynamic [02:16] weather UIs where it puts all the [02:20] weather into these hourly forecasts with [02:22] these nice icons. If we ask about code, [02:25] it'll put into these code blocks. And in [02:27] this other chat, I've asked it to use [02:29] Composeio, one of the tools we're going [02:31] to use in this project to fetch my [02:33] latest emails on Gmail and then send a [02:35] draft to reply to any of the customer [02:38] complaints. The agent uses the search [02:40] tools function and then it checks our [02:42] connections and gives us a link to add [02:45] my Gmail. If I open this link, I can [02:47] then connect my Gmail. [02:51] It's going to look through my emails and [02:53] actually draft a message for me in the [02:54] thread. Then if I go back to my emails, [02:58] check out my drafts, you can see that my [03:01] AI agent was able to draft this email [03:03] for us. The last thing I'd like to [03:05] highlight is that it's actually speaking [03:07] a little bit of Japanese to me, and [03:09] that's because I told it to in one of my [03:11] previous chat. By the end of this [03:13] course, my hope is that you'll have a [03:15] better understanding about how AI agents [03:17] work. You'll have a fully working [03:19] version that you can deploy and start [03:21] serving to users today. And this will [03:24] serve as a valuable starting point for [03:25] any other AI agent that you want to [03:27] build in the future. With the Versell AI [03:30] SDK, we have a beautiful chatbot [03:32] template as well as all of the latest AI [03:35] models available to our users. Then with [03:38] Composeio, we can connect to any of the [03:40] apps that we use. So we can do cross app [03:43] automations like going from Slack to [03:45] notion to email. And we'll use super [03:47] memory so our agent learns from our [03:49] conversations over time. And just a [03:51] quick note on me, your instructor. So [03:53] I'm a developer relations engineer at [03:55] Composeio and I'm also a cursor [03:57] ambassador. I've taught thousands of [03:59] people now how to use AI tools like [04:01] Cursor, Composio, and Langchain. And I'm [04:03] constantly using these products myself [04:06] as a full sec developer and someone who [04:08] just likes to build AI apps in their [04:10] free time. I think in 2026, it's also [04:12] really important to know how to use AI [04:15] tools in your workflow. Throughout the [04:17] course, I'll be dropping some helpful [04:18] tips about using AI for coding. But you [04:21] can use these same principles for [04:23] Codeex, Claude Code, or whatever AI [04:25] agent you happen to be using. By now, [04:28] you're probably also thinking, "Do I [04:30] need to know how to code to follow along [04:31] in this course?" And no, we're not. [04:34] We're going to be using a lot of AI to [04:36] write the code. Your job is just to [04:38] understand it, to review some of the [04:40] changes, and we're going to be basing [04:42] most of the code off of Versel's AI [04:45] chatbot template. So, that's going to do [04:47] about 80% of the work in setting up the [04:49] UI and even setting up the database for [04:52] us. As I mentioned, this course will be [04:54] using cursor, which is an agentic AI [04:56] code editor. So, I'll also be dropping [04:58] tools on how you can troubleshoot bugs [05:00] and also build new features securely. [05:03] So, in this tutorial, we will be using [05:05] cursor. It has a free hobby plan with [05:07] limited agent requests that has no [05:10] credit card required. And it's agent [05:12] agnostic, which means that you can use [05:15] their composer 2 model, the latest cloud [05:18] models, the latest GPT models, all from [05:20] the same UI. And everything that I [05:23] mentioned in this tutorial will be in [05:24] the description. So, just check that out [05:26] if there's a link you're looking for. Or [05:28] you can just clone the final repo by [05:30] grabbing the SSH key here in the [05:33] Composio repo. I also want to be [05:35] transparent here about costs so that [05:37] this can be as accessible for everyone [05:39] as much as possible. Um, you're going to [05:41] need a credit card to sign up for any [05:43] sort of pro plans on Cursor if you want [05:46] to use the premier AI models. But [05:48] luckily, if you're a student, you can [05:49] get Cursor Pro for free if you go to [05:52] cursor.com/uds. [05:54] And OpenAI also has a similar program, [05:57] and I'll leave the links for these [05:58] programs in the description. Just [06:00] another quick note on the cursor paid [06:03] plans. So, if you click the link in the [06:06] description, you can get 50% off any of [06:08] the cursor plans. So, if you want this [06:12] $20 a month plan, you can get $10 off [06:14] that. So, check out that link in the [06:15] description. All right. And before we go [06:17] any further, I think it's really [06:19] important that we answer this question. [06:22] What is an AI agent? To explain this, I [06:25] think it's really helpful to use this [06:27] analogy of a human agent. So an AI agent [06:31] is pretty similar in that it can [06:34] perceive its own environment. So the [06:37] chat itself, how the user structures its [06:40] prompt and then from this it can then [06:42] reason, plan and autonomously execute [06:46] multiple steps in order to achieve a [06:49] specific goal. And it can use tools to [06:51] do this. It can look at your files to do [06:54] this and it can use all of that to [06:56] achieve a specific goal. Whether it's [06:58] something simple like getting the [07:00] weather or something more complicated [07:02] like doing a workflow that stretches [07:05] across multiple apps. The first thing [07:07] that we're going to do is build the UI. [07:10] And you can think of this like the body [07:12] or the first thing that the user sees on [07:14] the outside. And this is how they [07:16] communicate with your AI agent. And [07:18] we're going to be doing this through the [07:20] Verscell AI SDK. Next, we have the [07:23] brain. And these are going to be the AI [07:25] models. Whether that's the latest Claude [07:27] or GPT model or maybe an open-source [07:30] model like Kimmy 2.5. You can think of [07:32] these AI models as the brain living [07:34] inside of your agent. And this is going [07:37] to shape the way that it executes tools, [07:41] comes up with plans, and it's going to [07:43] improve the overall accuracy if you use [07:46] a model with higher levels of [07:49] intelligence. You can think of the hands [07:51] as being the tools that your AI agent [07:54] has access to. The tools in this case [07:57] could be any app that you already use in [07:59] your personal life or business. This [08:02] could be communication tools like Slack [08:04] or Gmail or maybe productivity tools [08:07] like Linear and Notion or even developer [08:10] tools like GitHub or other coding [08:12] agents. So our AI agent from Verscell [08:15] already has a list of tools it can use. [08:18] So it can get the weather. It can use [08:21] tools that put code into code blocks. [08:24] But we're also going to give it a bunch [08:25] of other tools, tools from our actual [08:27] apps using Composeio. With Composeio, [08:30] we'll give our agent access to a [08:32] thousand plus toolkits that let us run [08:34] various commands. For example, in Gmail, [08:37] there are many many tools within Gmail [08:39] like drafting emails, reading emails, [08:42] etc. And by just integrating Composeio, [08:45] we can get access to all of these [08:46] toolkits and give them to our AI agent. [08:48] So, our agent will have its brain, the [08:51] AI models. It'll be able to read the [08:53] user prompt to come up with a plan of [08:56] what it needs to do and it'll use the [08:59] user prompts. It'll use the files and [09:01] then it'll use any of the tools that it [09:02] has available. So if the user asks for [09:05] its latest emails and it doesn't have [09:08] that in the chat context, then it might [09:10] use one of the tools it has available to [09:12] it like Gmail or Outlook to actually [09:14] fetch those emails and get it into its [09:17] context window. In the later sections, [09:19] we'll add super memory so that our agent [09:22] can learn from all of our chats [09:24] continuously. We'll add a soul so that [09:26] it has more of a personality. And then [09:29] we'll also add Telegram so that we can [09:30] message our agent through our phone. And [09:33] finally, we'll add cron jobs so that our [09:35] agent can run repeated workflows the [09:38] same way every time at specified time [09:40] periods. All right. So, in this section, [09:42] we're going to start building the UI [09:44] using the VersellAI SDK using the [09:48] chatbot template. So, in the [09:50] description, go to the [09:51] github.com/verell/hatbot [09:54] link. [09:56] Scroll down all the way here and just [09:58] click on this deploy. You can look at [10:00] this for a quick overview of the [10:02] features that's included, which I've [10:04] already gone over. So, we'll just click [10:06] deploy here. If you haven't already, [10:08] you'll be prompted to create your [10:09] Versell account, which is 100% free on [10:12] the hobby plan, which is what I'm [10:14] currently on. Then you can add your [10:16] GitHub account over here by clicking add [10:19] GitHub account. And we'll just use the [10:20] default private repository name, [10:22] chatbot. Looks like I already have that [10:24] deployed, so I'll call it chatbot 2, and [10:26] I'll create it. All right, so really [10:28] quickly, these are all the products that [10:31] come out of the box and ready to go with [10:33] a chatbot template. These are optional [10:36] but they make setup a lot faster. So the [10:38] first one here is Neon and this is a [10:40] serverless Postgress so it's hosted by [10:43] Neon. We'll click add. Select a region [10:46] and this won't really matter but we'll [10:47] choose the one closest to our users. [10:50] We'll enable O so that people can [10:52] actually sign up and you can see the [10:54] free tier that it comes with. We'll just [10:56] accept all of these defaults and click [10:58] create and it'll quickly provision this [11:01] database for us and then it's already [11:02] available for us to use. We'll also [11:04] accept the default environments. So the [11:06] production and the preview environment. [11:08] And this is also going to create this [11:10] prefix storage URL. And this is a [11:13] sensitive URL that Versell is going to [11:15] add to our project. When we click [11:16] connect, it's going to add all our [11:18] environment variables for Neon to our [11:21] Versell chatbot template that we cloned. [11:23] So that was super easy and we'll just go [11:25] through the rest. We'll add up stash for [11:27] Reddus. Use the same default region. [11:30] Toggle the free tier. Accept all these [11:31] defaults. And you can see we have [11:33] 500,000 [11:34] monthly commands, which is plenty for [11:36] while we're testing this out. And then [11:38] it'll provision it for us in a couple of [11:40] seconds. All right. Same thing here. [11:42] Accept all the defaults and connect [11:44] Reddus to our resell project. [11:48] Reddus is going to be useful for rate [11:50] limiting people so they don't abuse our [11:52] AI features and it'll also enable us to [11:55] have reusable chat streams. And finally, [11:58] we have blob store by Verscell. This is [12:01] going to enable us to have file uploads [12:05] so that the user can upload CSV files, [12:08] markdown files, whatever into the chat [12:11] for context. We'll just accept the [12:13] default store name, default region, and [12:15] make this private. and create this. So [12:18] when I scroll down here to the add [12:20] environment variables section, we're [12:22] going to see all of the environment [12:23] variables that Verscell's already [12:25] configured for us. And these are going [12:27] to be the deployed environment variables [12:30] that we're going to need to link to our [12:32] local session so that we can actually [12:34] use these services from local host. We [12:36] have this O secret. We can refresh this [12:38] O secret in case it ever gets leaked and [12:40] then click deploy here when you're [12:42] ready. All right. So once we click [12:43] deploy, it's going to start provisioning [12:45] the integrations, giving us our build [12:46] logs, and we'll just wait for all of [12:48] this to finish as it creates our initial [12:50] commit and deploys everything for us. [12:52] All right, so now that it's done, we can [12:54] click on the preview and it's going to [12:56] show us the deployed chatbot template. [12:59] All right. And so you can see we're on [13:00] the guest account and it allowed us to [13:02] run this prompt and it uses the versel [13:05] AI SDK to have this thinking UI, this [13:09] code block UI and it gives us the full [13:12] response using Kimmy K 2.5 and it has [13:15] all these other models here by default [13:17] that we can use. All right, next we can [13:20] just continue on to our dashboard. [13:23] The only important things for us to see [13:25] here are the domains. So this is the [13:26] default one that it gives us. [13:28] And we can also go to Verscell AI [13:32] Gateway for chatbot 2. And we can see [13:34] that with that first response, we used [13:36] about 1 cent of our $5 credits. [13:42] We can see the full list of available [13:44] models. So we can have sonnet 4.6, 4.5, [13:49] and 4. We also have the GPT models. So, [13:52] why would you use AI gateway router over [13:55] just using the anthropic API key [13:58] natively? Well, this is an easy way to [14:00] give your users access to hundreds of [14:03] different models. There's also built-in [14:05] failures, so like fallbacks to make sure [14:08] that if Anthropic is not working, the [14:11] model can change to GPT. If GPT is not [14:15] working, it can change to DeepSeek. And [14:17] this is super easy to include rather [14:20] than creating all of that logic in your [14:21] app. There's also no platform markup. [14:24] So, Versell is not charging you extra to [14:26] use this feature. And you can use this [14:28] for text, image, and video models. As [14:31] mentioned here, you get $5 of free [14:33] credits every month, and they don't [14:34] restrict your access to the premium [14:36] models. All right. So now let's set this [14:39] up locally. And we'll do that by going [14:41] back to the project overview, clicking [14:44] the GitHub repo that was created for us. [14:47] And this should be in our account with [14:49] the initial commit that we just made. [14:51] Next up, I'm going to open this up with [14:54] GitHub desktop. [14:57] Clone the repo. And then I already have [14:58] Cursor downloaded. So I'm just going to [15:00] open this up in Cursor. [15:02] So quick overview. If you're a new [15:04] cursor user, we have the file tree on [15:08] the left hand side. We have some quick [15:10] commands so that we can open up new [15:12] agents, the terminal, the browser, or [15:16] just start talking to our agent right [15:18] here by clicking control shift tilda. [15:21] And then I'm going to install the global [15:24] Versel CLI. Make sure you're in the [15:28] correct repo. And then I'm going to run [15:30] Versell link. I'll hit Y, enter, [15:36] and it's going to ask if I want to link [15:38] to chatbot 2. So, this is the deployed [15:41] version. I'm just going to press enter [15:43] to accept the default. Yes. [15:47] And then it's going to ask me if I want [15:49] to pull the environment variables now. [15:51] And so, this is going to run the [15:52] Verscell link command and it's going to [15:55] pull down the deployed environment [15:56] variables so that we can have the exact [15:58] same setup that we have in production. [16:01] Hit enter [16:03] and it creates thev.local file and then [16:06] with the versel plugin for cloud code. [16:08] You can install it if you're using cloud [16:10] code right now, but I'm not. So I'm just [16:12] going to click no. If you install the [16:14] CLI, use the link command and the env [16:17] pull command. You should have av.local [16:21] that looks something like this. It'll [16:23] have your O secret, your blob write [16:25] token, and your Versell OIDC token. Make [16:28] sure to keep this secret and never [16:30] expose it to anyone. Then we can run the [16:33] pnmp install command and this is going [16:35] to install everything from our [16:37] package.json which are all the [16:39] dependencies that we need and we can [16:41] ignore this warning. [16:44] Then we'll run pnpm db migrate to make [16:47] sure that we have the latest database [16:49] changes. [16:51] But you can see here that we're missing [16:52] the postgress URL. [16:55] And this is because it's a sensitive [16:58] environment variable that we'll need to [17:00] populate manually. So we'll go back to [17:03] the Versell dashboard. We'll go back to [17:05] versell.com. [17:08] Go to our chatbot project. [17:11] And then we'll go to the integrations [17:13] tab. And we set up neon and upstach for [17:16] this. So let's first grab the neon [17:19] environment variables [17:21] and grab the neon champagne pebble. So, [17:24] I've set this up multiple times now, but [17:26] this is the one for chatbot 2. And then [17:28] I'll copy the snippet and paste it into [17:31] myv.local. [17:34] The second integration we set up was [17:36] upstash. So, let's go there, manage, [17:39] click it, and then copy this snippet and [17:41] also paste that into our NV.local and [17:44] give it a save. So, now we can run the [17:46] pnpmdv migrate command again. And this [17:49] should run the migrations. [17:52] And all of our migrations completed in [17:54] about 5 seconds. All right. And the [17:55] final command is pnpmdev. [17:58] Copy that, paste it, and this is going [18:00] to start our local server. And we can [18:02] open it up. And by default, it creates [18:04] this guest account for us using o.js. [18:07] And then we can test out this is [18:09] working. [18:12] And it looks like everything's working [18:13] properly. So we have the deployed [18:15] template as well as the local template [18:17] that we can now start editing. Just [18:19] quickly going over the template itself. [18:22] We could ignore the next versel folders [18:25] and most of the important stuff is going [18:27] to live in this app folder. The app [18:29] folder contains our next.js layouts. So [18:33] every page that you see on localhost [18:36] 3000 is a file inside of the app folder. [18:40] So every time you create a new chat, [18:42] this is going to be rendered through [18:45] this folder. And we can see some of the [18:47] components it's using. So it has the app [18:49] sidebar and then it has all the [18:51] functionality and then the JSX which has [18:54] all the layouts that you actually see [18:57] including the sidebar any alerts and [18:59] this is all written in React and we [19:01] don't really need to touch this as AI is [19:04] going to edit most of the files for us. [19:05] The only other thing I'll show you is [19:07] rate liimiting.ts in our library folder. [19:10] And so this is going to let your guest [19:12] users only send up to 10 messages, but [19:15] you can bump this up to 100. All right. [19:17] So now that we have this working chatbot [19:19] from Verscell, we're going to start [19:20] adding the hands. So going back to our [19:23] body analogy, we have the body, which is [19:26] the Verscell Nex.js chatbot. And now we [19:28] need to adapt this chatbot to make it [19:30] more useful by extending the tools that [19:33] it has available to it. The chatbot can [19:35] already call tools that get the weather, [19:38] create nice formatting for the code [19:40] blocks as well as markdown documents. [19:43] And what it's doing under the hood is [19:45] exposing this tool list to the agent. [19:47] And throughout each message, this agent [19:50] is going to decide if it should call one [19:52] of the tools. And if it's relevant, like [19:54] if the user mentioned weather and the [19:56] message has weather, it's definitely [19:58] going to call the get weather tool so [20:00] that it can actually display it in a [20:02] nice UI. And so now we're on this step [20:05] where we give our agent a thousand plus [20:08] toolkits and thousands more tools [20:11] available through MCP or the model [20:13] context protocol. And more on that [20:15] later. So now we're going to add Compose [20:17] which gives us a thousand plus toolkits [20:20] through some of the most popular apps [20:21] you're probably already using in your [20:23] day-to-day. And it gives it to them in a [20:26] really smart way that I'm really excited [20:28] to show you. But before we talk about [20:30] that, it's important that we talk about [20:32] context windows, which is one of the [20:34] most important concepts when you're [20:36] building reliable AI agent. A context [20:39] window is defined as the maximum amount [20:41] of information measured in tokens that a [20:44] large language model or an LLM can [20:47] remember at one time. You can think of [20:49] it like the AI's working memory or its [20:52] short-term memory. And anything outside [20:54] of this window will affect the response. [20:57] and anything outside of it can get [20:59] forgotten. So when you use a tool like [21:01] cursor or chat GBT or claude and you [21:04] notice that your chat is getting really [21:05] long, you might have noticed that the AI [21:07] gets worse. The accuracy goes down. It [21:10] starts forgetting details and eventually [21:12] it becomes unusable and you have to [21:14] start a new chat. And you can blame the [21:16] context window for this. Here are some [21:18] famous context windows with GPT40 from 2 [21:21] years ago hovering around 128,000 [21:23] tokens. Whereas two years later, we have [21:26] premier models GBT 5.5 and Opus, both [21:30] around 1 million tokens, and you have [21:32] other models like Kim K 2.6 with a [21:35] 256,000 token limit. And since we're [21:38] building AI agents, we can't help but [21:40] talk about context engineering. And at [21:43] its simplest definition, each tool is [21:46] going to require more tokens, and each [21:49] token costs more money and reduces the [21:51] overall accuracy. So, when you're on a [21:54] fresh chat and you're well below this 1 [21:55] million token limit, you're going to [21:57] find that your LLM performs great. But [21:59] once you start adding more and more [22:01] messages to your conversation, you're [22:02] going to find that the accuracy [22:04] eventually hits a point where it's [22:05] unusable and you need to start a new [22:07] chat. If you're creating an AI agent, [22:09] you definitely want it to stay accurate [22:11] and you definitely don't want it to cost [22:12] more money than it needs to. We have the [22:14] full technical definition here which is [22:16] that context engineering is a strategic [22:18] curation, management and optimization of [22:21] the tokens that we feed into LLMs to [22:24] make sure that outputs are high quality [22:26] and relevant. It goes beyond prompt [22:28] engineering by designing dynamic systems [22:30] that deliver the right info, tools, and [22:32] context to agents at the right time. And [22:35] that's where Composio comes in. It acts [22:37] as a dynamic system layer that gives [22:40] your agent access to a huge toolkit [22:42] catalog without ever overwhelming the [22:44] context window at one given time. You [22:47] can go to composio.dev/toolkits [22:49] to see the 1,000 plus toolkits that we [22:52] support here, ranging from Slack, [22:54] Notion, GitHub, Gmail, and more. And if [22:57] we peek into the Gmail toolkit, we can [22:59] see that this alone adds 61 tools to the [23:01] context window. So, if you were just to [23:03] give your agent access to Gmail, you'd [23:06] be adding all of these tool definitions [23:08] into your context window on every single [23:10] prompt. Now, for one connected app, that [23:13] might be feasible. But if you have one, [23:15] two, five, or maybe 10 apps connected to [23:17] your AI agent, this is going to reduce [23:20] the systems efficacy because your agent [23:22] is going to have to read all of those [23:24] toolkit cataloges on every single turn, [23:26] even when they're not relevant. [23:28] Basically, the agent only ever sees the [23:30] higher level toolkit that it has [23:31] available. And so, the agent's context [23:34] stays small and not bloated with over a [23:36] thousand plus tools that aren't relevant [23:38] to it. So, in the demo, you'll see that [23:40] I use Composio to fetch my latest [23:42] emails. And so, it searches through the [23:45] available tools, which is just JSON. It [23:47] checks to see if we have Gmail [23:49] authenticated, and then it gives me a [23:51] link to connect my Gmail directly. Once [23:53] it's connected, you'll see these tool [23:54] cards rendering as the agent searches [23:56] Composio for the right tool to use [23:59] within Gmail. And then it's able to [24:01] draft or reply using this same [24:03] multi-execute tool. And this is exactly [24:06] why context engineering is important. [24:08] With Composeio, we only deliver the [24:10] right tools and context to our agent so [24:12] that it can just fetch our Gmails and [24:15] just create drafts when it needs to and [24:17] it doesn't have to have any information [24:19] about any of the other connected apps. [24:21] So to get started with Composio, we'll [24:23] go to Composeio.dev. Get started. We'll [24:26] go through the onboarding flow to build [24:27] with Composeio [24:30] and we'll just go through this. All [24:32] right. So next here on the left, we'll [24:33] make sure that we're on the platform. [24:36] Next, we'll go to settings, [24:38] API keys, and we'll create a new API key [24:42] here, free code camp. And we'll grab [24:45] this key. [24:49] Go back to cursor [24:52] and create a composio API key. [24:57] We also need to go back to versell.com. [25:02] Go into that same chatbot pro project. [25:06] Go to environment variables and we'll [25:08] add the same environment variable here. [25:16] Mark it as sensitive and save. [25:18] and we'll go back to cursor to start [25:21] testing this out. All right. So, if you [25:23] go back to the agent ready prompts [25:25] section in the readme file, we can copy [25:28] this part two prompt for adding composio [25:31] tools and we'll copy and paste this [25:33] entire thing here. We'll create a new [25:36] agent and we'll paste that in. I'm going [25:38] to use opus 4.7 just so this probably [25:41] will get it right on the first try, but [25:43] you can still use this with the auto [25:44] model. So, let's talk about what this [25:46] prompt contains. We're basically going [25:48] to add Composeio tools to the Verscell [25:50] AI SDK with a per user identity from the [25:53] start. We'll keep the existing chat UI. [25:56] We'll mention the context that's already [25:58] there. So, we have O.js. We don't want [26:00] to hardcode any user IDs. We'll make [26:03] sure that guest users do not get access [26:05] to any of these tools. And we'll and [26:08] we'll just mention that.env.local [26:10] already has a Composio API key. This [26:12] second section is not necessary, but it [26:15] definitely helps for when you're testing [26:16] out new features. We're going to ask our [26:19] agent to create a new admin page that [26:21] shows us the current users integration [26:23] state with the user ID, the user type, [26:26] and the available toolkits that are [26:28] connected. And in this final step, I'll [26:30] ask it to verify some of these things, [26:32] but some of these will be up to us to [26:35] verify in the chat. All right, it took [26:38] quite a while for all those changes to [26:39] get implemented. So let's see how our [26:41] agent did. We can see here that it went [26:44] through a couple of steps. First, it [26:46] explored the codebase by gathering [26:48] enough context to answer the prompt and [26:51] it looked at some of the relevant files [26:53] as per the original prompt. First, we [26:55] can see that it explored the codebase to [26:57] gather enough context to answer the [26:59] question. It looks through files, goes [27:01] through Composio's documentation, [27:04] and then it creates a to-do list for how [27:06] it's going to implement this feature. [27:08] Then it just goes step by step creating [27:11] new files, wiring them into our next.js [27:14] routes, and then updating our system [27:15] prompt. Then the cursor agent runs a [27:17] really important step. It runs the [27:19] npxtsc command, which basically checks [27:22] for any TypeScript errors. As you can [27:24] see here, it generated a bunch of [27:26] TypeScript errors, thought about how it [27:28] could fix them, and then it goes one by [27:30] one fixing those. Then it runs that same [27:33] linting command again, sees that there's [27:35] no TypeScript errors, and finishes up [27:37] its to-do list. Next, I'll go through [27:39] each of these files one by one. [27:44] All right, so I'm doing two things when [27:46] I review here. I'm reviewing the actual [27:48] code to make sure that everything looks [27:49] okay, but I'm also constantly cross- [27:52] refferencing to the what changed file to [27:54] understand the reasoning behind some of [27:56] those changes. Especially when there's a [27:59] large prompt, it's important to make [28:00] sure that all of the steps were followed [28:03] and that the AI didn't deviate too much [28:05] from the original prompt. Then I'll look [28:08] at this verify step here at the very end [28:10] and look at the major test cases that I [28:12] need to verify for myself. So first, as [28:14] a regular user, we have these two test [28:16] cases to make sure are working. We have [28:19] the admin page we need to test and we [28:20] have the guest page that we need to [28:22] test. I'll go back to localhost 3000 [28:25] logged in as a guest and I'll try to ask [28:27] for my Gmails. [28:34] As expected, our agent doesn't know that [28:37] it has Composio tools because we're [28:39] currently logged in as a guest user. So, [28:41] it looks like this is working properly. [28:43] Next, I'm going to actually log into my [28:45] account. So, I'll sign up and I'll ask [28:49] it the exact same prompt. use Composio [28:51] to fetch my latest emails. All right, so [28:54] I just tested this out on my new user [28:57] asking it to use Composio to fetch my [28:59] latest emails. We can see that it uses [29:02] the Composio search tools and this is [29:04] actually going to look up what tool it [29:07] should use for fetching emails from the [29:09] inbox. This contains really important [29:11] things to make sure that your AI agent [29:14] is going to execute the tool properly. [29:16] This includes execution guidance, [29:18] recommended plan steps, known pitfalls [29:21] for Gmail and Outlook, how it should [29:23] test for active connections to Gmail and [29:26] Outlook, as well as the exact schemas [29:29] that it needs to use to call certain [29:31] tools from the toolkits. For example, if [29:33] it were to fetch emails from your Gmail, [29:36] the LLM needs to generate this exact [29:38] input schema. It even contains examples, [29:41] descriptions for each property like [29:44] query and user ID. It also contains the [29:48] type examples and a description of what [29:52] that property is there for. This way [29:54] when it calls the composio manage [29:56] connections command, it gets it right on [29:58] the first go. [30:01] Then we'll click the link to connect our [30:04] email to our current composio chat. [30:07] After we go through this oath flow, I'll [30:09] ask it again. And now the agent still [30:11] maintains the context of how it should [30:14] fetch emails which can then use the [30:17] composial multi-execute tool using the [30:20] correct tool slug which is Gmail fetch [30:22] emails and then it passes the exact [30:25] arguments that it needs to call this [30:27] tool properly. From that the agent is [30:29] going to get this JSON of results. This [30:31] is going to contain all the data from [30:33] this MCP tool call and it's going to [30:35] give it in an easy to read format for [30:37] LLMs which is going to contain all of [30:40] their emails in this nice easy to read [30:42] form. And for the final check, I'll go [30:45] to localhost [30:47] 3000/admin. [30:49] And this is just going to verify my [30:50] current user ID, the user type, and that [30:53] I currently have a Gmail account [30:54] connected. [30:56] Also want to mention that if you're [30:58] thinking of trying out the starter plan [31:01] because you're anticipating a lot of [31:04] usage, you can check out billing to [31:06] check out the starter plan which gives [31:08] you 10 times more usage with 200,000 [31:11] tool calls per month. So you can use the [31:13] code free code camp at checkout and get [31:16] 1 month completely free. So what is OOTH [31:18] and why do we use it with Compose? [31:20] You've already seen us use OOTH [31:21] throughout this app. And this happens [31:23] when we click the connect Gmail link. It [31:26] takes us to Google to authenticate. [31:28] Google gives us the OOTH screen. And [31:30] then Compose is actually storing a token [31:32] for us and telling our agent that it's [31:35] able to use certain tools like Gmail. [31:38] This works great because there's no [31:39] passwords shared with AI. It has limited [31:42] scope and permissions, and you can [31:44] always revoke these permissions later. [31:46] So, you might be wondering, why don't I [31:48] just do this myself? like I could just [31:49] vibe code it. Well, the reason is that [31:52] creating this from scratch is kind of [31:54] annoying. [31:56] Every app that you see available in [31:57] Composeio already has a list of toolkits [32:01] here with Gmail alone having 61 [32:03] different tools. Each tool has a [32:05] different format, a different [32:06] description, and certain failure points [32:08] that AI agents commonly run into. By [32:11] using Composeio, it abstracts all of [32:13] this away for us, including the token [32:15] storage, refresh logic, and tool [32:17] definitions. That means the user token [32:19] is stored safely. The user stays [32:21] authenticated so they can quickly access [32:23] the tools that they've given permissions [32:25] for. And all of the tools within Gmail [32:28] and all the other apps that we gave [32:29] permission to are defined in a clear way [32:31] for the AI agent to understand. By [32:34] abstracting this away to Composio, we [32:36] can just focus on making our AI agent [32:38] better instead of building each of these [32:39] integrations one by one. Next, in the [32:42] readme, we'll grab this expand the model [32:44] list prompt. We'll go back to our cursor [32:46] agent and paste it in. And this is [32:49] basically going to add more models to [32:51] our list from AI gateway as they're [32:54] constantly adding new models. And so [32:56] this is going to be a really simple UI [32:58] fix. [33:00] Here we can see that cursor actually [33:02] creates a sub agent and opens up the [33:05] browser. So now it's actually viewing [33:07] the web page live looking at the versel [33:09] AI gateway models. It's actually [33:12] scrolling down manually on the web page [33:14] and it's going to start grabbing [33:16] individual model IDs so that it can add [33:19] them to our app. All right. And so it [33:21] looks like it updates our model.ts file [33:24] with some GPT5, Gemini, and Claude Opus [33:27] models. Looks like that's all pretty [33:29] straightforward. And we can see that [33:31] those are now available in our chat. And [33:35] so we've actually told the cursor agent [33:37] in this very specific prompt to add new [33:40] models. And then cursor actually uses [33:43] this really powerful tool that verifies [33:46] that the model list was actually created [33:50] and it creates this sub agent for us [33:52] which we can check out. Basically it [33:54] creates this subprompt that tells it to [33:56] navigate to the local host 3000 verify [34:00] the new models that it just added. It [34:02] then tells it to use an inexpensive [34:05] model, send a short prompt to report on [34:07] what happened. So we can see here that [34:09] it navigated, clicked, clicked, clicked, [34:13] typed into the prompt box, and then [34:15] clicked the submit button. And on any of [34:17] these, we can click on them to see [34:20] exactly what the UI, the cursor agent [34:24] was looking at at the exact time. So we [34:26] can see it waited. Then over here we can [34:29] see it captured a snapshot. So we did [34:32] not test this ourselves. This was purely [34:35] the cursor agent typing in these things [34:38] clicking into the UI for us and then [34:42] verifying using screenshots that [34:45] everything was working properly. I think [34:47] this is absolutely crazy and this is one [34:50] of my favorite features in cursor [34:51] because it saves me so much time in [34:54] having to click around in my web app to [34:56] test that things are working. And so by [34:58] telling the agent to actually verify in [35:01] the UI that things are happening as they [35:03] should, you're going to allow your [35:05] cursor agent to create these sub agents, [35:07] test changes itself, and actually verify [35:11] things for you. All right. Now, we're [35:13] going to just quickly inspect how the [35:15] database is working. I'll ask my cursor [35:18] agent to [35:20] open up the database studio. I think [35:24] we're using Drizzle. start it up and [35:28] tell me how to open it. [35:34] So, it actually starts the studio up for [35:37] me. And you can see that it creates this [35:39] background terminal that's now running. [35:42] I'll click it to open it up over here on [35:44] the left. And we can see that it's up [35:47] and running right here. So, I'll follow [35:49] it. [35:52] So every new chat [35:54] is going to get created as a row in this [35:56] table. [35:59] Every message for each of those chats is [36:01] going to get listed in this table. And [36:04] they're separated by the user and the AI [36:07] assistant. And then we also have the [36:09] user table. We have a different row for [36:12] every time a different guest logs in. We [36:15] have me over here where I actually [36:17] signed up. And we have our password [36:18] encrypted here on the right. All right. [36:21] So, quick recap of what we've built so [36:23] far. Going back to our body analogy for [36:26] the agent. First, we built the body and [36:29] that's the Verscell chat UI. So, this is [36:31] what users can see and interact with. [36:34] Then, we gave the agent hands to extend [36:36] its capabilities so that it could [36:38] connect to tools like Gmail, notion, and [36:40] GitHub. Then we added a brain for our [36:43] agent, giving it AI gateways so that it [36:46] could connect to the latest AI models [36:48] for the best intelligence to improve its [36:51] ability to call those tools. But right [36:53] now, the agent is still missing a big [36:55] piece that improves the usability of the [36:57] chatbot in the long term. And so this is [37:00] where we introduce a tool called super [37:02] memory. Supermemory is a managed memory [37:05] layer for AI apps that lets the agent [37:08] store, search, and recall important [37:10] facts about the user across multiple [37:12] conversations. [37:14] Like everything else in this project, [37:16] you could build this by yourself by [37:18] creating a database, embeddings, search, [37:20] and ranking tool. But Super Memory [37:22] abstracts all of this away so that we [37:24] can treat memory as another optional [37:26] tool within our agent. You can check out [37:28] their pricing to see how it works, but [37:30] basically you get $5 of monthly usage [37:34] built in, and they also have a startup [37:36] and research program where you can get [37:38] $1,000 of free credits. So, it's worth [37:41] applying to if you want to keep building [37:42] with super memory. The context window is [37:45] the short-term memory, which is in a [37:47] single chat. And we can think of super [37:49] memory as the long-term memory of our [37:52] agent. So in this section, we'll add [37:54] these super memory tools, add memory, [37:56] search memory, and get profile so that [37:58] the agent can store and retrieve [38:00] important facts for later. With super [38:03] memory, your agent can store important [38:05] facts like your name, preferences, [38:07] projects you're working on, and other [38:09] important nuances that might be [38:11] important. Without this tool, memory [38:13] would only live across single chats. So [38:16] this is basically a memory layer that [38:17] helps important information live across [38:20] multiple conversations. So with super [38:23] memory, we can create persistent data [38:25] that lives across multiple [38:27] conversations. The way that this works [38:29] is pretty simple. We're going to use [38:31] super memory as another tool just like [38:33] we did with Composio. The model will see [38:36] new tools like add memory, search [38:38] memories, and get profile. And when the [38:40] user says something that's worth [38:41] remembering, like my name is Shawn, the [38:44] model can then say, "Hey, maybe I should [38:46] remember this fact for later." And add a [38:48] memory into Super Memories container. [38:51] Then later, if the user says something [38:53] like, "Fill in this form for me," and [38:54] there's a name field in that form, the [38:57] chatbot should remember that the user's [38:59] name is Sean and fill that in [39:00] appropriately. The key thing here is [39:02] that we're not storing these memories in [39:05] the system message because that would be [39:07] slow, expensive, and it would just ruin [39:10] the overall accuracy of the agent [39:12] because it would pull in these memories [39:14] when they're not even relevant. Just [39:16] like we talked about earlier with [39:17] context engineering, this is going to [39:19] give our system that dynamic ability to [39:21] pull in the right information and [39:23] deliver that context to our AI agent at [39:26] the right time. Okay, so we can head [39:28] over to our readme in the part 3 super [39:30] memory section. [39:33] The first thing that we need to do is go [39:35] to super memory, create a new account, [39:37] and grab our API key. [39:40] We'll go to super memory. [39:44] And we can see here an overview of the [39:46] documents and memories that I've already [39:49] created in my app. But we're just going [39:51] to grab the API key. [39:55] Create a new key. And I'll create this [39:58] API key. [40:01] Then we'll go to ourv.local [40:04] and create a super [40:07] memory API key [40:10] and paste it like that. Then I'll copy [40:13] this whole thing [40:15] and I'll go to my Verscell dashboard. [40:18] Open up my chatbot project. Go to [40:20] environment variables [40:24] and I'll add an environment variable and [40:26] I'll paste the whole thing here and [40:27] it'll autofill the API key for me and [40:31] I'll save it. [40:33] Okay, after that all I need to do is [40:35] install the super memory tools. So I'll [40:38] copy this. I'll make a new terminal [40:42] and I'll paste that in. [40:45] Okay, now we just need to paste the [40:47] prompt three from below. [40:52] I'll copy this [40:54] and I'll give it to my cursor agent. The [40:56] key implementation detail here is that [40:58] container tags should include session [41:01] user ID. And this means that our users [41:04] memories should only go into their own [41:05] memory bucket. And later on when we add [41:07] Telegram, the Telegram bot is going to [41:09] use that same user ID to make sure that [41:12] memories are shared across the web app [41:14] and the Telegram interface. [41:17] This prompt is basically going to ask [41:18] the agent to do three things. First, [41:20] it's going to add super memory to the [41:22] list of tool definitions. And this is [41:23] where we already have tools like the [41:25] Composio ones and the weather tool [41:28] defined for our AI agent. Secondly, [41:31] we're going to make sure that memory is [41:33] only enabled for signed in users so that [41:35] guests don't get long-term memory. Then, [41:38] we're going to modify this system prompt [41:39] rule so the model knows exactly when to [41:41] store and recall memories. Okay, so now [41:43] that we have the API key set up and [41:46] super memory installed, we're going to [41:47] grab this prompt [41:49] and go back into cursor. This is [41:52] basically asking the agent to do three [41:54] things. First, it adds super memory to [41:57] the list of tool definitions where we [41:59] already have local tools like weather [42:01] tool and composio tools. Then, we'll [42:03] make sure that memory only gets enabled [42:06] for signed in users, making sure that [42:08] guest users don't get long-term memory. [42:10] And then, we'll add some system prompt [42:13] rule changes so the model knows when to [42:15] store and recall memories. So, I'll run [42:18] this and check back in with you. Now [42:19] that our cursor agent is done, let's [42:21] check out what it did. So, it updated [42:23] our route.ts ts file to add some [42:25] supermemory tools from their software [42:27] development kit. And then it updated our [42:30] system prompt to have some information [42:32] about super memory. And then it ran some [42:35] TypeScript checks and fixed its own [42:37] TypeScript errors. And everything looks [42:39] good to me. So I'm going to accept all [42:41] of the changes. So here I've just tested [42:44] out to make sure that everything's [42:45] working properly. First, I asked my [42:48] agent what my name was, and it called [42:51] the supermemory get profile tool, and it [42:53] looks like nothing showed up. Then, I [42:56] gave it my name, and it added a memory [42:58] for Shawn. And then I opened up a new [43:01] chat, [43:03] asked it that same question, what my [43:05] name was. It used the super memory [43:07] search memories tool, and we can open up [43:10] the queries it used. So, it asked for [43:12] the user's name, and then here was the [43:13] result it got back. And you can see [43:15] right here that I got the content and [43:17] finally we get that assistant answer [43:20] which is that my name is Sean. Now our [43:22] agent can call durable facts across [43:25] multiple conversations which can help it [43:27] to feel a lot more personal. Our agent [43:29] already has a lot of working pieces [43:32] which has really extended its capability [43:34] from where we first started. The next [43:36] thing we're going to add to give it a [43:37] little bit of pop, a little bit of [43:39] personality is a soul. So stay tuned and [43:42] I'll see you in the next section. In [43:44] this section, we're going to create the [43:45] soul of our AI agent. If memory is about [43:49] the user and things that the chatbot [43:51] learns about the user over time, this [43:54] soul is the definition of our agent's [43:57] personality. And soul is just a fancy [43:59] word for system prompt, and it basically [44:01] decides how we want our agent to act. [44:04] Basically, if we say a fact about [44:06] ourselves, like my name is Shawn, that [44:07] should go into Super Memories memory [44:09] store. But the agents name, how it likes [44:12] to talk, the length of its replies, all [44:14] of that should live in the soul. For [44:16] this, we'll take a lot of inspiration [44:18] from the soul.md file from OpenClaw. But [44:21] instead of storing MD files, we're going [44:23] to store the soul as a column in our [44:26] database. In the final working demo, you [44:29] can see that I've asked my AI agent what [44:31] its name is, and it already knows that [44:33] it's key, my personal agent. For this, [44:36] we're going to add a new feature. if the [44:38] soul hasn't been defined yet for the [44:40] user, the agent should run onboarding as [44:42] a conversation instead of putting some [44:44] long form on the screen. So when a user [44:47] has signed in and their agent has no [44:49] soul yet, we're going to inject an [44:51] onboarding prompt into the system [44:52] prompt. The agent will then ask a couple [44:55] of questions and store any user facts [44:57] with ad memory and then it'll use set [45:00] soul to commit the agents identity to [45:03] the database. From that, we shouldn't [45:05] see the onboarding prompt anymore. And [45:07] the saved soul should get prepended to [45:10] the system prompt on all future [45:12] messages. So our system prompt is going [45:14] to look a little bit different now. [45:16] First we'll have the onboarding prompt [45:18] and this is only going to appear if the [45:20] user.soul is null. We'll have the agents [45:23] identity as the first part of the [45:24] prompt. Then we'll have the regular [45:26] prompt and the memory rules. Then we'll [45:28] have the latest chat messages. And then [45:30] we'll have any of the tool definitions [45:32] like the weather tools, Composio tools, [45:34] and memory tools. All right. To get [45:36] started here, we'll go to part 4 and all [45:39] we need to do is grab the prompt over [45:41] here and paste it into cursor. This [45:44] prompt is a little bit bigger because it [45:46] touches the UI database and it also [45:48] creates a new admin page so that we can [45:50] debug that everything is working. First, [45:52] we're going to add some parts to the [45:53] database and then we're going to [45:55] generate the migration files which are [45:57] basically the changes that we made to [45:59] the database and then we're going to [46:00] apply those migrations. Then we'll add [46:02] these queries in the queries.ts ts file [46:05] so that we can actually get the user [46:07] soul prompt for the chatbot and we can [46:09] also update it. In this section, we're [46:11] just going to change how the prompt is [46:13] assembled. So if the user dossole is [46:15] null, we want to inject the onboarding [46:18] prompt and if it's already defined, [46:20] we're just going to use the saved soul [46:21] as it is. We're going to create a new [46:24] tool definition here which takes in the [46:27] description of the soul. We're going to [46:29] wire this into our chatbot so that it [46:31] can then call this information. Then [46:33] we'll ask the agent to create this admin [46:35] page that's going to let us debug the [46:37] soil on the screen and that's going to [46:40] need an associated API route so that it [46:42] can actually fetch that data. All right, [46:44] I've already copied and pasted this into [46:46] cursor and let it run for a couple [46:48] minutes. It basically went ahead created [46:51] a to-do list and went one by one [46:53] creating the schema queries and updating [46:55] the prompt. And I'm just going to review [46:57] all of the files to make sure that [46:58] everything makes sense here. All right, [47:00] so I've started a new chat and I've just [47:01] said hi. And we can see here that the [47:04] agent has noticed that it's the first [47:06] interaction in the conversation. So it [47:09] needs to run the onboarding prompt and [47:11] ask about the name, the style, and the [47:13] principles. I'll go ahead and answer [47:16] these. [47:19] All right. So I give it a name, told it [47:20] to be friendly, told it I also wanted to [47:23] learn new Japanese words, and then I [47:25] told it to explain if it ever makes any [47:28] deviations from the original [47:30] instructions. We can see that it calls [47:32] the new set soul tool. So it includes [47:34] all of this information that I just gave [47:36] it. And then it also adds a memory to [47:39] super memory so that it can remember [47:41] this in the future. I'll just ask to [47:43] make sure that my email functionality is [47:45] still working with Composeio. And let's [47:47] see how it changes with the new system [47:49] prompt. [47:54] It's still able to use Composeio tools [47:56] to fetch my emails. It summarizes them [47:58] simply and then it ends off the message [48:00] with a new Japanese word. We can then [48:02] verify in /admin/ aent to check out the [48:06] agent's personality definition. And we [48:09] can see all of this is working right [48:12] here. Then I'll actually inspect how [48:14] this looks like in the database. So I'll [48:16] ask cursor to start the drizzle studio [48:18] since I forgot what the command was. It [48:20] starts it up with pnpmdb studio and I [48:23] can go check it out by going to this [48:25] link. All right. So we should see a new [48:27] soul column if we scroll horizontally [48:31] and we see right here that there's a new [48:33] user soul property. So for this latest [48:36] user I've have my soul defined but for [48:39] all these other guest users they don't [48:41] have any soul defined for their AI [48:44] agent. Great. So now our agent has a [48:46] soul and it can now remember facts and [48:49] it also has a stable identity to use for [48:51] the rest of the prompts. So user facts [48:53] like memories live in super memory and [48:55] the agent's personality is going to live [48:57] in the user.soul column. Great. So we've [49:00] built up our agent from a chatbot to an [49:02] agent with tools to an agent with memory [49:05] and now an agent with a personality. You [49:08] might have seen popular AI tools living [49:09] inside your messaging apps like [49:11] iMessage. We have poke here on the left [49:13] and then get Victor here on the right [49:14] that lives in your Slack. And from a [49:17] product standpoint, this makes sense. [49:18] It's basically a distribution problem [49:20] where you have to make sure that you [49:21] meet your users where they already are. [49:23] There are way more active smartphones in [49:25] the world than laptops and desktop [49:27] computers. So, if your AI agent only [49:30] lives inside of a browser tab, you're [49:32] making users come to you instead of [49:34] putting the agent where they already [49:35] spend most of their time. Since Chat GBT [49:37] came out, most people have interacted [49:39] with AI through a laptop. But what do [49:41] you always have on you? Your phone. So [49:44] in this section, we're going to make our [49:45] AI agent more accessible by linking it [49:48] through in the Telegram mobile app. The [49:50] key idea here is that Telegram is not a [49:53] separate agent. It's just another front [49:55] door into the same app. It'll have that [49:58] same user information, tools, and memory [50:01] just living inside of Telegram. Our web [50:03] app and Telegram are both going to point [50:05] to the same agent runtime. And once the [50:07] telegram chat is linked to our web user, [50:10] both channels are going to use that same [50:12] user ID to identify the user. And that's [50:14] what makes this whole thing work. If I [50:16] connect Gmail on the web app, Telegram [50:18] can use that same Gmail connection. And [50:20] if the agent remembers something, it can [50:22] always call that same super memory [50:24] service for the relevant context. To set [50:26] this up, we're going to use the exact [50:27] same workflow that other apps like [50:29] OpenClaw use to connect users to [50:32] messaging apps like Telegram. First, [50:34] we'll use botfather, which is the [50:35] official Telegram bot that gives us our [50:38] bot token. Second, we're going to create [50:39] a web hook secret. This is basically [50:41] like a password that Telegram sends with [50:43] each request so that our app can verify [50:46] that the request really came from [50:47] Telegram. Then, because we're running [50:49] this all locally, we'll use Enro. More [50:51] on that later. But after we register the [50:53] web hook and link our Telegram account, [50:55] we should be able to send messages to [50:57] our AI agent from the app. All right. [50:59] So, following the instructions on the [51:01] screen here, first I'm going to open up [51:03] Telegram on my iPhone. Once I have this [51:06] opened up, I'm going to follow this step [51:08] and search up botfather. Bot father and [51:12] open up a chat. In the list of the [51:14] starter commands, you can see that we [51:16] can click create new bot here. So, I'll [51:18] click that and I'm going to add a name [51:20] for my bot. Okay. And I'll make it. So, [51:24] this has to be a unique name. One, two, [51:26] three. Bot. Great. Right. So, it's going [51:29] to create a new bot. We can tap this to [51:32] go to it. And we can also look at this [51:35] token on the bottom. And we need to [51:37] secure this and store this for later. [51:39] I'll copy the whole message. [51:43] And I'll put this on my Apple Notes so [51:44] that I can open it up on my Mac. All [51:46] right. So, I'll open this on my Mac. [51:48] First, I'll grab this code snippet [51:52] and populate it in myv.local [51:54] file. [51:57] The bot token [52:00] is this goes up top here. The Telegram [52:03] bot name is right here. [52:07] And for the Telegram web hook secret, [52:09] we're going to generate this in a [52:11] terminal window. Open one up. [52:14] And I'll copy this command. [52:19] Open SSL randex 16. [52:23] And I'll grab that key. and we're going [52:26] to use this as our web hook secret. [52:30] Okay, the next public app URL can stay [52:33] like this. And then I'll go back to the [52:36] terminal [52:38] with my dev server running. I'll hit [52:40] control C to close it. And I'll type in [52:43] pnpmdev to restart the server. Great. [52:45] And that should make it pick up all [52:47] these new tokens. Next, we're going to [52:50] set up enro. And if you already have it [52:52] installed, the command is simply rue [52:55] install. Then create a free account on [52:58] Enro and go to dashboard.enrock.com. [53:01] Then over here on our account settings, [53:04] we can just grab our O token and you [53:07] should treat this like a password and [53:09] we're going to copy this line. [53:12] go to our terminal again [53:15] and we'll replace this line [53:18] up until the dollar sign [53:21] with our enro token [53:24] and hit enter. [53:27] I'm going to start a new terminal window [53:31] and I'll run enro http 3000. [53:39] That's going to forward all the requests [53:41] to this URL to our localhost 3000. So [53:45] now we'll go back into ourv.local [53:49] and we'll replace the public app URL [53:52] with the enro URL. [53:56] Then once again we can see our dev [53:58] server has reloaded the env file since [54:00] we made some changes. And so if you ever [54:02] find this stops working it might be [54:04] because you restarted your enro server. [54:07] So every single time this forwarding [54:08] address is going to change and you'll [54:10] have to update your ENV file. Here's a [54:12] quick explanation of how the web hook is [54:14] now working and why it's necessary for [54:16] it for Telegram to call our app. This is [54:19] the basic workflow which is that a user [54:21] is going to send a message through the [54:22] Telegram app. Telegram is going to send [54:24] a request to the web hook URL that's [54:27] points to our app and then it's going to [54:28] run the agent workflow that we know and [54:31] love. The reason this is important is [54:33] because instead of our app constantly [54:35] asking Telegram if there are new [54:36] messages, we can get this one-way tunnel [54:39] between Telegram and our app through the [54:41] web hook URL. And remember, the reason [54:43] we're using Enro here is because we need [54:46] HTTPS, which is the secure version. And [54:49] when we're in local development, we only [54:51] have HTTP available. So that's why we [54:53] use Enro. Now that Enro is set up, let's [54:56] grab the agent ready prompt for this [54:59] section. There are three main pieces in [55:01] this prompt. First is the Telegram bot [55:03] API wrapper. These are going to be some [55:05] helper functions that help us to send [55:07] messages, register the web hook, and [55:10] check for bot info. The second is going [55:13] to be the second is the actual web hook [55:15] route. This is the listener where [55:17] Telegram actually sends incoming [55:19] messages. And the third is the linking [55:21] system and this maps a Telegram chat ID [55:23] to one of our app users. Once again, we [55:26] have this telegram page that we have [55:28] available so that we can link our [55:30] telegram to the user and then we have [55:32] some verification instruction. Looking [55:34] over here, we have some changes to our [55:35] schema.ts file. Remember, this is going [55:38] to affect our database. In this part, [55:39] we're going to make sure that the cursor [55:42] agent runs the generate and migrate [55:44] commands and this is going to create [55:46] migration files and apply them so that [55:49] our database sees the changes that we're [55:51] making to include all these Telegram [55:53] columns. Okay, so it looks like it [55:56] finished its seven to-dos. [55:59] It added the new Telegram database [56:01] fields, ran the migrations on the [56:03] database, and even added some debugging [56:05] pages that we can check out. And [56:07] finally, it gives a step for us that we [56:09] need to verify live with the actual Enro [56:13] web hook delivery, Telegram token, and [56:15] do a test case to make sure everything's [56:17] wired up properly. All right, so next we [56:20] need to tell Telegram where our app [56:22] actually lives. But Telegram still [56:24] doesn't know where to send messages to [56:26] connect to our bot. So let's go back to [56:29] localhost 3000 and we'll open up the [56:32] Telegram debug page. This is just a [56:34] developer page that we're using to make [56:37] sure that we've set the bot and the web [56:39] hook. And it looks like we don't have [56:41] the web hook set up yet. Next, let's [56:42] just register the web hook. [56:45] And it looks like it's not working [56:46] because the HTTPS URL must be set. This [56:50] actually failed for some reason. So, I [56:52] passed all this information back to the [56:54] cursor agent. And it looks like there [56:56] was a fallback URL error. So, it goes [57:00] ahead and fixes it for me. I'm going to [57:02] restart my dev server. And I'll click [57:05] register. I'll refresh the [57:07] localhost/telegram [57:09] page. And I'll try to refresh. And then [57:12] I'll try registering the web hook again. [57:14] All right. Looks like it's registered [57:16] now. And we'll go back to cursor. So, [57:18] the most important stuff is in this [57:20] telegram.ts ts file where you can see [57:22] that we're grabbing the web hook secret [57:24] and that's this secret that we generated [57:26] over here. We're also hitting this URL [57:29] which is telegram web hook [57:32] and it's basically this next.js route [57:34] that we've defined to process it. This [57:36] can be a tricky section to get right [57:37] just because there's a little bit of [57:39] wiring and integration going on. So, if [57:42] something goes wrong at this step, make [57:44] sure you have your Enro terminal running [57:46] and you've copied the full URL and put [57:49] it into yourv.local file. Make sure that [57:52] your Telegram web hook secret is set, [57:55] your bot username is set, and your bot [57:57] token was set up by the botfather. And [58:00] you can reset any of these steps if you [58:02] think there was an error there. Another [58:04] page we created was the /admin/telegram [58:07] page. This is going to show us the [58:09] current loggedin user and it has this [58:11] button so that they can link their [58:13] Telegram account. This is going to [58:14] generate a one-time code for our user. [58:17] So now we can link this manually on our [58:19] phone now that we have this code. So I'm [58:21] going to open up Telegram one more time. [58:23] Go to my free code camp startbot. All [58:26] right. So we'll hop back into the free [58:28] code camp bot. Type in /start with the [58:31] code. And then you should get a message [58:33] that it was linked. Now, if I say hi, [58:36] you'll see that I get messages back from [58:38] my Telegram bot talking to me in [58:40] Japanese like we said in the soul.md [58:43] earlier. We'll let it run for a couple [58:44] of seconds and then it grabs all of my [58:46] emails. This is a huge product upgrade [58:48] because instead of only being able to [58:50] talk through the web app, people can now [58:52] talk to their AI agent through the [58:54] messaging app that they already use [58:55] every day. In the next section, we'll [58:57] add one of the most powerful OpenClaw [58:59] features, scheduled jobs. I'll see you [59:01] in the next one. Up until now, we've had [59:03] to message our agent in a manual [59:05] turn-based way. This means that unless [59:07] you're constantly chatting with your [59:09] agent, it isn't doing anything for you. [59:12] Like most people who message chat GPT or [59:14] Claude, the AI is only going to respond [59:17] whenever you send a message. But to make [59:19] our AI agent truly usable, our agent [59:22] should act more like an employee. Once [59:25] we've discussed the way that we like to [59:26] do things, it should be able to go and [59:29] do those things by itself on a [59:31] predetermined schedule. And that's [59:33] exactly what we're going to build in [59:34] this section. Instead of an agent that [59:36] only works when you message it, we're [59:38] going to create a heartbeat for our [59:40] agent. The ability for it to wake up on [59:42] its own and run predefined workflows. [59:45] Going back to our body analogy, we're [59:47] just going to add another tool to our [59:49] agent, and this is going to be the [59:50] schedule task tool. [59:52] These are commonly referred to as cron [59:54] jobs. And to use crons, we're going to [59:56] use a service called versel cron. So you [59:59] can read more about versel cron jobs [60:01] here. But basically this is going to [60:03] call a URL on our app that runs [60:05] predetermined agent workflows. The flow [60:08] is the user is going to ask the agent in [60:09] chat to run a workflow every single day [60:12] at a specified time. The agent is going [60:14] to call its schedule task tool which [60:17] writes a new row in the database. And [60:19] every day when Verscell Chron runs, it's [60:22] going to call our AI agent. It's going [60:24] to check if there's any tasks ready to [60:26] be run. And then it's going to run that [60:28] task and update the row in the database [60:30] so that we know that it was already run. [60:33] So when the user has a prompt like run [60:35] this workflow daily, the model is going [60:38] to see that user message, check its [60:40] system prompt to see all of its tool [60:42] definitions, and then it's going to call [60:44] the schedule task tool so that it can [60:47] add that new task to our cron jobs [60:50] table. All right, so now let's go to the [60:52] heartbeat section and follow all of [60:53] these instructions. [60:55] One important thing to mention is that [60:56] on Verscell's free hobby plan, we can [60:58] only run this schedule once a day. So, [61:01] if you want to get per minute [61:02] scheduling, we'll have to upgrade to one [61:04] of their paid plans. All right, first [61:06] thing we're going to do is run this [61:07] command and create a new cron secret. [61:09] So, I'll open a new terminal window. [61:13] Paste this in. And I'll grab this code [61:18] and I'll write cron secret [61:20] equals that code. Then I'll also go to [61:24] my versel environment variables and add [61:27] this cron secret there as well. Go to [61:29] our project [61:33] environment variables, [61:37] add environment variable, [61:40] and I'll just paste this whole thing in [61:42] there. [61:45] Next, we'll run this command in the [61:47] terminal to add the cron parser. And [61:50] then we'll copy the agent ready prompt [61:52] from here. [61:55] And I'll open a new chat and run this. [62:00] Okay, so there are three main components [62:01] to this prompt. First, we're going to [62:03] add this cron job table to our database. [62:05] This table is going to have the ID of [62:08] the task, the user that created that [62:10] task, the cron expression, which defines [62:13] how often they want it run, the prompt [62:15] the agent is going to use when it's [62:17] called, and when we want this to run at. [62:19] And then, as with every change to our [62:21] database, we're going to make sure we [62:22] run the appropriate migrations. Then [62:24] we're going to create some queries so [62:26] that we can create, fetch, and update [62:29] these jobs. And then we'll create three [62:32] new tools for the agent to call. This [62:34] way, the agent can schedule new tasks [62:37] based on the user's preferences, list [62:39] all of the schedules, as well as cancel [62:41] schedules, all in natural language. Then [62:44] we'll create the route that Versell is [62:46] going to hit every single day. And [62:48] finally, we'll add some simple debugging [62:50] UI so we can see all the schedules and [62:53] make sure that everything is working [62:54] properly. So, we'll run this and I'll [62:56] check in when this is done. So, it added [62:59] the chat route, updated our database [63:01] layer, and then it ran the database [63:03] migrations, created new tools for our [63:04] agent, and then it just wired everything [63:06] together for us. Looks like everything's [63:08] good. And then I just added one more [63:10] follow-up prompt, and I asked it to wire [63:12] the admin schedules into the user [63:14] settings tab. Let's go check out the [63:16] changes. If we go to the settings, it [63:18] added this new schedules tab. And we can [63:21] see that for the user, they have no [63:23] scheduled tasks yet. And I'll say, [63:24] "Every day at 9:00 a.m., look at my last [63:26] five emails and create a summary." [63:30] Great. So, it looks like it calls the [63:32] new schedule task tool. It creates the [63:35] chron expression, and this just means [63:37] every day at 9:00 a.m. We can see the [63:39] full prompt that it used with the right [63:41] level of details. We can see that it was [63:43] successfully created and then the agent [63:45] gives us a summary. Let's hop back into [63:47] our schedules and we can see the new [63:49] scheduled task appear there. If we look [63:52] at our last output, there's nothing [63:53] there yet. And then if we hop into our [63:55] database, we can see that this new [63:57] scheduled task with all the right [64:00] information has shown up in the [64:02] database. All right. So, I'll go back to [64:04] the admin tab and I'll just run this [64:06] manually so that we don't have to wait [64:08] for 9:00 a.m. to see how this looks. And [64:11] we'll give this a couple of seconds as [64:12] this is running in the background. And [64:14] we get a summary of our last five [64:17] emails. And it still has our agent [64:20] personality there giving us a Japanese [64:21] word. Over in the database, if we give [64:24] it a refresh, we're going to see that [64:25] the last output column is going to [64:27] update. And this also has the exact same [64:30] information there. All right. And let's [64:31] do one final test. Let's make sure that [64:33] we can delete the schedule. I'll go back [64:35] to my agent and say delete all my [64:37] scheduled tasks. All [64:42] right. First, it lists the schedules so [64:44] it can grab this ID. And then it cancels [64:46] the schedule with the same ID and [64:49] confirms that they're gone. Let's go [64:51] check out and confirm that. And there's [64:54] no more scheduled tasks here. [64:57] And in the database, there's no more [64:59] scheduled tasks. All right. So, all we [65:01] need to do to get this production ready [65:03] is to update our Telegram web hook to [65:06] our actual domain. To grab your domain, [65:08] go back to Verscell, find your project, [65:12] and then grab this URL, [65:15] copy it, and I'll go back to my next [65:17] public app URL and put it there without [65:20] the backslash. [65:26] Same thing on the production environment [65:28] variables. You can copy this, paste it [65:30] here. And so this is going to point to [65:32] your actual domain. And give it a save. [65:36] In this last section, I put together a [65:38] quick checklist for making sure you have [65:40] all the right API keys, how to generate [65:43] your web hook secrets and cron secrets. [65:46] And so if any of your services fail, [65:48] it's usually an environment variable [65:49] issue. So just go and double check and [65:51] regenerate those if needed. Then we'll [65:53] go back into the chatbot. There's a [65:55] bunch of changes here. So we're going to [65:56] commit all of these to GitHub. Now I'm [65:58] just going to commit I'm just going to [66:00] stage all of these changes to GitHub. [66:03] I'll call it initial commit and give it [66:05] a commit and push. [66:07] If we hop back into the project on RCL [66:10] and we go to the deployments tab, we [66:12] should see that it's building [66:15] that new deployment. And this should [66:16] take a couple of minutes to fully [66:18] deploy. Another thing you should be [66:19] aware of is that every single time you [66:21] change your environment variables, your [66:22] app will not redeploy. So, just make [66:25] sure that when you do that, you go back [66:26] to your deployments and you can click [66:28] here and you can always redeploy to get [66:31] your latest environment variables. All [66:34] right, I hope you enjoyed the tutorial. [66:36] If something breaks, feel free to open [66:38] up an issue on GitHub or send me a DM on [66:40] Twitter and I'll help you debug it. The [66:42] point of this tutorial wasn't to build [66:44] openclaw feature for feature. It was to [66:46] teach you about the fundamentals around [66:48] how AI agents work under the hood. At [66:50] Composio, we also released another [66:52] productionready version of this same [66:54] chatbot and it's called trustclaw.app [66:57] and you can view the source code for it [66:59] on GitHub and actually deploy this for [67:02] yourself on Verscell. It's built on the [67:04] exact same tech stack he used in this [67:06] video, Composio, Verscell AI, Postgress, [67:08] Telegram, and cron. Anyway, that's it [67:11] for this tutorial. Thanks so much for [67:12] staying until the very end. And as [67:14] mentioned, all the links and resources [67:16] will be in the description for you to [67:18] check out and clone the templates.