Mitali Laroia
Back to blog
•
7 min read
Your personal Cursor: Agents & Tools

Your personal Cursor: Agents & Tools

How AI Agents are able to write code when integrated with IDEs

In my previous blog, we looked at different prompting styles. Now we will be moving one step ahead, we will using COT prompting style to make a mini cursor for ourself, and vibe-code a portfolio website. But first let’s have a look how the popular AI Agents like Cursor are actually writing code into your IDEs?

Chatgpt: 2023 to 2024

If you remember using Chatgpt during it’s first few phases after launch, and ask questions requiring the tool to have real-time updated information around the globe like “Hey, what’s the weather in Delhi today?”, then you would have got the famous reply: “I’m sorry, but my knowledge of current events is limited to information available up to September 2021”.

Why So?
We know that GPT stands for Generative Pre-Trained Transformers. All the LLMs are Pre-Trained, since the data on which these models are being trained is extra-ordinarily large hence, the whole training process is extremely costly, we know how GPUs are the hype these days. Hence the training process of the models (or the upcoming models) happens once a while, making it extremely difficult to keep the LLMs up to date in real-time.

I know what you must be thinking, if you go to Chatgpt today and ask the same question: “Hey, what’s the weather in Delhi today?” it will give you the expected response, and it’s all because of tools. You can see one small icon just below the chat’s text box, where you can see the available tools for Chatgpt:

Focus, on the highlighted “Search the web” tool, so when you ask the weather of any city/country, the LLM use the “matching” tool, here the tool that is the closest to answer the query is “Search the web”, Hence underlying logic makes Chatgpt do a web search and fetch the answer to the user query. You can also see the tools that Cursor is using as of now.

Agent: use AI to pursue goals

Agent = Brain + Organs

Let’s simplify the complex definitions that are all over the internet. All LLMs are like brain of a human (neural networks), it’s capable of making decisions, just like in the Desi Mom Chatbot it was able to give appropriate reply to a question which is not related to Python programming. But a brain is incapable of doing any task without the body organs, that’s where tools comes in the picture. So by giving the appropriate tool to the brain(LLM) you can make an Agent capable of performing user-desired actions.

Let’s Build an Agent:

Using various tools now let’s build a mini-cursor that will help you vibe-code a full stack application (JavaScript, Node.js, React & Python). We will divide the whole process of coding an application in various stages, just how we all approach development and for each step we will create a tool in the form of python function to execute that step, in last making LLM aware of these tools by using System Prompt.

Available Tools:

Initialize, Code, Run, debug, Repeat

Here’s a gist of tools that I have used to make my Mini-Cursor code and debug the application while keep user inputs in mind:

  • run_command: Execute shell commands
  • install_package: Install packages with npm, yarn, or pip
  • read_file, write_file: File I/O
  • validate_code: Syntax check for Python, JS/TS, JSON
  • list_files: Directory structure
  • debug_error: Analyze errors and give suggestions
  • create_project: Bootstrap projects (React, Express, Next.js, Vite)

You can find the code for these here. You can write these tools in any programming language and while coding the tools that will run commands make sure that the commands are supported in the operating system that you are using your mini-cursor on.

System Prompt:

Now’s let have a look at our System Prompt:

You are Mini-Cursor, a specialized AI coding assistant expert in JavaScript full-stack development. You help users build modern web applications using React, Node.js, Express, and related technologies.  
  
You work in start, plan, action, observe mode for systematic problem-solving.  
  
For any coding task, follow these steps:  
1. Analyze the user's requirements  
2. Plan the implementation approach  
3. Execute actions using available tools  
4. Observe results and iterate if needed  
5. Provide final solution with explanations  
  
Rules:  
- Follow the Output JSON Format strictly  
- Always perform one step at a time and wait for next input  
- Carefully analyze user requirements before starting  
- Validate code after writing  
- Debug errors systematically  
- Install required packages when needed  
- Focus on modern JavaScript/TypeScript practices  
  
Output JSON Format:  
{{  
    "step": "string",  
    "content": "string",   
    "function": "The name of function if the step is action",  
    "input": "The input parameter for the function"  
}}  
  
Available Tools:  
- "run_command": Execute shell commands (git, npm, node scripts, etc.)  
- "install_package": Install packages using npm, yarn, or pip (specify package_manager as second param)  
- "read_file": Read contents of any file  
- "write_file": Create or modify files with given content  
- "validate_code": Check JavaScript/TypeScript/Python/JSON syntax  
- "list_files": Show directory structure and files  
- "debug_error": Analyze error messages and provide debugging suggestions  
- "create_project": Create new React, Next.js, Express, or Vite projects  
  
Example Workflow:  
User Query: "Create a React app with an Express backend API"  
  
Output: {{ "step": "plan", "content": "User wants a full-stack application with React frontend and Express backend. I need to: 1) Create React app 2) Create Express server 3) Set up API endpoints 4) Configure CORS for communication 5) Provide run instructions" }}  
  
Output: {{ "step": "action", "function": "create_project", "input": "frontend||react" }}  
  
Output: {{ "step": "observe", "content": "React app created successfully" }}  
  
Output: {{ "step": "action", "function": "create_project", "input": "backend||express" }}  
  
Output: {{ "step": "observe", "content": "Express server created successfully" }}  
  
Output: {{ "step": "action", "function": "install_package", "input": "cors||npm" }}  
  
Output: {{ "step": "observe", "content": "CORS package installed in backend" }}  
  
Output: {{ "step": "action", "function": "write_file", "input": "backend/routes/api.js||const express = require('express');\nconst router = express.Router();\n\nrouter.get('/health', (req, res) => {\n  res.json({ status: 'API is working!' });\n});\n\nmodule.exports = router;" }}  
  
Output: {{ "step": "output", "content": "Full-stack React + Express app created! Frontend in ./frontend, backend in ./backend. Run 'npm start' in both directories." }}  
  
Focus Areas:  
- React (hooks, components, state management)  
- Node.js and Express.js backend development  
- RESTful API design and implementation  
- Database integration (MongoDB, PostgreSQL, SQLite)  
- Modern JavaScript/TypeScript best practices  
- Frontend build tools (Webpack, Vite)  
- Package management with npm/yarn  
- Git workflow and deployment  
- Testing with Jest, React Testing Library  
- CSS frameworks (Tailwind, Bootstrap, styled-components)

I have divided the execution of user query in various steps, such that it is easier to visualize what LLM is trying to do and hence, it becomes a lot easier to debug. And the system prompt also mentions all the available tools that we have created. The Example workflow shows how we are expecting our Mini-Cursor to break down the problem into smaller steps, look for available tools and see which tools matches the requirements and use it for the purpose.

Demo:

Now let’s make our agent code a personal finance tracker:

I hope you liked the vibe coding session with our Mini-Cursor, have a look at the source code.

Happy Learning 😊.