Building an AI Agent using TypeScript and Next.js

Introduction to the Session

The session begins with the speaker introducing themselves and the topic of building a simple AI agent using TypeScript. The speaker asks the audience if anyone has experience with the Open AI API, and about half of the audience raises their hands. This is the screenshot of the introduction to the session

Speaker Introduction and Background

The speaker introduces themselves as Paro, a Tech Lead and Deputy Head at PALO IT. They explain that they are an expert in making smoothies and have experience working with banks and insurance companies. This is the screenshot of the speaker introduction

Introduction to PALO IT and Services

The speaker explains that PALO IT is a consulting company with branches in 10 countries around the world. They offer services such as digital transformation, product development, and DevOps. They also mention that they are selling GitHub Copilot, a tool that helps with coding.

Motivation and Background of the Session

The speaker explains that they were inspired to create an AI agent that can execute Bat scripts after reading a paper about OS copilot, a mobile agent that automates tasks on a phone. They wanted to create an AI that can control everything in a computer.

Goal of the Session

The speaker's goal is to create an AI agent that can do DevOps, automation, and coding work. They want to demonstrate how to build a simple AI agent using TypeScript and Next.js.

Demo of the AI Agent

The speaker shows a demo of the AI agent, which can set up a local backend in under a minute. They explain that the AI agent can receive instructions, generate a plan, and execute it on a computer. This is the screenshot of the demo of the AI agent

How the AI Agent Works

The speaker explains that the AI agent works by receiving instructions from the user, generating a plan, and executing it on a computer. They explain that the AI agent can work in two modes: step-by-step mode and auto mode.

Introduction to ReAct

The speaker introduces ReAct, a prompting pattern that allows the AI agent to reason before taking action. They explain that ReAct is based on a research paper that showed that by letting the AI agent reason first, it can work much better.

Basic Code of ReAct

The speaker shows the basic code of ReAct, which is a Python code that uses a loop to generate a plan. They explain that the code uses an observation function to get feedback from the user and adjust the plan accordingly. This is the screenshot of the basic code of ReAct

Implementation of the AI Agent

The speaker explains that they used full-stack Next.js to implement the AI agent. They used two APIs: Run Open AI and Run batch. They also updated the repository to use Open AI's Structure output, which makes it easier to write code.

Example of Writing with ReAct

The speaker shows an example of writing with ReAct, which generates a plan to set up a local backend. They explain that the AI agent can execute the plan and provide feedback to the user.

System Prompt

The speaker explains that the system prompt is used to specify the task that the AI agent needs to perform. They explain that the system prompt can be used to generate a plan and execute it on a computer. This is the screenshot of the system prompt

Open AI SDK

The speaker explains that the Open AI SDK is used to send messages to the Open AI API. They show an example of how to use the SDK to send a message and get a response.

Message Object

The speaker explains that the message object is used to send messages to the Open AI API. They show an example of how to create a message object and send it to the API. This is the screenshot of the message object

Conclusion

The speaker concludes the session by summarizing the key points and providing additional resources for further learning. They also invite the audience to ask questions and provide feedback. This is the screenshot of the conclusion