Tag Archives: llm

The Rise of CLI-Based AI Coding Agents: Claude code vs Gemini CLI

AI, Programming, , , , , , ,

Introduction

I have been a Cursor user for vibe coding for 3 months. I was very skeptical about using Claude Code and Gemini CLI at first, since I wasn’t comfortable with the idea of using a terminal as an AI agent. But in the last 1–2 months, I’ve been trying them both — and it completely changed my opinion.

In this blog, I’ll share my experiences of using them, my favorite pick between the two, and a comparison of the three broad categories of AI-assisted coding approaches that exist today.

The Three Approaches to AI-Assisted Coding

I see broadly 3 kinds of AI-assisted coding approaches:

  • Chat interface with canvas → ChatGPT, Claude
  • IDE integrated AI tools → Cursor, Windsurf, Replit, Lovable
  • CLI-based AI agent tools → Claude Code, Gemini CLI, Warp
🧑‍💻 Category💬 Chat Interface🛠️ IDE Integrated Assist⚡ CLI-based AI Agent
Where it operatesBrowserStandalone IDE or browser (Cursor uses IDE, Lovable uses browser)Terminal or IDE
Use casePrototyping, small functions, quick answers, “throwaway weekend projects.”Augmenting the core coding loop: writing, refactoring, debugging.Automating workflows: multi-step tasks, system commands, project-wide changes.
Vibe coding stylePure “vibe coding” (conversational prompting).Hybrid of “vibe coding” + “developer assist.”Agentic + autonomous (give AI a goal and let it execute).

For a vibe coder like me, a CLI-based AI agent inside VS Code works perfectly — I get the best of both IDE and terminal with AI agent powers.

My Project: A 2-Way Translator App 🌍

To test these tools, I built a translation application.

When I visited Vietnam a few months back, I noticed cab drivers and restaurants using Google Translate effectively. But one problem stood out: only one device could be used for back-and-forth communication.

So, I decided to build a two-way translation application that solved this problem.

I drafted the following prompt (with ChatGPT’s help):

Global Translator App – MVP Requirements (Web Application)

  • Build a web app that lets two users communicate in real time via text translation.
  • Users connect via QR code or unique ID.
  • Support both text and speech.
  • Translate automatically for seamless conversation.

(Details moved to the appendix 👇)

Pre-requisites:

  • Google Translate API with GCP
  • Firebase backend

Claude Code vs Gemini CLI ⚡

🔎 Feature🤖 Claude Code🌐 Gemini CLI
📍 Location of useStandalone terminal or inside VS Code. In VS Code, Claude Code has IDE context — lets you select code and ask about it.Standalone terminal only. In VS Code, Gemini CLI has no IDE context (though Google offers Gemini Code Assist for IDE, without terminal capability).
💻 Terminal capabilityExcellent — can view files, execute commands, analyze outputs.Limited — shell commands can’t run in foreground, stateless (no persistent cd), no command completion.
⚙️ AI agent capabilityStrong coding performance; required multiple iterations but reliable.Decent, though not as strong as Claude Code.
🧪 Debugging & TestingSuperb. With terminal + MCP integration, I could run unit tests from both terminal and frontend.Limited debugging/testing due to terminal restrictions and weaker MCP tool support.
🔌 MCP integrationVery good. I integrated Playwright (UI automation) + Firebase.Okay. Playwright struggled (e.g., no 2-browser instance support). Firebase worked fine.
💸 Cost & model$20/month plan (Sonnet). Didn’t use Opus ($200/month). Sometimes hit daily quota limits.Free with generous limits (Gemini 2.5 Pro).

Verdict so far: Claude Code > Gemini CLI for most features, especially debugging and testing.
But Gemini CLI’s pricing (free) and generous usage limits are a big plus.

If Google can merge Gemini CLI with Code Assist and improve Playwright integration, it will become a fantastic package. On the other hand, Claude Code really needs a more flexible pricing tier between $20 and $200.

Project Output

  • Translation app built with Claude Code → [Demo link here]
  • Translation app built with Gemini CLI → [Demo link here]

Flow of the app:

  1. User logs in with a username (no auth to keep simple).
  2. Picks language + connects with another user via QR code or username.
  3. Supports both text + voice translation in real time.
  4. Built as a PWA → works on web + mobile.

Debugging & Testing with Claude Code 🔍

This is where Claude Code really shines:

  • Console errors are debugged + fixed automatically.
  • AI agent generates unit test cases, executes them, finds failures, and fixes them.
  • Even frontend integration testing works — thanks to MCP integration:
    • It inspects browser console logs.
    • Takes screenshots to analyze UI/UX issues (!).

I even asked Claude Code to:

  • Make a 90-second demo video of the app.
  • Simulate two users chatting with translations in the app. It worked beautifully.

Demo video created by Claude

Global Translation – User1

Global Translation – User2

Summary ✨

AI-assisted coding has matured tremendously in the last year and is now a top revenue driver among AI apps.

In my first blog on Vibe coding, I complained about limited debugging and testing with the AI coding tools. With these new coding agents, that problem feels largely solved.

Next, I’d love to see AI agents:

  • Do better system design.
  • Produce more modular code.
  • Integrate smoothly with existing codebases.

Between Claude Code and Gemini CLI → Claude Code wins hands down 🏆.
But I’m confident Gemini CLI will close the gap soon.

Appendix

Detailed prompt given for the translation application:

Tech Stack

  • Frontend Framework: React (or a similar modern JavaScript framework like Vue/Angular, but React aligns with future React Native plans)
  • Backend: Firebase (Firestore/Realtime Database for real-time chat, Authentication, Cloud Functions for server-side logic if needed)
  • Translation API: Google Cloud Translation API
  • QR Code: Open-source JavaScript libraries for QR code generation and scanning (e.g., qrcode.react, html5-qrcode)
  • Authentication: Anonymous sign-in (extendable to Gmail sign-in later)
  • Chat History: Local browser storage (e.g., LocalStorage, IndexedDB – no cloud sync for MVP)
  • Encryption: Not required for MVP
  • UI/UX: Simple, intuitive, and modern chat interface inspired by leading web messaging apps (e.g., WhatsApp Web, Telegram Web)
  • Dark Mode: Full support for dark mode from MVP

Core Features (MVP)

  • User Onboarding
    • Anonymous sign-in (no registration required for MVP)
    • Generate a unique user ID and QR code for each user upon entering the app
    • Users can choose and save a unique username, which is validated against a central Firestore database to prevent conflicts.
  • Connection Mechanism
    • QR Code Scanning: Allow users to scan another user’s QR code using their device’s webcam/camera (if available and permission granted).
    • Manual ID Entry: Provide an option to manually enter another user’s unique ID to initiate a chat.
    • Display your own QR code for others to scan.
    • The application remembers the last 5 friends you’ve connected with, allowing for quick selection from a dropdown menu.
  • Progressive Web App (PWA):
    • The application is designed to be installable on mobile and desktop

devices, offering an app-like experience with potential offline capabilities.

  • The layout is optimized to adapt and display correctly across various screen sizes, including iOS and Android mobile browsers.
  • Chat Interface
    • Real-time text chat between two users.
    • Each user selects their preferred language from a dropdown/selector. This language is the language to be used by the friend on the other side. 
    • Messages are automatically translated to the recipient’s language using Google Translate API.
    • Show both original and translated text in the chat bubble.
    • Support for dark mode.
    • Friend Online Status (Basic): It displays whether a friend is currently “Online” or “Offline” (with a “Last seen” timestamp). Note: The “offline” status is not automatically updated on browser close in the current setup.
  • Session Management
    • One-to-one chat sessions.
    • Simple chat history stored locally in the browser.
  • Language Support
    • Initial support for: Hindi, Telugu, Tamil, Kannada, English, and French.
  • Misc
    • A version number is displayed on the screen, making it easy to identify the deployed application version.

Non-Functional Requirements

  • Responsive and intuitive UI/UX, adapting well to different screen sizes (desktop, tablet, mobile browsers).
  • Fast translation and message delivery.
  • Minimal data usage.
  • Accessibility support.
  • Dark mode support.
  • Cross-browser compatibility (Chrome, Firefox, Safari, Edge).

Future Extensions (Post-MVP)

  • Native mobile applications (Android & iOS) using React Native.
  • Gmail sign-in and user profiles.
  • Speech-to-text and text-to-speech for voice communication.
  • Discover nearby users (if feasible for the web, e.g., using WebRTC data channels or location APIs).
  • Group chats.
  • Persistent chat history with cloud sync.
  • End-to-end encryption.
  • Support for additional languages.

Are Smart Glasses the Future of AI? My Hands-On Review of Meta AI Glasses

AI, , , , ,

Honestly, I never believed smart glasses would become a mainstream AI form factor—until I bought the Meta Ray-Ban Smart Glasses two weeks ago! 😎 This gadget had been on my wishlist for a while, but it wasn’t available in India, and even if you managed to get one from abroad, the app didn’t work well here. Thankfully, Meta launched these glasses in India a month ago, and you can now buy them online or from certified optical dealers. In this blog, I’ll share my hands-on experience from the past two weeks.

Why Glasses? The Hands-Free Advantage 🙌

The first thing I realized: glasses are a fantastic form factor when you want to go hands-free and avoid constantly reaching for your phone or laptop. Google tried this a decade ago, but the tech just wasn’t ready. (More on Google’s new AI glasses later!)

I mostly use the glasses outdoors—while walking, running, or cycling. Indoors, I didn’t find much need for them.

Design & Comfort 🕶️

The design is sleek and modern, not clunky at all. They look like regular sunglasses, so you won’t stand out in a crowd (unless you want to!). However, after a few hours, they do feel a bit heavy, and I sometimes want to take them off for a break.

Use Cases: Where Smart Glasses Shine ✨

Photos & Videos 📸🎥
The 12MP ultra-wide camera delivers good quality photos and up to 3-minute videos. While it’s not quite smartphone-level, the hands-free capture is a game-changer—especially for impromptu moments or when you’re on the move. There’s even blur compensation to keep your shots clear. Selfies are a bit tricky, but you can always take them by holding the glasses like a phone.

Music, Podcasts & Calls 🎶📞
With 5 microphones and 2 speakers, the audio quality is impressive. The directed audio keeps you aware of your surroundings—crucial for outdoor activities. Personally, listening to music made my uphill cycling sessions much more enjoyable! 🚴‍♂️

The AI Edge: Meta AI in Your Glasses 🤖

The real magic is in the AI. Meta AI uses the latest Llama models, giving you robust speech-to-text and general chatbot capabilities. While Llama isn’t quite at OpenAI’s level, it works well for most queries. The best part? Multimodal capability! You can ask questions about what you’re seeing. For example, I spotted a tree with unique flowers, asked the glasses to identify it, and got an accurate answer. This feature will be super useful when traveling or reading foreign text.

Live Speech Translation 🌍🗣️

Currently, live translation supports French, Spanish, and Italian. It works best if both people have Meta glasses (for two-way translation), but even one-way translation is handy. I tested it with my daughter’s French and while watching a French video—worked well as long as the audio wasn’t too fast.

Cons & Limitations ⚠️

  • The glasses are a bit heavy and feel bulky after extended use.
  • Occasionally, they freeze and need a restart.
  • Battery life is about 3–4 hours—okay for most outings, but longer would be better.

Pro Tips for Buyers 📝

  • If you need prescription lenses, get the AI glasses fitted accordingly (external vendors can help).
  • If you don’t need a prescription, consider transition lenses for both indoor and outdoor use. I use reading glasses, so transition lenses are perfect for me.

Some pictures and videos that I took 📸🎥

Cycling clip

357CE2C1-65CC-41B4-B16C-398939BADBDB
25007A9D-B670-43E6-AA6A-ED4AF2204D09
3419F8F8-2010-4751-AD29-FC3C0A6A8AAE
55AE6054-A2C7-4A54-8928-B127E1113761

Final Thoughts & Google Glasses Comparison 🥽

After seeing Google’s latest demo at I/O, I’m excited for their upcoming glasses, especially with XR and virtual screen features. That could be a game-changer, but it’s likely a year away and pricing is still unknown.

For now, I absolutely love my Meta AI glasses. Priced between ₹29,000–₹35,000, they’re a solid investment for the features you get. I’m convinced glasses will be a major new form factor for AI—though not the only one.

Would I recommend them? Absolutely, if you love trying new tech and want a taste of the future—hands-free! 🚀

🤖 AI Customer Support using an Agentic Framework

AI, , , ,

In this blog, I’ll walk you through the design, development, and lessons learned while building a multi-agent AI customer support assistant using the LangChain framework and related AI tools. 🎮💬

🎯 Motivation: Why Build This?

At KGeN, a game aggregation platform connecting publishers and gamers, our primary users are gamers and clan chiefs (micro-community leaders).

These users often ask questions about:

  • Platform features
  • Game-specific achievements
  • Player and clan statistics

Some answers come from a static knowledge base, while others depend on dynamic user-specific data.

⚡ We wanted an intelligent, scalable AI assistant that could:

  • Understand natural language queries
  • Route them to the appropriate data sources
  • Continuously improve through feedback

Based on the poc feedback, I wanted to take this to production.

🧠 The use case generalizes to any industry with static documentation and dynamic user data—only the context changes.

🔗 Application & Code

The poc application is deployed in Render, you can try this out. The Github also contains instructions to run it locally or in cloud.

📌 Business Goals

I wanted a system with following business goals:

  • 🗣 Answer queries conversationally
  • ⚙️ Route questions to the right agent (static/dynamic/hybrid)
  • 🧾 Escalate unresolved issues via Jira tickets
  • ⭐ Collect feedback for iterative improvements
  • 📚 Learn from feedback to enhance performance

🧪 Prototyping Approach

I followed a “vibe coding” model:

  • Start fast with a working prototype
  • Use AI to assist (ChatGPT + Cursor editor)
  • Iterate with real feedback

💡 Tools Used:

  • ChatGPT to generate mock data (static + SQL)
  • Langchain/Langsmith as agentic framework
  • Cursor for AI-assisted coding
  • Render for cloud deployment

⚠️ Tip: Feed detailed requirements to AI code editors. Without clarity, they produce unreliable or messy code.

🧭 Agent Flow: How It Works

Each user query is first routed by a Main AI Agent, which classifies the query as:

  • 📘 Static: Uses vector search on documentation (FAISS)
  • 🗄 Dynamic: Converts to SQL query on structured data
  • 🔁 Hybrid: Mixes both static + dynamic sources
  • 📥 Follow-Up: Needs more user input
  • 🚨 Escalation: Routed to a human via Jira

Each type has a specialized agent with its own system prompt.

🧠 LangChain powers the routing, agents, and execution logic.

📌 Architecture Diagram: Agent Flow

🧱 Architecture & Tech Stack

ComponentTool / FrameworkReasoning
Agent FrameworkLangChainModular, battle-tested
MonitoringLangSmithEasy trace/debug for agents
Vector DBFAISSSimple to set up for POC
LLMsOpenAI (pluggable)Can switch to others like Claude
Backend APIFastAPILightweight, async-friendly
Frontend (POC)StreamlitQuick prototyping
DeploymentRenderEasy cloud deployment
TicketingJira APIFor support escalations
DB (Local/Test)SQLiteLightweight
DB (Production)PostgresScalable

🐞 Issues & Learnings

This whole application took me around 8-10 hours over a period of 2 weeks. I got time to spend only on weekends to do this.. Following are some issues I faced:

  • 🧩 Dependency Hell: LangChain and LLM libs change fast. Cursor couldn’t resolve pip issues well. I had to request cursor to get latest details in internet to resolve it.
  • 🧪 Streamlit Cloud Problems: Ended up moving to Render for better compatibility.
  • 🌍 Env File Confusion: Environment-specific bugs were hard to debug in prod as Cursor does not integrate with Render deployment.

🔍 Debugging with LangSmith

Langsmith is great to understand if the agentic workflow is working as expected. I was able to fix the following issues with Langsmith:

  • 🔎 Identified issue that search from vector database is giving the whole static knowledge base instead of giving the specific context. Adding semantic analysis to vector database match helped solve this.
  • 🧩 Fix hybrid agent’s output merging logic
  • 🔁 Debug why hybrid/support queries didn’t escalate to Jira

📂 Sample Queries along with Langsmith trace

Static query example: What are legendary items?

From the above trace, we can see that there are 2 LLM chain calls and 1 call to vector database. The first chain call is to identity the type of query and the second chain call is to summarize the response from vector database.

Hybrid query example: How many gold achievements has DragonSlayer99 earned and what rewards do they give?

From the above trace, we can see that there are 6 chain calls in the above query:

  • first to identity type of query
  • second to summarize results of vector database
  • third to check if there is username in the query
  • fourth to generate sql query and get results from postgres db
  • fifth to take the results from sql query and generate summarized response
  • sixth to combine the summarized static data and dynamic data to give response to the user

📋 Requirements Summary (Generated via ChatGPT)

I fed these requirements as initial prompt into cursor after few iterations of discussions with chatgpt.

💳 Business Requirements

  • Build an AI system that can:
    • 📘 Answer static queries from documentation
    • 🗄 Query live backend data
    • 🔁 Combine static + dynamic sources
    • 📥 Handle follow-up interactions
    • 🚨 Escalate to Jira when needed
  • Serve two user roles:
    • 👤 Gamers (general players)
    • 👑 Clan Chiefs (advanced users)
  • Goals:
    • Reduce manual tickets by 70%
    • Improve first-response time
    • Maintain conversational accuracy

📈 Functional Requirements

  1. Static Question Answering
    • Vectorize and index knowledge base with FAISS
    • Use RAG (Retrieval-Augmented Generation) to answer
  2. Dynamic Question Answering
    • Use LangChain SQL Agent to convert natural language to SQL
    • Query SQLite (for testing) and Postgres (in prod)
  3. Hybrid Handling
    • Mix RAG results with SQL data for composite answers
  4. Follow-Up Logic
    • Prompt for missing data (e.g., usernames)
  5. Escalation
    • Auto-create Jira ticket with conversation context if unresolved
  6. Multi-Agent System
    • Router → specialized agents (static, dynamic, hybrid, etc.)
  7. API & UI
    • FastAPI for backend
    • Streamlit for POC frontend; React for future UI

🚀 Technical Requirements

  • LangChain (Python)
  • FAISS or ChromaDB for vector storage
  • OpenAI or Claude LLMs
  • SQLite (via LangChain SQL agent) as simulated backend
  • JIRA API for ticket creation
  • FastAPI (backend API layer)
  • Streamlit (prototyping UI)
  • React (future UI)

🔐 Security & Testing

  • Role-based access (gamers vs. clan chiefs)
  • Environment variable protection
  • Unit tests, evaluation prompts, and simulated load

✅ Success Criteria

  • 90%+ accurate responses in test cases ✅
  • Sub-3-second latency ✅
  • Smooth Jira escalation pipeline ✅
  • API ready for frontend integrations ✅

🚀 Final Thoughts

This project demonstrates how AI agents, vector databases, LLMs, and good system design can solve real-world support problems.

There are many improvements needed to take this into production. Following are some of them:

  • Use Langchain conversation memory. This is maintained at streamlit level to stitch a conversation.
  • RBAC based on user login and queries based on the user.
  • Performance improvement using caching at different levels, database connection optimisation.
  • Agent self learnings from user feedback
  • Improve UI/UX

🔄 This customer support agent is a template that can be adapted across industries—from gaming to banking to e-commerce.

🔍 Debugging Web Apps with Cursor Just Got Smarter: Evaluating Browser Assist Tools

AI, Programming, , ,

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. ⚡