Introduction

In this project, I want to build an effective AI coding agent from scratch, I will try to replicate cursor’s Cmd+K feature, which is a fast edit feature that allows the user to insert desired codes into a certain line, the agent is able to catch and process the context.

I am going to build the ai agent on a web browser, this project is primarily for my collaborative web AI-powered LaTeX editor.

Simple Design

Defining Functions for Tool Calls

Context Management - is the first function that we need, in coding applications like cursor, they use modules like fs to directly access user’s file on their disk, this allows applications like cursor to immediately grab the latest, even unsaved changes. Since we are building a web-based agent, we have to find another way to grab the most recent changes from the user. There are two ways we can do this:

1. Simple Server-Side Agent
   1. Agent runs in our backend and is called through API.
2. Browser Native Agent
   1. Agent runs in browser through WebContainer. for example, my context management function (let’s say read_file() ) tool calls webcontainerInstance.fs.readFile()

I would go for second option because the second option runs on user’s browser with better security, latency and scaling complexity. The following page documents the tech needed to build a browser native AI agent.

Quick Edit Action fastEditAction.ts

We want user to use Command + K to initiate the quick edit feature, let’s break things down to micro parts and start from the very beginning, in this fastEditAction.ts file, we want the flow to look like the following:

1. Listens for the Cmd+K keystroke
2. Grab the user’s selection
3. Pass the info the another service to process the info, let’s define that as codeEditService.ts