Tag Archives: coding assistants

๐Ÿš€ A Guide for B.Tech CS Students to kickstart your AI journey

๐Ÿ‘‹ Introduction

My daughter will be starting her B.Tech in Computer Science at MIT, Manipal this year. As a huge AI proponent, I often share the latest AI trends and tools with my family. When my daughter decided to pursue CS, she asked me several questions about AI, which inspired this blog. I hope this guide helps any student planning to specialize in CS and AI.


๐Ÿ“š Core Fundamentals for CSE Students

Before diving into AI, itโ€™s crucial to master the basics. These are some of the building blocks for everything youโ€™ll do in computer science. Following links will give you an overview of the basics before you deep-dive.


๐Ÿ“ General Advice for Students

In addition to doing your coursework, following tips can help you to be more practically prepared for the industry .

  • Start with Fundamentals: Focus on math, programming, data structures, and algorithms.
  • Build a Portfolio: Work on projects, participate in Kaggle competitions and hackathons, and maintain GitHub repositories.
  • Network: Join AI clubs, attend meetups, and connect with peers and professionals on LinkedIn.
  • Stay Updated: Follow AI news, research, and trends.
  • Internships: Real-world experience is invaluableโ€”seek internships early.

๐Ÿ› ๏ธ Tools to Try Out

Following is just a sample collection at this point of time. The tools change so fast so it’s very important to keep yourself updated with the latest.

  • Chatbots: ChatGPT, Gemini (Try ChatLLM, an aggregator of chatbots and other AI tools collection, its very handy)
  • Vibe Coding: Cursor, Windsurf, Replit, Pythagora (see my earlier blog for more)
  • Image Generation: DALL-E(OpenAI), Midjourney
  • Video Generation: Google Veo
  • ML Platforms: Google AI Studio(Good to experiment with Google AI models), Kaggle(Kaggle competitions are good, good for datasets and notebooks), Hugging Face(Marketplace for models, datasets and easy to share the ML work with others)
  • Automation: Zapier (AI orchestration platform connecting different AI and non-AI tools and platforms)

Note: โ€œVibe codingโ€ refers to using AI-powered coding environments that help you code faster and more intuitively.


๐Ÿค– Exploring AI Domains & Career Paths

Hereโ€™s a quick overview of different AI roles, what they do, prerequisites, and how to get started. AI industry is still at its nascent stage, these roles can change as the technology matures.

RoleWhat They DoPrerequisitesHow to Get In
AI ResearcherDevelop new AI models/algorithms, advance the field, publish researchStrong math (linear algebra, stats), deep ML/DL, Python, PyTorch/TensorFlow, research skills, academic writingAdvanced courses (Masterโ€™s/PhD), join research labs, open-source, publish papers, attend conferences
ML EngineerBuild, optimize, and deploy ML models in production; manage ML systemsProgramming (Python, C++/Java), ML frameworks, software engineering, cloud (AWS/GCP/Azure), MLOps basicsEnd-to-end ML projects, internships, open-source, learn CI/CD, Docker/Kubernetes, model deployment
Data Engineer/ScientistBuild data pipelines, clean/process data, extract insights, visualize findingsPython, SQL, data wrangling, statistics, data viz, ML basics, big data tools (Spark, Hadoop)Data science/engineering courses, Kaggle, portfolio projects, internships, learn data tools and visualization
AI Application EngineerIntegrate AI models into real-world apps/products; focus on APIs and UXProgramming (Python, JS, etc.), API development, front/back-end, basic ML, UX/UIBuild AI apps, hackathons, internships, learn REST APIs, cloud deployment
AI Security & SafetyEnsure AI systems are secure/safe; address ethical, legal, and risk concernsSecurity fundamentals, cryptography, adversarial ML, AI ethics, risk, regulations, ML basicsCybersecurity/AI ethics courses, CTFs, follow AI safety research, join labs/organizations
AI Product ManagerDefine vision/strategy for AI products; bridge tech and business teamsAI/ML concepts, product management, communication, business acumen, user researchStart as engineer/analyst, PM courses, AI projects, internships, develop leadership/communication
AI Hardware SpecialistDesign/develop hardware/software (GPUs, TPUs, SDKs) for AI training/inferenceECE/CS, digital design, computer architecture, parallel computing, C/C++, CUDA, ML basicsECE/CS courses, hardware internships, FPGA/GPU projects, hardware-software co-design, follow NVIDIA/AMD/Intel

๐Ÿง‘โ€๐Ÿ’ป AI Basics for Students

Following is just a sample to get started with AI basics.


๐Ÿค” How Should College Students Use AI (and How Not To)?

  • Donโ€™t: Use AI chatbots to solve class assignments directlyโ€”this can kill creativity and hinder learning.
  • Do: Use AI as a learning tool to explore new ideas, get feedback on completed assignments, and clarify concepts after self-study.
  • Tip: Treat AI as a personalized teacherโ€”seek help only after youโ€™ve tried solving problems yourself.

๐Ÿ”„ Staying Updated with AI

  • Curate Resources: Make a repository of your favorite podcasts, blogs, and YouTube channels.
  • Hands-On Practice: Try new AI tools and work on personal projects.
  • Mix Coding Styles: Combine โ€œvibe codingโ€ (AI-assisted) with traditional coding to strengthen your skills.

๐Ÿ’ก Is AI Going to Take My Job?

A typical software engineer spends only 30โ€“40% of their time coding; the rest involves architecture, design, spec reviews, cross-functional discussions, integration testing, and release processes. While AI can assist with coding, these other activities are equally critical and difficult to automate.

Even within coding, engineers must structure code, manage module interactions, choose technologies, debug, test, scale, and deployโ€”tasks that require human judgment. AI coding tools can boost productivity by 30โ€“40% today, and possibly up to 70% in the next 1โ€“2 years. However, over-reliance on these tools can erode core skills, and poorly organized AI-generated code can become hard to maintain.

Thereโ€™s no substitute for strong design and coding fundamentals. Use AI tools as an assistant, not a replacement.

Jevons Paradox: If coding becomes much easier and cheaper, weโ€™ll see more coding projects and more coders, not fewer. The demand for skilled engineers will grow as we automate more of the world.

For the next 5โ€“10 years, CS engineers will remain essential. If AI ever surpasses humans in all aspects (AGI), it wonโ€™t just be engineersโ€”every profession will be affected.


๐ŸŒฑ Final Thoughts

CS or CS with AI specialization are fields of endless possibility. Stay curious, keep building, and remember: the journey is as important as the destination. Embrace change, focus on fundamentals, and use AI as a tool to amplify your learning and creativity.


Wishing all new B.Tech CS students an exciting and rewarding journey ahead!


Picture with my lovely daughter!

๐Ÿ” Debugging Web Apps with Cursor Just Got Smarter: Evaluating Browser Assist Tools

In my previous post, I shared my experience using Vibe coding and highlighted one of the biggest challenges in that workflow: AI coding tools often lack awareness of what’s happening in the browser when you run your app.

This leads to a frustrating dev loop: you’re forced to constantly copy-paste screenshots, console errors, and network logs into your code editor just to help the AI debug your application.

Luckily, thereโ€™s a new wave of tools built on the Model Context Protocol (MCP) that bridge this gap. These browser assist tools let your AI-enhanced code editor (like Cursor) directly observe, interact with, and sometimes even control your browser โ€” just like a real user.

Some of these tools go beyond debugging โ€” they can actually drive the browser, making them incredibly useful for UI testing and automation as well.


๐Ÿงช Tools I Evaluated

  1. Playwright
  2. Browser MCP
  3. Browser Tools MCP

Each of these plugs into Cursor via MCP and serves a slightly different purpose.


๐Ÿง  Architecture Overview

Cursor โ†’ MCP โ†’ Browser Assist Tool โ†’ Browser โ†’ Observed by LLM โ†’ Cursor responds
  • Cursor uses Model Context Protocol (MCP) to communicate with these tools.
  • The tools interact with the browser โ€” either controlling it or reading logs/events.
  • The data is passed to the LLM, which interprets it and responds inside Cursor.

๐Ÿงฉ Tool Breakdown

1. Playwright + MCP

Developed by Microsoft, Playwright is a full-featured browser automation framework that supports Chromium, Firefox, and WebKit. It works across OS platforms and supports headless execution โ€” making it perfect for automation and CI testing.

When integrated with Cursor via MCP, it becomes a powerful browser control agent.

โœ… Installation

"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}

๐Ÿ”ง Supported Functions

These functions are exposed by playwright using MCP. playwright has more functionalities than the ones that it exposes to MCP.

  • browser_click, browser_type, browser_navigate
  • browser_take_screenshot, browser_snapshot, browser_pdf_save
  • browser_tab_list, browser_tab_select, browser_tab_close
  • …and many more

๐Ÿ’ก Real Use Cases

  • Asked Cursor to debug console errors in my e-commerce app
  • Asked Cursor to test flows like “Add to Cart”, “View Product Details”
  • Used it for:
    • Clicking through workflows
    • Filling out forms
    • Scraping content
    • Capturing screenshots for visual debugging

โš ๏ธ Limitations

  • Doesnโ€™t read network logs or API errors
  • Click interactions does not work reliably with iframes

2. Browser MCP

This is a lightweight adaptation of Playwright, still MCP-compatible, but simpler.

โœ… Installation

  • Install Chrome extension (manual or via GitHub release)
  • Cursor config:
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}

๐Ÿ’ก Why It’s Useful

Unlike Playwright, Browser MCP can control your already open browser tab, without launching a new browser instance. This is helpful for debugging apps you’re already running in Chrome.

๐Ÿ”ป Downsides

  • Fewer features than Playwright
  • Better suited for lightweight debugging, not complex automation

3. Browser Tools MCP

This tool focuses entirely on browser introspection and debugging, rather than control.

Think of it as DevTools for your AI.

โœ… Installation

  • Install Chrome Extension
  • Start middleware:
npx @agentdeskai/browser-tools-server@latest
  • Cursor config:
"browser-tools": {
"command": "npx",
"args": ["@agentdeskai/browser-tools-mcp@1.2.0"]
}

๐Ÿ› ๏ธ Supported Functions

These are exposed by browsertools using MCP.

  • getConsoleLogs, getConsoleErrors, getNetworkLogs, takeScreenshot
  • runAccessibilityAudit, runPerformanceAudit, runSEOAudit, runNextJSAudit
  • wipeLogs, runDebuggerMode, runBestPracticesAudit

๐Ÿ’ก What I Could Do

  • Refresh app and automatically check network + console errors
  • Ask Cursor to analyze latency issues or API failures
  • Run full Lighthouse-style audits on performance and SEO

๐Ÿ“Š Comparison: Which One to Use?

Use CaseBest Tool
Browser automation + basic debugging๐ŸŸข Playwright
Full DevTools-style debugging๐ŸŸข Browser Tools MCP
Debugging current browser tab with minimal setup๐ŸŸก Browser MCP

๐Ÿง  Final Thoughts

Playwright is phenomenal โ€” not just for browser debugging, but for automation and testing at scale. If it added rich debugging support (like network logs and audits), it could become the one tool to rule them all.

Meanwhile, Browser Tools MCP fills that debugging gap beautifully today, while Browser MCP hits a sweet spot between the two.


๐Ÿ”ฎ Looking Ahead

I believe browser assist tools will eventually be natively integrated into code assist platforms like Cursor, eliminating the need for users to manually install and configure MCP plugins. In the future, these platforms will likely support a range of built-in agents that work seamlessly across different environments โ€” web, mobile, desktop โ€” and integrate with tools like databases, APIs, and SaaS platforms out of the box.

There’s also a new class of tools like Anthropic’s Computer Use and OpenAIโ€™s Operator, which aim to control not just browsers but the entire computer environment. It feels inevitable that these worlds โ€” browser automation, LLM-powered agents, and full computer control โ€” will start to converge.

Exciting times ahead. โšก

๐Ÿš€ One Month with Vibe Coding: Building Real Apps with AI Assistants

Over the past few months, Vibe coding has been gaining serious tractionโ€”and I couldnโ€™t resist diving in myself. Iโ€™ve been using AI coding assistants for a while, but I wanted to go deeper and really test what these tools can do in a realistic, end-to-end software development project.

So, I spent the last month building a full-featured ecommerce web and mobile app using some of the most talked-about Vibe coding platforms: Cursor, Windsurf, Lovable, Bolt, and Replit. It was a fun and empowering journeyโ€”thereโ€™s a real sense of accomplishment in being able to build software applications on your own. I also learned that working with the current generation of tools definitely requires a good deal of patience.

In this blog, Iโ€™ll walk you through:

  • My experience building and deploying the applications
  • What worked, what didnโ€™t, and what broke halfway ๐Ÿ˜…
  • How each tool stacks up in terms of usability, flexibility, and reliability
  • Whether tools like these mean we still need software engineers (spoiler: yesโ€”but itโ€™s complicated)
  • Where I think this whole Vibe coding trend is heading next

๐ŸŒ Coding Assistant Landscape: Then vs Now

AI coding assistants have come a long way. Here’s a quick look at how things evolved:

โฐ The Old School

  • Classic autocomplete tools like IntelliSense or TabNine helped speed up typing but werenโ€™t context-aware.
  • Low-code/no-code platforms (e.g., Bubble, Wix, Zapier) let users drag and drop components, but required scripting for anything complex.

๐Ÿง  The New Era: Vibe Coding

  • Powered by LLMs (Large Language Models)
  • Can write, refactor, debug, and deploy apps using natural language queries
  • Opens the door for non-developers to build apps
  • Empowers developers to skip boilerplate and focus on design, logic, and systems thinking

๐Ÿ’ก What is Vibe Coding?

Vibe coding refers to using AI-powered tools to build software via natural language prompts, mixed with lightweight manual coding. It’s all about staying in the flow and letting the assistant do the heavy lifting.

๐Ÿ’ก The Experiment

Although I started my career as a developer, I haven’t been actively coding in the last decade. Instead, I’ve focused on architecture, reviews, testing, and product design. That said, I wanted to push these Vibe tools beyond simple demos or prototypes.

So, I picked a moderately complex use case: an Ecommerce application with a web frontend and mobile app, complete with backend, auth, payment, and roles.

โœจ Features Implemented

- User authentication (sign-up, login, password reset, Google login)
- Roles: Admin, Seller, Customer
- Admin: manage users, view orders, seller capabilities
- Seller: add products
- Customer: browse catalog, filter/sort, add to cart, checkout
- Order history
- Payment integration with Razorpay

๐Ÿš€ Tech Stack Used

Frontend: React
Backend: Node.js + Express
Database: MongoDB
Deployment: Vercel / Render / Netlify depending on tool

๐Ÿ—๏ธ Environments

- Web app
- Mobile app (via Expo)
- Both local and production deployments

๐Ÿ”ง Tool-by-Tool Breakdown

Each tool was tested with the same requirements and judged based on ease of use, flexibility, ability to debug, and ability to deploy real features.

๐Ÿงช Cursor

๐Ÿ› ๏ธ Plan: Paid ($20)

๐Ÿ’ป Used With: MongoDB Atlas, Render/Vercel for deployment, Claude 3.7 model

โœ… Highlights:

  • Full tech stack flexibility
  • Supports both web and mobile
  • Git & database migration support
  • Wrote unit tests and debugged APIs
  • Workflow suits developers

โš ๏ธ Challenges:

  • Terminal tracking is weak
  • Frequent application crashes
  • Manual debugging needed

๐Ÿ“ฆ Artifacts:

Windsurf

๐Ÿ› ๏ธ Plan: Free and Paid version

๐Ÿ’ป Used With: Claude 3.7 & Gemini, Vercel/Render for cloud, Cloudinary for images

โœ… Highlights:

  • Better terminal/session management
  • Console log debugging is stronger

โš ๏ธ Challenges:

  • Hard to course-correct from incorrect assumptions
  • Hit credit limits fast (Ran out of credits with paid version in 3 days)

๐Ÿ“ฆ Artifacts:


โšก Bolt

๐Ÿ› ๏ธ Plan: Free

๐Ÿ’ป Used With: React + Vite, Supabase, Netlify

โœ… Highlights:

  • Blazing fast startup because it runs as web container
  • Fully in-browser

โš ๏ธ Challenges:

  • Can’t run backend services (e.g., Express, MongoDB) because of running as web container
  • Not suitable for full-stack use cases

๐Ÿ“ฆ Artifacts:

  • Incomplete app prototype (Ran out of free credits)

๐Ÿ˜ Lovable

๐Ÿ› ๏ธ Plan: Free and then Paid ($20)

๐Ÿ’ป Used With: React + Supabase, auto-deploy on Lovable Cloud

โœ… Highlights:

  • Very easy to use
  • Seamless production deployment

โš ๏ธ Challenges:

  • Slower code generation speed

๐Ÿ“ฆ Artifacts:

๐Ÿ› ๏ธ Replit

๐Ÿ› ๏ธ Plan: Free

๐Ÿ’ป Used With: Ghostwriter AI, browser IDE, MongoDB Atlas

โœ… Highlights:

  • Easy to set up
  • Great for fast testing

โš ๏ธ Challenges:

  • Cloud-only with less system-level flexibility
  • Not ideal for large production apps

๐Ÿ“ฆ Artifacts:

  • Did not complete(ran out of free credits)

๐Ÿ“Š Tool Comparison Snapshot

FeatureCursorWindsurfReplitLovableBolt
Ease of UseMediumMediumEasyEasyEasy
Dev EnvironmentLocalLocalCloudCloudCloud
Deployment OptionsManualManualBuilt-inBuilt-inManual
Tech Stack FlexibilityHighHighMediumLimitedLimited
Target UsersDevsDevsAllNon-devsNon-devs

๐Ÿง  My Take: Cursor gives you the most power; Lovable gives you the most convenience.

โŒ What Needs Work

๐Ÿ› ๏ธ Debugging:

Most tools still rely on you reading console logs and piecing things together manually. (My pick: Use Operator framework to understand what’s happening in browser and fix issues automatically)

๐ŸŒ Speed:

Long wait times and retries can break the flow.

๐Ÿงฉ Fragility:

Small changes can break other parts of the app. There’s no real “awareness” of architectural dependencies.

๐Ÿ“ Lack of modularity:

Encouraging reusable design and clean code still needs a human architect.

๐Ÿ“˜ Pro Tips: Making Vibe Coding Work

๐Ÿ“‹ Define clear requirements

Roles, pages, workflows, error states โ€” lay it all out before prompting.

๐Ÿงญ Use guardrails (rules/constraints)

Many tools let you enforce language, style, and folder structure.

๐ŸŽฏ Stick to common stacks

React, Node, Python, SQL โ€” that's where LLMs shine.

๐Ÿ’ก Use models wisely

Claude 3.7 was the most consistent for me, especially on multi-step flows. Experiment with models and find the best one for your use case.

๐Ÿงช Debug like a dev

Logs > terminal > DB traces. Be ready to dive in.

๐Ÿ”„ When stuck, reboot

Sometimes starting fresh saves more time than untangling broken AI logic. Keep regular checkpoints to go back to stable point. 

๐Ÿง  Is Software Engineering Dead?

Nope. But it’s definitely shifting.

๐Ÿง  What Vibe Coding Does Well:

  • Speeds up boilerplate
  • Empowers solo builders
  • Makes prototyping fast

๐Ÿšง What It Still Needs Help With:

  • Scaling apps
  • Clean architectures
  • Advanced debugging
  • Enhancing existing production apps

๐Ÿง‘โ€๐Ÿ’ป Developers wonโ€™t disappear. Theyโ€™ll evolve. The future engineer:

  • Uses AI to generate & validate code fast
  • Designs smart systems
  • Oversees quality, reusability, and security

๐Ÿ’ฌ “Itโ€™s not about coding less. Itโ€™s about coding smarter.”