Courses for Front-End Web Developers

Hey Everyone 👋,

John Lindquist here with the **eleventh issue of AI Dev Essentials!** I've been digging more and more into using Claude Code to spin up projects. Here's a couple of fun ideas I've been putting together using _only_ Claude Code:

- dotagent (https://www.npmjs.com/package/dotagent) - A tool for syncing rules/instructions across Cursor/Claude/Windsurf/etc.
- chromancer (https://www.npmjs.com/package/chromancer) - A CLI for interacting with Chrome. It wraps around Claude Code to generate and save automated browser workflows.
- Script Kit (https://www.scriptkit.com/) - I added MCP support so Cursor/etc can invoke your scripts.

There's obviously no way I could've done this much work in the past week without using AI agents (mostly Claude Code).

I'm still deterimining guidelines for Cursor vs Claude Code. Cursor recently introduced a new Ultra plan that's $200/month and has 20x more usage than Pro which should allow you to run `o3` (an _awesome_ model) full time. My quick, too-early take:

- Cursor gives you more control and customizations. It's perfect for "focused" work where you want to be an active participant in the process.
- Claude Code is great for "automated" work where you just want to leave the desk and come back to to review a feature.

As always, the model used will always be more important than the tool. So since Cursor can also use Claude Opus/Sonnet and has backgound agents + bugbot, it's just a more fully-featured offering which can only continue to improve. I love CLIs (I'm mean I really, really love CLIS), but there always comes a point where you need to open a GUI. Anyway, I'll be continuing to use both for now.

I was also just accepted into the OpenAI Open Source fund which granted me $5000 in credits to use the Codex CLI (OpenAI's version of Claude Code), so I should have strong opinions on that very soon. I _love_ OpenAI's Codex through the web interface where it can spin up your project and submit PRs, so I have high hopes for the CLI.

I've honestly had more fun programming over the past couple of months than I've had during my entire 20+ year career!

### 🎓 New egghead.io Lessons This Week

The [Building Local AI Agents with Ollama and the AI SDK](https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k) course is now live! I've released the first 5 lessons covering:
- Setting up Ollama for local AI development
- Building your first agent with the AI SDK
- Implementing tool calling and function execution
- Managing agent state and conversation flow
- Deploying local agents with persistent memory

Check out the course at [https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k](https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k)

---

## 🤖 Model & Platform Updates

### Gemini 2.5 Family Goes Stable

Google has restructured their Gemini 2.5 lineup with significant improvements:

**Gemini 2.5 Pro** (Stable, no changes from 06-05)
- Now the stable long-term support model
- Maintains existing pricing structure
- "gemini-2.5-pro" model name for production use

**Gemini 2.5 Flash** (Stable, updated pricing)
- Simplified pricing based on developer feedback
- Performance improvements from 05-20 variant
- Now the go-to model for cost-conscious applications

**NEW: Gemini 2.5 Flash-Lite** (Preview)
- Small reasoning model at just $0.10/1M input, $0.40/1M output
- Pushes the cost/intelligence frontier
- Ideal for high-volume applications requiring reasoning capabilities

([Google Blog](https://blog.google/products/gemini/gemini-2-5-model-family-expands/), [Google Cloud Blog](https://cloud.google.com/blog/products/ai-machine-learning/gemini-2-5-flash-lite-flash-pro-ga-vertex-ai))

> The introduction of Flash-Lite is particularly exciting. We're seeing Google compete aggressively on the cost front while maintaining reasoning capabilities. This could be a game-changer for applications that need to process massive amounts of data with some level of intelligence. Honestly, I'm kinda glad they've shipped 2.5 so they can focus on whatever 3.0 is going to be 😅

### OpenAI's Open Source Model Progress Update

At Y Combinator's AI startup school, Sam Altman provided an update on OpenAI's open-source model initiative, first announced in March 2025. The model, which will be OpenAI's first open-weight release since GPT-2 in 2019, is being developed with reasoning capabilities similar to o3-mini and is aimed for release in early summer.

Key details:
- Text-in, text-out model designed for high-end consumer hardware
- Highly permissive license with few usage restrictions
- Toggle-able reasoning capabilities
- Led by VP of Research Aidan Clark

([TechCrunch](https://techcrunch.com/2025/03/31/openai-plans-to-release-a-new-open-language-model-in-the-coming-months/), [Reuters](https://www.reuters.com/technology/artificial-intelligence/openai-plans-release-open-weight-language-model-coming-months-2025-03-31/), [VentureBeat](https://venturebeat.com/ai/openai-to-release-open-source-model-as-ai-economics-force-strategic-shift/))

> OpenAI has been gathering community feedback since March, and Altman himself admitted they've been "on the wrong side of history" regarding open source. This shift is clearly influenced by the success of Meta's Llama models (over 1 billion downloads) and pressure from competitors like DeepSeek. I'm looking forward to seeing how this balances OpenAI's commercial interests with community needs.

### Revolutionary AI Performance in Medical Research

A combination of GPT-4.1, o3-mini-high, and Gemini 2.0 Flash achieved superhuman performance in systematic medical reviews ([medRxiv](https://www.medrxiv.org/content/10.1101/2025.06.13.25329541v1)):

- Completed 12 work-years of Cochrane reviews in just 2 days
- 96.7% sensitivity vs 81.7% for human reviewers
- Found 54 additional eligible studies missed by original authors
- Generated new statistically significant findings in 2 reviews

The system correctly identified all originally included studies while discovering critical findings humans missed, like preoperative immune-enhancing supplementation reducing hospital stays by one day.

> This is the kind of AI application that genuinely excites me. It's not replacing researchers but augmenting them to find insights that would otherwise be missed. The fact that blinded reviewers sided with the AI 69.3% of the time when there were disagreements speaks volumes.

---

## 🔧 Developer Tooling & MCP Updates

### MCP Goes Mainstream

The Model Context Protocol is having a moment:

**Cloudflare Open Sources use-mcp**
- React library connecting to any MCP server in 3 lines of code
- Supports SSE and Streamable HTTPS remote servers
- Handles OAuth flow automatically
- Part of the official MCP organization for reference implementation

([Cloudflare Blog](https://blog.cloudflare.com/connect-any-react-application-to-an-mcp-server-in-three-lines-of-code/), [GitHub](https://github.com/modelcontextprotocol/use-mcp))

**OpenAI Adds MCP Support to ChatGPT**
- Limited initially to search and fetch tools for deep research
- Remote MCP with OAuth support
- Documentation available at [platform.openai.com/docs/mcp](https://platform.openai.com/docs/mcp)

**Google Cloud Run MCP Tutorial**
- Deploy remote MCP servers in under 10 minutes
- Comprehensive guide for production deployments

([Google Cloud Blog](https://cloud.google.com/blog/topics/developers-practitioners/build-and-deploy-a-remote-mcp-server-to-google-cloud-run-in-under-10-minutes))

**Block's MCP Best Practices**
- Lessons from building 60+ MCP servers
- Design patterns and architecture recommendations

([Block Engineering Blog](https://engineering.block.xyz/blog/blocks-playbook-for-designing-mcp-servers))

> MCP is becoming the standard for AI tool integration. The fact that major players are all adopting it suggests we're moving toward a more interoperable AI ecosystem. I'll definietly have more educational materials around MCPs soon!

### OpenAI's Prompt Management Revolution

OpenAI introduced Prompts as an API primitive:

- Centrally manage, version, and optimize prompts
- Use across Playground, API, Evals, and Stored Completions
- Preconfigured with tools, models, and messages
- New "Optimize" button in Playground for API optimization
- Replaces the old presets system

([OpenAI Community](https://community.openai.com/t/prompts-are-an-api-primitive-now/1290247), [Documentation](https://platform.openai.com/docs/guides/text?api-mode=responses#reusable-prompts))

> Finally! Prompt management has been a pain point for production AI applications. This brings prompts to the same level as other API resources, making it easier to maintain consistency across teams and applications.

### Developer Resources

**models.dev - Open Source AI Model Database**
- Comprehensive pricing and limits information
- Powers opencode under the hood
- Community-contributed with API access
- Star and contribute at [models.dev](https://models.dev)

([Official Site](https://models.dev/), [GitHub](https://github.com/sst/models.dev))

**Container-use Now Works with OpenAI Codex CLI**
- Solomon Hykes confirmed integration
- Enables containerized development workflows

([GitHub](https://github.com/dagger/container-use))

> Giving AI Agents enough control to `rm -rf` is why the community is so bullish on containers for everything!

---

## 💻 Cursor Corner

### Cursor Ultra Plan Launches at $200/month

Cursor introduced a new Ultra tier with 20x more usage than Pro:

- Addresses heavy user demands for unlimited-style usage
- Positioned between Pro and enterprise offerings
- Reflects the growing appetite for AI-assisted development at scale

([Cursor Blog](https://www.cursor.com/blog/new-tier), [TechCrunch](https://techcrunch.com/2025/06/17/anysphere-launches-a-200-a-month-cursor-ai-coding-subscription/))

> This is exactly what I've been hoping for! The mental overhead of tracking usage on Pro was real. While $200/month isn't cheap, for professional developers who live in Cursor, it's a no-brainer. I'm curious to see if this pressures other tools to offer similar "all you can eat" plans. There's a bit of buzz around how ambigous the messaging/pricing and it's obviously frustrating for anyone trying to budget out AI costs.

## 🚀 Quick Updates

- **OpenAI Codex Best-of-N**: Generate multiple solutions simultaneously, rolling out to Pro, Enterprise, Team, Edu, and Plus users ([Changelog](https://help.openai.com/en/articles/11428266-codex-changelog))
- **Claude Code "ultrathink" Trigger**: Use thinking triggers for better results, with "ultrathink" being the most powerful ([Anthropic Docs](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/extended-thinking-tips))
- **Google Labs Flow Updates**: Complete tutorial thread on ingredients, frames, camera controls, and scene builder for Veo 3 ([Google Blog](https://blog.google/technology/ai/google-flow-veo-ai-filmmaking-tool/), [FAQ](https://labs.google/fx/tools/flow/faq))
- **ElevenLabs v3**: Revolutionary emotion control with audio tags like [excited], [whispers], [sighs], [laughs] ([ElevenLabs v3](https://elevenlabs.io/v3), [Blog](https://elevenlabs.io/blog/eleven-v3))

---

## 🔒 Security & Best Practices

### The Lethal Trifecta Warning

Simon Willison echoed many of my thoughts around MCP+Security. Definitely worth a read: ([Blog Post](https://simonwillison.net/2025/Jun/16/the-lethal-trifecta/)):

**The Lethal Trifecta = Private Data + Untrusted Content + External Communication**

Any AI system with all three components is vulnerable to data exfiltration attacks. This is especially critical for MCP users who might inadvertently combine:
- File system access (private data)
- Web browsing (untrusted content)  
- API calls or messaging (external communication)

**Mitigation Strategies:**
- Never combine all three capabilities in one agent
- Implement strict sandboxing between components
- Use human-in-the-loop verification for sensitive operations
- Audit your MCP tool combinations carefully

> This is the kind of security thinking we need more of. As we give AI agents more capabilities, we need to think adversarially about how they could be exploited. The MCP ecosystem makes it trivially easy to create vulnerable combinations.

---

## ⚡ AI Ecosystem Observations

### Google Cloud IAM Outage Cascade

A major lesson in infrastructure dependencies:
- Google Cloud IAM failure cascaded to Cloudflare, Anthropic, Spotify, Discord, and Replit
- Highlighted single points of failure in the AI infrastructure stack
- Key takeaway: Implement graceful fallbacks and avoid single-provider dependencies

([Full Analysis](https://forgecode.dev/blog/gcp-cloudflare-anthropic-outage/))

> Did you feel this? I sure did. That was a strange couple of hours where I felt lost without my AI agents... I'm just glad it was a simple failure and not a more serious issue.

### AI Agents Playing Diplomacy

Fascinating behavioral patterns emerged:
- **Claude**: Couldn't lie, was exploited by other players
- **Gemini 2.5 Pro**: Nearly conquered Europe with tactical brilliance
- **o3**: Orchestrated secret coalitions, backstabbed allies, won

> These experiments reveal fundamental differences in how models approach strategy and deception. When choosing models for your applications, consider not just capabilities but behavioral tendencies. I'm sure we'll see more about this in the future.

### AGI as Product Experience

Logan Kilpatrick's perspective on AGI resonated strongly this week:
- AGI won't be a single model breakthrough
- Product experience integrating memory, reasoning, and context matters more
- Small model improvements + great design = "AGI moment" for users
- The narrative is shifting from model-centric to product-centric

([Source](https://youtu.be/kp9afmazO_w))

---

## 🚨 URGENT: Cursor Workshop Early Bird Ends TOMORROW! 🚨

### Turn Failures into Fuel with Cursor - Save $49 NOW!

**⏰ LAST CHANCE: Early bird pricing expires in less than 24 hours!**

I'm genuinely excited to share this workshop with you. After months of pushing the boundaries with AI coding tools, I've distilled everything into a 6-hour intensive that will transform how you work with Cursor (and any AI coding assistant).

**Why This Workshop is Different:**
- **Real workflows, not tutorials**: Learn the exact processes I use daily to build production apps
- **Failure-focused approach**: Turn every AI mishap into a learning opportunity
- **Tool-agnostic principles**: Master concepts that work across Cursor, Windsurf, Copilot, and beyond
- **Live debugging sessions**: Watch me handle real errors and stuck agents in real-time

**What You'll Master:**
✅ Project generation that actually works (with proper structure and best practices)
✅ Context curation for massive codebases without token overload
✅ Agent behavior patterns - know when they're stuck BEFORE wasting credits
✅ Composer pipelines that automate your entire workflow
✅ Git + AI strategies for safe experimentation
✅ Multi-file refactoring without the chaos

**Proven Results:**
> "Take John's cursor workshop it is 🔥 HIGHLY Recommend" —David Wells

> "I used the skills you taught me to effectively one-shot OAuth issuer support in the Epic Stack. So cool!" —Kent C. Dodds

> "John is the cursor god" —Sunil Pai

**Workshop Details:**
- **When:** Friday, June 27, 2025, 9:00 AM - 2:00 PM (PDT)
- **Format:** Live Zoom workshop with Q&A throughout
- **Includes:** Recording access, workshop materials, and my personal Cursor rules

**💰 Pricing:**
- ~~Regular Price: $249~~
- **🎯 EARLY BIRD: $200 (Save $49!)**
- **⚠️ Price increases TOMORROW at midnight!**

**Perfect for:**
- Developers frustrated with AI tools that "almost" work
- Teams wanting to standardize their AI workflows
- Anyone who's felt the pain of agents modifying the wrong files
- Developers ready to 10x their productivity with AI

➡️ **[See Full Workshop Details](https://egghead.io/workshop/cursor)**

➡️ **[SECURE YOUR EARLY BIRD SPOT NOW →](https://buy.stripe.com/7sY7sEbOZbGO0kx7pw9fW09?prefilled_promo_code=GEUHPI9B)**

*P.S. - Team training packages available. Get your whole team up to speed with group rates!*

*P.P.S. - Seriously, don't wait. The $49 savings ends tomorrow and I'd hate for you to miss out. This workshop will pay for itself in saved time within the first week.*

---

That's all for this week! Feel free to reply directly to this email with any questions or feedback.

Keep on shipping! 🚀

John Lindquist

[egghead.io](https://egghead.io)

John Lindquist

AI Dev Essentials #11: Gemini 2.5 Stable, MCP goes mainstream

AI Dev Essentials #11: Claude Code fuels new CLI tools, Cursor Ultra plan launches, Gemini 2.5 Flash-Lite slashes costs, & OpenAI open-source model looms 

Hardcoding your script to search for only one type of file (like `.md`) is a major limitation. This lesson shows you how to make your script smarter by teaching it to infer the desired file type directly from the user's natural language prompt.

You'll implement a two-stage AI process. The first stage analyzes the user's request to determine the file extension they're interested in (e.g., `md`, `txt`). The second stage then uses that file type to dynamically search the file system, find the relevant files, and execute the command.

**Workflow demonstrated in this lesson:**

* Add a preliminary `generateObject` call to extract a `fileType` from the user's initial prompt.
* Define a list of supported `fileTypes` (e.g., `['md', 'txt']`) and use a detailed prompt to guide the AI, instructing it to choose from the list or use a default.
* Dynamically construct the `globby` pattern using the inferred `fileType` (e.g., `*.$[fileType]`).
* Implement error handling to inform the user if they request an unsupported file type or if no files of the specified type are found.
* Demonstrate how the script defaults to searching for Markdown files but can correctly search for other types when specified (e.g., "summarize my profile from my pdf").

This technique adds a significant layer of intelligence to your script, allowing it to adapt its behavior based on the user's intent and making it a far more flexible and intuitive command-line tool.

Dynamically Inferring File Types from User Prompts in Local AI Scripts

Hardcoding command logic and prompts directly into your script makes it rigid and difficult to extend. This lesson demonstrates a more flexible and powerful pattern: defining your script's commands as individual Markdown files in a dedicated directory.

This approach allows you to easily add, remove, or modify commands without touching the core script logic. You'll learn how to dynamically load these command files, present them as options to the AI, and inject the corresponding instructions into your prompt, creating a truly modular and extensible tool.

**Workflow demonstrated in this lesson:**

* Create a `commands` directory to house your command definitions (e.g., `summarize.md`, `translate.md`).
* In each file, write the specific prompt or instructions for that command.
* Use `globby` to discover all available command files at runtime.
* Create a `commandMap` that maps the filename (e.g., "summarize") to its file content.
* Update the Zod schema to use an `enum` of the dynamically discovered command names.
* Dynamically construct the final text generation prompt by injecting the instructions from the user-selected command file.
* Add a `profile.md` file to demonstrate how the script can act on user-created content with the new file-based commands.

By the end of this lesson, your script will be architected for easy expansion, allowing you to build a robust library of custom commands simply by adding new text files.

Creating Dynamic, File-Based Commands for Local AI Scripts

AI models won't always give you the answer you expect; sometimes they'll return invalid data or "hallucinate" a response that doesn't fit your schema. This lesson teaches you how to make your local AI script more robust by implementing essential error handling for user commands.

You'll learn how to validate the AI's output against a predefined list of valid commands and gracefully catch errors when the model generates an unexpected response, ensuring your script fails predictably and provides helpful feedback to the user.

**Workflow demonstrated in this lesson:**

* Define a list of `validCommands` (e.g., `summarize`, `translate`, `review`) to constrain the AI's choices.
* Wrap the `generateObject` call in a `try...catch` block to handle cases where the AI's output doesn't match the Zod schema.
* Implement a type guard function (`isValidCommand`) to check if the command returned by the AI is in your list of valid commands.
* Provide clear error messages to the user, indicating what went wrong and what the valid commands are.
* Test the script with invalid commands (like "taco" or "delete") to confirm that the error handling works as expected.

By adding these checks, you make your script significantly more reliable and user-friendly, preventing it from crashing on bad input and guiding the user toward correct usage.

Handling Invalid Commands and AI Errors in Local Scripts

Once your script can understand a user's command and identify a target file, the next step is to perform an action. This lesson shows you how to use the Vercel AI SDK's `generateText` function to process a file's content and produce a relevant, AI-generated response.

You'll learn how to read the content from the file path you've already identified, combine it with the inferred command into a new, more detailed prompt, and then pass it back to your local AI model to generate a final text output, such as a summary or a review.

**Workflow demonstrated in this lesson:**

* Import the `generateText` function from the `ai` SDK.
* Read the file content from the `filePath` returned by `generateObject`.
* Construct a new, structured prompt that includes the original command (e.g., "summarize") and the full content of the file.
* Pass this new prompt to the `generateText` function.
* Log the resulting AI-generated text to the console.
* Run the script with commands like "Summarize our TypeScript config" or "Review my package file" to see the full, context-aware output.

This lesson completes the core cycle of your AI script: understanding a command, reading the relevant context, and generating a useful, text-based result, all on your local machine.

Generating Text with a Local AI Model Based on File Content

A command is useless without knowing what to act upon. This lesson elevates your local AI script by giving it context from your project's file system. You'll learn how to find all relevant files and empower the AI to intelligently select the correct one based on your prompt.

The core technique involves using the `globby` package to scan for files and then feeding that list into a Zod `enum`. This constrains the AI's choices to a valid set of files, allowing it to accurately determine which file you're referring to in a natural language command.

**Workflow demonstrated in this lesson:**

* Install and import the `globby` library to find files based on a pattern (e.g., all `.json` files).
* Add a `filePath` field to your Zod schema.
* Define the `filePath` as `z.enum(files)`, where `files` is the array of file paths returned by `globby`.
* Pass a natural language prompt like "Summarize our typescript config" to the script.
* Observe how the AI correctly identifies `tsconfig.json` from the list of available JSON files and returns it as structured data.

This lesson is a crucial step toward building powerful, context-aware tools that can intelligently interact with your project's files based on simple, human-readable commands.

Providing File System Context to Local AI Scripts with Globby and Zod Enums

Hardcoded prompts are great for testing, but a truly useful script needs to respond to dynamic user input. This lesson shows you how to make your local AI script interactive by capturing command-line arguments.

You'll learn how to use Node.js's built-in `parseArgs` utility to take a user's natural language command directly from the terminal and pass it to your local language model for processing.

**Workflow demonstrated in this lesson:**

* Import the `parseArgs` function from the `node:util` module.
* Configure `parseArgs` to accept positional arguments from the command line.
* Replace the static, hardcoded prompt with the dynamic input provided by the user.
* Run the script with different sentences (e.g., `"Download a file"` or `"I want to download a file"`) to demonstrate that the AI can correctly infer the core command regardless of the phrasing.

By the end of this short lesson, your script will be able to accept and process commands directly from the user, making it a flexible and reusable command-line tool.

Processing Dynamic User Input in Local AI Scripts

While command-line chats with local AI models are useful, the real power comes from scripting. This lesson walks you through the initial setup for creating powerful, local AI-driven scripts by combining Ollama, the Vercel AI SDK, and Zod.

You'll learn how to take a natural language command, like "Concatenate all of the markdown files in my Downloads folder into a single file," and use the `generateObject` function to intelligently extract structured, actionable data from it.

**Workflow demonstrated in this lesson:**

* Install and set up the `ollama-ai-provider`, `ai`, and `zod` packages.
* Create a local AI model instance using Ollama and the Gemma 3 model.
* Define a Zod schema to specify the exact data structure you want to extract (e.g., `{ command: string }`).
* Use `generateObject` to pass a natural language prompt to the local model and receive a structured JSON object that matches your schema.
* Run the script using `bun` to see the local model successfully infer the "concatenate" command from a full sentence.

This foundational lesson unlocks the ability to build sophisticated, automated workflows by translating human language into machine-readable commands, all running entirely on your local machine.

Scripting Local Language Models with Ollama and the Vercel AI SDK

### **Build Powerful, Local AI-Driven Command-Line Scripts**

Go beyond simple AI chats and unlock the true potential of local language models by learning to script them. This course will guide you step-by-step through the process of building a flexible and intelligent command-line tool that can understand natural language, interact with your file system, and automate complex tasks—all running entirely on your local machine.

Starting with a blank TypeScript file, you'll learn how to combine the power of **Ollama**, the **Vercel AI SDK**, and **Zod** to create a script that's not just functional, but smart. We'll begin by teaching the AI to parse a simple command from a sentence. From there, we'll progressively add layers of sophistication: processing dynamic user input, making the script aware of your project's files, and generating meaningful text-based output.

You'll also learn critical patterns for building robust and extensible tools. We'll cover how to handle invalid commands and unexpected AI responses gracefully. Then, you'll refactor the script to use a modular, file-based system for its commands, allowing you to easily add new functionality without touching the core logic. Finally, we'll add a layer of intelligence that allows your script to infer exactly what you mean, right down to the type of file you want it to process.

By the end of this course, you will have built a powerful, personalized AI assistant and gained the foundational skills to create sophisticated local automations for any task you can imagine.

**What You'll Learn:**

* How to script local language models using Ollama and the Vercel AI SDK.
* To parse and process dynamic user input from the command line.
* To use Zod schemas, including `enums`, to validate and structure AI model output.
* Techniques for providing file-system context to your scripts with `globby`.
* How to generate context-aware text based on file content.
* Robust error handling for invalid user commands and unexpected AI responses.
* To build a modular and extensible tool by defining commands in separate files.
* To intelligently infer user intent, such as dynamically determining file types from a prompt.

Build a local AI-powered command-line assistant from scratch. Learn to use Ollama, Vercel AI SDK & Zod to parse input, automate tasks, and run scripts offline.

This lesson demonstrates how to give Cursor direct access to your terminal output using the [Nx MCP extension](https://nx.dev/getting-started/ai-integration?utm_source=youtube&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI), enabling automatic error detection and fixing in monorepo projects.

**Workflow demonstrated in this lesson:**

- Encounter a runtime error when serving a Vite application in an Nx monorepo
- Install and configure the Nx Console extension with MCP integration
- Ask Cursor to check your terminal for errors and fix the underlying issues
- Watch as the AI accesses running task details and terminal output through Nx MCP tools
- Observe how it analyzes workspace relationships to identify incorrect imports and missing dependencies

**Key benefits:**

- Seamless Error Handling: AI gains direct access to terminal output and running task information
- Automatic Diagnosis: Accurately identify the root cause of errors without manual copying
- Context-Aware Fixes: Leverage workspace knowledge to implement proper solutions
- Reduced Context Switching: Eliminate the need to manually relay information between terminal and AI



Juri Strumpflohner

Enable Cursor to directly access the terminal to read the output and fix issues

See how Nx MCP gives AI coding assistants direct access to terminal output and running tasks, enabling automatic error detection and fixing.

This lesson demonstrates how to solve the predictability problem when using AI to generate code in monorepos by combining Cursor with Nx generators.

**Workflow demonstrated in this lesson:**

- Explore how Nx generators provide predictable scaffolding for new libraries
- Set up [Nx Console with MCP](https://nx.dev/features/enhance-AI?utm_source=egghead&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI) integration to expose generator capabilities to Cursor
- Use the AI assistant to brainstorm a new feature with the help of the Nx MCP tools
- Have Cursor leverage the Nx MCP tools to trigger the appropriate Nx generator for creating a React-based feature library
- Observe how the AI assistant takes the generated library and further integrates it into the codebase

**Key benefits:**

- **Predictable Code Structure**: Ensure generated libraries follow your project's and organization's conventions
- **Consistent Setup**: Maintain uniform configuration across TypeScript projects and package.json files
- **Guided Implementation**: Combine AI instructions with structured, predictable code generation

Enable Cursor to generate predictable project setups

Learn how to combine Cursor AI with Nx generators for predictable library creation in monorepos, ensuring consistent structure across your codebase.

This lesson demonstrates how AI assistants struggle with complex monorepo structures and how to dramatically improve their understanding using the [Nx MCP extension](https://nx.dev/features/enhance-AI?utm_source=egghead&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI) in Cursor.

**Workflow demonstrated in this lesson:**

- Observe how AI initially attempts to understand monorepo structure by scanning package.json files and analyzing folder hierarchies
- Install the Nx Console extension and configure the Nx MCP server in your project
- Enable the Nx MCP integration in Cursor's settings to access 15 powerful workspace tools
- Ask the AI assistant questions about your workspace structure and dependencies
- Watch as the AI leverages Nx's knowledge to accurately identify project relationships
- Visualize dependencies through an interactive graph generated by the Nx tools

**Key benefits:**

- Enhanced Workspace Understanding: AI assistants gain direct access to Nx's comprehensive workspace knowledge
- Accurate Dependency Mapping: Precisely identify connections between libraries and applications
- More efficient parsing of your workspace structure for your AI assistant

Give Cursor monorepo awareness with the Nx MCP

Learn how to enhance AI capabilities in monorepo setups using Nx MCP integration with Cursor, providing better project insights and dependency visualization.

TypeScript can sometimes feel like bunch of nonsense. But once you internalize a few key patterns, the type system starts to feel like a powerful tool instead of an obstacle.

Here are a few tricks that I’ve personally found valuable, especially if you’re working on a large codebase or building libraries.

---

## 1. Optional Keys vs Optional Values

There’s a big difference between marking a property as optional and allowing `undefined` as a value. These look similar:

```ts
type OptionalKey = {
  foo?: string;
}

type OptionalValue = {
  foo: string | undefined;
}
```

But they behave differently:

* `foo?: string` means the key `foo` might not be present at all.
* `foo: string | undefined` means `foo` is always present, but its value might be `undefined`.

Why this matters? The difference between them affects the way you use it:

* How you check if a property exists
* Function argument inference
* Serializing/deserializing data from external sources

### Example

```ts
function logFoo(obj: OptionalKey) {
  if ('foo' in obj) {
    console.log(obj.foo?.toUpperCase());
  }
}

function logBar(obj: OptionalValue) {
  console.log(obj.foo?.toUpperCase()); // May log undefined
}
```

As a rule of thumb, use `foo?: Type` (Optional Key) when the property might not be present, and `foo: Type | undefined` (Optional Value) when the key is always expected.

---

## 2. Pick and Omit for Object Key Manipulation

When you need to reshape object types by including or excluding specific keys, `Pick` and `Omit` are your go-to tools.

This type utilities are part of the language and are always available for your use, they are particulary useful when you need to derive types.

> Don't forget, Pick and Omit works over Object shapes

### Pick

```ts
type User = {
  id: number;
  name: string;
  email: string;
};

type PublicUser = Pick<User, 'id' | 'name'>;
// { id: number; name: string }
```

`Pick` is useful when exposing a public-facing API without leaking sensitive fields, it lets you choose what properties will be included

### Omit

```ts
type PrivateUser = Omit<User, 'email'>;
// { id: number; name: string }
```

Use `Omit` when you want to reuse a base type but remove some fields for specific scenarios, like forms or UI display logic.

These utilities keep your types DRY and consistent. Instead of redefining structures, you can derive them from existing ones, reducing duplication and potential errors.

---

## 3. Extract and Exclude for Union Filtering

Unlike `Pick` and `Omit`, which work on object keys, `Extract` and `Exclude` operate on union types, they are pretty similar in how the work.

### Extract

```ts
type Status = 'draft' | 'published' | 'archived';

type ArchivedOnly = Extract<Status, 'archived'>;
// 'archived'
```

Use `Extract` when you want to narrow down a union to only include specific members.

### Exclude

```ts
type VisibleStatus = Exclude<Status, 'archived'>;
// 'draft' | 'published'
```

Use `Exclude` when you want to remove one or more members from a union.


These are essential tools when refining API responses, filtering variants, or creating conditional logic that needs to type-check specific string literal options.

---

## 4. Loose Autocomplete

This is a different kind of trick, this one affects how your editor understand your types.

Sometimes you want to offer a set of suggestions to the user without forcing them to pick from a fixed list.

### The trick

```ts
type Variant = 'success' | 'warning' | 'info'

function setVariant(variant: Variant | (string & {})) {
  // ...
}
```

Now TypeScript will offer autocompletion for the variants defined in the `Variant` union, but will also allow  allow any other string.


`string & {}` is essentially still a string, but TypeScript treats it as a branded version, preserving autocomplete while keeping it assignable to `string`.

> [Here](https://egghead.io/blog/using-branded-types-in-typescript) you can found another article related to [Branded Types](https://egghead.io/blog/using-branded-types-in-typescript)

### Use cases

* Props with suggested values
* Config objects
* Third-party data with flexible inputs

---

## 5. Mapped Types for Smart Rewrites

Mapped types let you create new types from existing ones by transforming each property. This concept is a cornerstone of TypeScript’s type system and is covered more deeply in my article: [Learn the Key Concepts of TypeScript’s Powerful Generic and Mapped Types](https://egghead.io/blog/learn-the-key-concepts-of-typescript-s-powerful-generic-and-mapped-types).

You can consider Mapped types as some kind of function that transform a type in another by using all of the utilities and features of Typescript, like the above utilities and tricks, but also string literals, and more.

### Example: feature flags

```ts
type Config = {
  debug: string;
  logging: string;
};

type FeatureFlags = {
  [K in keyof Config]: boolean;
};
// This will create the following type
// { debug: boolean; logging: boolean }
```

### General Utility Type

```ts
type Booleanize<T> = {
  [K in keyof T]: boolean;
};
```

Mapped types are perfect for:

* Adapting backend responses
* Creating flexible utility types
* Rewriting shapes while preserving keys
* Enforcing contracts between layers

They’re also essential in combination with generics to create reusable type logic across your app or library.

> Found more about Generics in the following article [An Introduction to Typescript Generics](https://egghead.io/blog/an-introduction-to-typescript-generics)

---

## 6. The IIMT Pattern (Infer Inside Mapped Type)

This pattern unlocks the power of `infer` within mapped types, allowing you to extract and reuse internal type information from complex structures.

It dynamically inspects each property of a type (by using `infer`), and if that property matches a specific shape (e.g., a function), it extracts part of it.

This means you can build new types that are entirely based on the structure of other types without manually copying anything.

### The pattern

```ts
type API = {
  getUser: () => Promise<{ name: string }>;
  logout: () => void;
};

type ReturnTypes<T> = {
  [K in keyof T]: T[K] extends (...args: any) => infer R ? R : never;
};

// Result:
// {
//   getUser: Promise<{ name: string }>;
//   logout: void;
// }
```

Here, ReturnTypes iterates over each key in the API object and uses conditional types to check if the value is a function. If it is, it uses infer R to grab the return type of that function.

### How it works
- `keyof T` iterates over each key of the input type.
- `T[K]` accesses the value type at each key.
- `T[K] extends (...args: any) => infer R` checks if that value is a function. (consider this as a conditional block)
-  `infer R` captures the return type of the function.
- If the value is not a function, the fallback is never.

This pattern is composable—you can use it to build return type maps, argument type maps, or anything else you need.

```ts
type ArgumentTypes<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => any ? A : never;
};
```

This will give you a type with the argument list of each function in a mapped type.

You can use this in different situations like:

- Generating automatic schemas
- Building strongly-typed service clients
- Rewriting function maps
- Validating types without duplicating logic

If you’re building libraries or dynamic APIs, this pattern is a must-have in your TypeScript toolbox.

Once it clicks, it opens the door to expressive, scalable, and maintainable type logic.




Matías Hernández

Advanced TypeScript Tricks for Cleaner, Safer Code

Improve your TypeScript skills with advanced patterns like Pick, Exclude, mapped types, and the infer-inside-mapped-type trick.

AI Dev Essentials #9: Playwright MCP is amazing, Hot Model Updates & Essential Dev Tools

Learn Playwright MCP, track AI model updates (Gemini, DeepSeek), explore new dev tools & agent insights. Your AI dev update.

AI Dev Essentials #8: Claude's Costly Lessons, Google's AI Flood & Workshop Alert 🚀

Claude Max Mode in Cursor is powerful but pricey—one vague task can rack up costs fast. Learn how to control it and explore the latest AI dev tools.

Hey Everyone 👋,

John Lindquist here with the **tenth issue of AI Dev Essentials!** This week has been absolutely monumental for the AI coding space. Cursor hitting 1.0 and raising $900 million at a nearly $10 billion valuation is a watershed moment for AI-assisted development. The speed at which they've grown—from $1 million to over $500 million in ARR in just over two years—shows just how hungry developers are for better AI coding tools. And with background agents now generally available, we're entering a new era where AI can truly work alongside us asynchronously.

I've personally spent a lot of time withe the "Claude Code" experience the past week to compare it to Cursor. I totally understand the appeal, especially because of how reliably Claude Code can churn away at long tasks (and you're not thinking about burning through requests/costs), but Cursor is still a superior experience when it comes to gathering context and reviewing changes. I'm hoping this puts pressure on the Cursor team to release a "MAX" plan similar to Claude's "MAX" plan. I like having a budget, but I don't like thinking every failed tool call is lost money. I try to remember that we're still all in the super early days of AI, and everyone is just figuring it out as they go.

With that said, let's dive into this week's updates!

### 🎓 New egghead.io Lessons This Week

I'm working on a course "Building Local AI Agents with Ollama and the AI SDK". I'm 5 lessons in and I'm excited to share them, but just not quite ready. They should be up when this newsletter rolls around next week, so keep an eye out for that. 😇

---

## 🚀 Cursor 1.0 & The $900M Funding Round

**Cursor has officially hit 1.0 and raised $900 million at a $9.9 billion valuation**

This week brought two massive announcements from Cursor that cement its position as the leader in AI coding assistants. First, the 1.0 release brings game-changing features like BugBot for automated code review, background agents for asynchronous work, and seamless GitHub integration. Then came the funding news: $900 million led by Thrive Capital, with participation from Andreessen Horowitz, Accel, and DST Global.

**Key Stats:**

- Over $500 million in ARR (growing 60% since April)
- Used by more than half of the Fortune 500, including NVIDIA, Uber, and Adobe
- ARR has been doubling approximately every two months

**Cursor 1.0 Features:**

- **BugBot**: Automatically reviews PRs and catches potential bugs with "Fix in Cursor" integration
- **Background Agent**: Now GA, lets you spawn AI workers for parallel tasks in remote environments
- **Memories**: Per-project context retention so AI doesn't forget key facts
- **Jupyter Support**: AI can now work inside .ipynb notebooks
- **One-click MCP setup**: Streamlined installation for MCP servers

([TechCrunch Coverage](https://techcrunch.com/2025/06/05/cursors-anysphere-nabs-9-9b-valuation-soars-past-500m-arr/), [DEVCLASS Analysis](https://devclass.com/2025/06/06/cursor-ai-editor-hits-1-0-milestone-including-bugbot-and-high-risk-background-agents/))

> I do love seeing money being poured into companies that are building AI tools for developers. I'm hoping that the leads to customized models that are smarter, faster, with reliable tool calling, and features around "agent swarms" that can tackle complex tasks in parallel. I'm really excited to see what sorts of UIs emerge for orchestrating these agents.

---

## 🧠 Model & Platform Updates

### OpenAI o3 & o3-pro: Major Price Drop and Release

OpenAI made significant waves this week with two major announcements. First, Sam Altman confirmed an 80% price reduction for o3, making it viable as a "daily driver" model. Cursor immediately updated their pricing to reflect this change, noting that "o3 is a fantastic model, and we're excited that it can now be used as a daily driver."

Then came **o3-pro**, OpenAI's most advanced reasoning model yet. Community consensus is forming around its capabilities and limitations:

**o3-pro Strengths:**

- Excels at math competitions and scientific reasoning
- Handles complex multi-step problems with deeper thinking
- Acts as a "superhuman researcher + structured thinker" capable of processing massive amounts of data
- Demonstrates impressive performance on challenging tests like the "reindeer" problem

**Community Reality Check:**

- Not ideal as a daily coding model—better suited for complex reasoning tasks
- Mixed results on real-world coding: One developer reported it failed to fix type errors, reducing 34 errors to only 28 despite confident promises
- Most users don't need this level of reasoning power for everyday tasks
- Best used for research, analysis, and uncovering insights you might miss

**Codex Gets Internet Access**: OpenAI also rolled out internet access for Codex, allowing it to install dependencies, run tests with external resources, and upgrade packages during task execution. The feature is off by default and provides granular control over allowed domains and HTTP methods.

> This all rolled out last night. I haven't had a chance to dig in to o3-pro, so I just gathered a bunch of early impressions from the community above. I'll have my own personal take next week.

### Gemini 2.5 Pro Tops WebDevArena

Google's updated Gemini 2.5 Pro continues to excel at coding, now leading WebDevArena with a 1443 Elo score (35-point jump). The update introduces:

- **Thinking budgets** for cost/latency control
- Enhanced coding performance for complex web apps
- Improved style and structure in responses
- GA coming in the next few weeks
- **New SOTA on Aider Polyglot**: The upcoming GA version scores 86.2%, beating the previous version by 10 percentage points

([Google Blog](https://blog.google/products/gemini/gemini-2-5-pro-latest-preview/), [9to5Google](https://9to5google.com/2025/06/05/gemini-2-5-pro-preview-06-05/))

> Gemini 2.5 Pro is in this interesting place where it's _awesome_, but still a bit difficult to work with in Cursor. I really, really want to use it as my daily driver, but the thinking process often seems to spin too much. I'm hoping a Cursor system prompt (or a community propmt) will emerge to help smooth it all out. The results have always been great, but sometimes it ends up taking too long and my patience wears out.

### Mistral Launches Magistral: Multilingual Reasoning Models

Mistral AI announced Magistral, their first reasoning models designed to excel in domain-specific, transparent, and multilingual reasoning. The models come in two variants:

- **Magistral Small (24B)**: Open-source under Apache 2.0 license
- **Magistral Medium**: Enterprise version with enhanced capabilities

Key differentiators include multilingual reasoning (especially strong in European languages), 10x speed improvements in Le Chat, and transparent thinking processes users can follow and verify. ([CNBC Report](https://www.cnbc.com/2025/06/10/microsoft-backed-ai-lab-mistral-debuts-reasoning-model-to-rival-openai.html), [TechCrunch](https://techcrunch.com/2025/06/10/mistral-releases-a-pair-of-ai-reasoning-models/))

> Any open-source news is good news. While I'm happy to pay providers for "premium" access to models, I'm still hopeful open-source will unlock AI for everyone down the road. I just never make time to test the open-source models with so much else happening at the same time.

---

## 💰 Major Funding & Business Updates

### Linear Raises $82M at $1.25B Valuation for AI Agent Platform

Linear secured $82 million in Series C funding led by Accel, positioning itself as "the place where teams, AI, and agents build software together." With 280% profit growth and over 15,000 customers including OpenAI, Scale AI, and Perplexity, Linear is focusing on making their platform the natural home for AI agents to coordinate work across product workflows. ([Reuters](https://www.reuters.com/business/atlassian-competitor-linear-raises-funding-125-billion-valuation-2025-06-10/), [Linear Blog](https://linear.app/blog/building-our-way))

> I included this because Linear's MCP is a popular MCP for agents. So far, everyone uses so many variations of "AI Task Tracking" and it seems like Linear is raising to the top. Seeing them focus on AI-specific language and raising money is only a good sign (maybe Cursor will buy them or spin off their own version someday?)

---

## 🛠️ Developer Tools & Ecosystem

### Vertex AI Studio Gets Major Redesign

Google Cloud unveiled a redesigned Vertex AI Studio with a developer-first approach:

- Dark mode support across the platform
- Unified UI combining Chat and Freeform prompting
- Easy grounding with Google Search or Maps
- Direct code generation for Python, Android, Swift, Web, Flutter
- Access to 200+ foundation models including Gemini, Llama, and Claude

([Google Cloud Blog](https://cloud.google.com/blog/products/ai-machine-learning/vertex-ai-studio-redesigned))

### ElevenLabs Launches v3 with Emotion Control

ElevenLabs v3 introduces revolutionary emotion direction through audio tags:

- Control emotions with tags like [excited], [whispers], [sighs], [laughs]
- 70+ language support
- Enhanced expressiveness and contextual understanding
- Multi-speaker dialogue with matching prosody

([ElevenLabs v3](https://elevenlabs.io/v3), [Documentation](https://elevenlabs.io/blog/eleven-v3))

> These voices are _so good_. I'm tempted to toss one of my favorite books in their ("The Silent Gondoliers") and go on a road trip to see how they handle full narration.

### OpenAI Agents SDK Now in TypeScript

OpenAI released their Agents SDK in TypeScript with full feature parity to Python:

- Human-in-the-loop approvals
- Handoffs, guardrails, tracing, MCP support
- RealtimeAgent for voice interactions
- Enhanced Traces dashboard for Realtime API sessions

([OpenAI Developers](https://openai.github.io/openai-agents-js/))

> TypeScript is arguably _the_ language for building AI agents thanks to all the hosting/endpoints/etc already built for it. For most platforms, it becomes trivial to plop in a TypeScript SDK package, an API key, and spin up Agents.

---

## 🔧 Quick Updates

- **Prisma Local Development**: `npx prisma dev` now persists data between sessions and supports multiple instances without Docker ([Prisma Blog](https://www.prisma.io/blog/prisma-6-8-0-release))
- **OpenAI Advanced Voice**: Updated for more natural conversations with improved translation capabilities
- **Firebase Studio**: Turn Figma designs into working apps with Gemini integration ([Firebase Blog](https://firebase.blog/posts/2025/05/whats-new-at-google-io/))
- **Supermemory MCP**: Now open source for infinite chat context ([GitHub](https://github.com/supermemoryai/supermemory-mcp))
- **Taskmaster v0.16**: New .taskmaster folder structure with Bedrock, Azure, and Vertex AI support ([GitHub](https://github.com/eyaltoledano/claude-task-master))
- **Ask-Human MCP**: New zero-config tool for human-in-the-loop verification—pauses agents when unsure, logs questions to `ask_human.md`, resumes when you provide answers ([GitHub](https://github.com/Masony817/ask-human-mcp))
- **AI Studio Clarification**: Google's Logan Kilpatrick confirmed AI Studio free tier isn't going away—it's transitioning to API key-based access with continued free tier availability

---

## 🤖 AI Research & Observations

### AIs Play Diplomacy: Revealing Model Personalities

A fascinating experiment had different AI models play the strategy game Diplomacy, revealing distinct behavioral patterns:

- **Claude** couldn't lie and was exploited ruthlessly by other players
- **Gemini 2.5 Pro** nearly conquered Europe with brilliant tactical gameplay
- **o3** orchestrated secret coalitions, backstabbed every ally, and won

This real-world test highlights how different models exhibit varying levels of strategic thinking, deception capability, and goal-oriented behavior—important considerations when choosing models for different applications.

> I'm hoping someday these can turn into live visual competitive storytelling experiences. Kind of like a battlebots tournament, but with AI models. I'll admit I'm also hiding my head in the sand when it comes to using AI to "dominate" anything. (I love you AI Overlords! ❤️)

### Anthropic Cuts Windsurf API Access

In a surprising move, Anthropic reportedly restricted Windsurf's API access to Claude models. This development raises questions about the competitive dynamics between AI providers and coding assistant platforms. ([TechCrunch](https://techcrunch.com/2025/06/10/anthropic-windsurf-api-access-restricted/))

> Seems fair IMO. OpenAI bought Windsurf. OpenAI competes with Anthropic. Why would Anthropic want to help OpenAI make money?

---

## 💡 Security & Best Practices

**Vercel on AI Agent Security**: New guidance on prompt injection vulnerabilities emphasizes: assume compromise, limit tool call access, and don't trust output. Essential reading for anyone building AI agents. ([Vercel Blog](https://vercel.com/blog/building-secure-ai-agents))

---

## ✨ Workshop Spotlight: Conquer the Complexity of Cursor ✨

Master practical AI development workflows in Cursor. This hands-on workshop covers Agents, Ask mode, Custom Modes, multi-file analysis, effective prompting, Cursor rules, and strategies for handling AI failures.

- **When:** _Friday, June 27, 2025, 9:00 AM - 2:00 PM (PDT)_
- **Where:** Zoom (Live Q&A included)
- **Investment:** $249 (early bird prcing of $200 until June 18th)

➡️ [**Read More about the Workshop**](https://egghead.io/workshop/cursor)

➡️ [**Register Now ($249)**](https://buy.stripe.com/7sY7sEbOZbGO0kx7pw9fW09?prefilled_promo_code=GEUHPI9B)

_(Team training also available)_

---

That's all for this milestone tenth issue! The convergence of massive funding, breakthrough features, and growing enterprise adoption shows we're at an inflection point for AI-assisted development. The tools are getting more powerful, the agents more capable, and the possibilities more exciting.

If you have any feedback or questions, hit reply. I'm happy to chat about the latest in AI dev tools.

John Lindquist

[egghead.io](https://egghead.io)

AI Dev Essentials #10: Cursor Hits 1.0 (and $9.9B!), OpenAI o3/pro, Gemini Updates

AI Dev Essentials #10: Cursor 1.0 lands with $900 M, OpenAI cuts o3 pricing & debuts o3-pro, Gemini 2.5 Pro tops coding tests—plus fresh tools, funding updates

Debugging complex web forms can be a grind. You manually input data, check console logs, and painstakingly try to reproduce bugs. This lesson unveils a powerful, largely automated workflow using Cursor's AI agent in conjunction with the Playwright MCP to thoroughly test a web form, identify issues, and even fix the underlying code.

First, you'll see how to instruct the AI to instrument your form's code with exhaustive console logging. Then, by providing only the URL of the live form, you'll delegate the testing process to the AI, which uses Playwright to interact with the form in multiple ways, attempting to break it and discover edge cases. The AI then analyzes the generated console logs to produce a detailed report of its findings. Finally, armed with this report and the original code, the AI can attempt to fix the identified bugs and re-verify its changes, all while you "go get a sandwich."

**Workflow demonstrated in this lesson:**

*   Instruct Cursor's AI agent to add comprehensive `console.log` statements to your form's TypeScript (.tsx) file.
*   Provide the live URL of the web form (running on `localhost`) to the AI, without giving it direct access to the updated code file.
*   Direct the AI to use the Playwright MCP to open the URL in a browser.
*   Task the AI with devising and executing multiple test scenarios (e.g., empty submission, invalid inputs, mismatched passwords) to fill out and submit the form.
*   Have the AI retrieve and analyze the browser's console logs after each test attempt.
*   Generate a consolidated report detailing the form's behavior, observed errors, and potential bugs based on the logs.
*   Instruct the AI to use this report and the original form code (now brought back into context) to fix the identified issues.
*   Optionally, have the AI re-run the tests to verify the fixes.

**Key benefits:**

*   **Automated Test Execution:** Leverage Playwright through Cursor to automatically interact with your live form.
*   **AI-Driven Test Case Generation:** The AI devises different input strategies to uncover bugs.
*   **Log-Based Bug Reporting:** Automatically capture and analyze console output to pinpoint issues.
*   **Hands-Off Debugging:** Delegate the testing and initial bug reporting to the AI.
*   **Efficient Bug Fixing Cycle:** Use AI-generated reports to quickly guide AI-assisted code corrections.
*   **Focus on High-Level Direction:** Instead of manual testing, you guide the AI's testing strategy and bug-fixing process.

By the end of this lesson, you'll have a robust method for delegating the tedious aspects of form testing and debugging to Cursor's AI, allowing for more efficient development and a more reliable end product.

---

**Phase 1: Instrumenting Code with Exhaustive Logging**

**Context:**
*   `{@filePath}` (e.g., `App.tsx`) is in Cursor's context.

**Prompt:**
"In `{@filePath}`, add exhaustive console logging for all form events, state changes, and validation logic. Focus on capturing input values, current errors, and the outcome of validation checks. The goal is to have detailed logs for later analysis. Do *not* fix any existing code errors; only add logging. Stop after modifying the file."

---

**Phase 2: AI-Driven Form Testing with Playwright and Log Analysis**

**Context:**
*   `{@formURL}` (e.g., `http://localhost:5173`) is in Cursor's context.
*   The live form at `{@formURL}` should be running the version of the code that *includes the exhaustive logging* added in Phase 1.
*   Playwright MCP is available.

**Prompt:**
"Using the Playwright MCP and the live form at `{@formURL}`:
1.  Devise [N, e.g., 3-5] distinct test scenarios to fill out and submit the form. Include scenarios designed to trigger validation errors and edge cases (e.g., empty submission, invalid data types, boundary values, mismatched passwords).
2.  For each scenario:
    *   Execute the form interaction using Playwright.
    *   Retrieve all browser console logs generated during that interaction.
3.  Compile a consolidated 'Form Behavior Report' detailing:
    *   Each test scenario and the inputs used.
    *   Observed behavior/UI state (e.g., error messages displayed).
    *   Key console log outputs relevant to errors or unexpected behavior.
    *   Any discrepancies or potential bugs identified.

---

**Phase 3: Fixing Bugs Based on AI Report and Re-Verification**

**Context:**
*   The 'Form Behavior Report' from Phase 2 is in the chat history.
*   `{@filePath}` (e.g., `App.tsx` – the original file, *not* the one Playwright interacted with, unless it's the same deploy) is in Cursor's context.
*   The live form at `{@formURL}` can be updated/re-deployed with fixes.
*   Playwright MCP is available.

**Prompt:**
"Based on the 'Form Behavior Report' (from our previous conversation) and the code in `{@filePath}`:
1.  Analyze the reported issues and implement the necessary code changes in `{@filePath}` to fix them.
2.  After applying the fixes and assuming the live form at `{@formURL}` is updated with these changes:
    *   Re-run *all previously defined test scenarios* using the Playwright MCP.
    *   Retrieve and analyze the console logs for each.
3.  Provide a verification summary: confirm if the original bugs are fixed and if any new regressions were introduced."

Capture Browser Logs with Playwright MCP in Cursor to Generate Reports

Fixing runtime errors in web applications, especially those that require browser interaction or appear in stages, can be a tedious back-and-forth. This lesson demonstrates how to create a powerful, automated debugging loop using Playwright MCP integrated into Cursor IDE via custom Rules, allowing the AI to interact with your live application, identify errors, and iteratively fix them.

**Workflow demonstrated in this lesson:**

*   Install and configure the Playwright MCP server in Cursor settings.
*   Create a custom Cursor Rule (e.g., "autofix") instructing the AI to:
    *   Use Playwright MCP to open a specified URL in a browser.
    *   Check for any errors displayed on the page.
    *   Automatically attempt to fix those errors in your codebase.
    *   Iterate this process until all errors are resolved.
*   Invoke the custom rule within Cursor's AI Agent, providing the application's URL.
*   Observe the AI agent launch Playwright, navigate the browser, identify errors, and apply code changes.
*   For errors hidden behind UI elements (like an error button), provide a screenshot to the AI, instructing it to interact with the UI to reveal and then fix subsequent errors.

**Key benefits:**

*   **Automated Debugging Cycle:** Let the AI handle the repetitive task of launching, testing, and fixing common web application errors.
*   **Iterative Problem Solving:** The AI can tackle multiple errors sequentially, making changes and re-testing.
*   **Browser Interaction:** Leverages Playwright to understand the application's state directly from the browser.
*   **Visual AI Assistance:** Use screenshots to guide the AI in interacting with UI elements to uncover and fix deeper issues.
*   **Reduced Manual Effort:** Spend less time manually debugging and more time on feature development.

By combining Playwright MCP with Cursor's AI Agent and custom Rules, you can significantly streamline your web development workflow, turning a frustrating debugging process into an automated one.

---

```json
    "playwright": {
      "command": "pnpm",
      "args": ["dlx", "@playwright/mcp@latest"]
    }
```

```
Please use the Playwright MCP to open a browser to the URL I provide, check for any errors, and then automatically fix those errors in my codebase, then continue to iterate until all the errors are gone.
```

Autofix Browser Errors with the Playwright MCP in Cursor

Automate browser-based debugging in web apps using Playwright MCP and Cursor IDE Rules—AI detects and fixes errors in real-time with minimal dev effort.

AI Dev Essentials #7: Microsoft's AI Blitz, Google's NotebookLM Shines & New Coding Agents

AI agents are reshaping coding in GitHub and VS Code, while NotebookLM’s mobile app quietly revolutionizes how developers collect and recall research on the go.

After a long AI-driven coding session in Cursor, getting a "second pair of eyes" on the generated code is crucial. Manually reviewing everything can be time-consuming. This lesson demonstrates how to use the CodeRabbit VS Code extension for an initial AI-powered code review, and then leverage Cursor's Agent to intelligently address the identified issues, even integrating test runs into the AI conversation.

**Workflow demonstrated in this lesson:**

*   Install and use the CodeRabbit extension to initiate an AI code review on your recent changes.
*   Examine potential issues and suggestions surfaced by CodeRabbit within the VS Code sidebar.
*   Apply CodeRabbit's direct code suggestions or use its "Fix with AI" feature.
*   Copy CodeRabbit's "Fix with AI" instructions into Cursor's Agent for more interactive and context-aware fixes.
*   Provide additional context to Agent, such as specific test commands (e.g., from Atuin command history), to guide the AI in fixing code and ensuring tests pass.
*   Iteratively work with Agent and CodeRabbit to refine code, apply fixes, and verify changes.
*   Stage changes with Git to easily revert or compare AI-suggested modifications.

**Key benefits:**

*   **Automated First-Pass Review:** Quickly get AI-driven feedback on your code changes.
*   **Integrated AI Fixing:** Seamlessly transition from CodeRabbit's suggestions to Cursor's Agent for more nuanced problem-solving.
*   **Contextual Debugging with AI:** Provide specific test commands and error messages to Agent for targeted fixes.
*   **Iterative Refinement:** Use the AI tools in a loop to address issues, test, and improve code quality.
*   **Improved Confidence:** Validate AI-generated and AI-assisted changes by running tests as part of the workflow.

By combining CodeRabbit's review capabilities with Cursor's Agent, you can create a more efficient and reliable workflow for reviewing, fixing, and testing code generated or modified with AI assistance.

Local AI Code Reviews with the CodeRabbit Extension in Cursor

Learn how to create a simple MCP Server to search GitHub Issues.

I'll show you how to set up an MCP server tool, receive parameters, add the server to Cursor, and run it. We'll see how we can return a simple text response from the MCP server, as well as a markdown-formatted text containing clickable links.

Ákos Kőműves

Create a Simple GitHub Issue Search MCP Server using Cursor

Learn to build a simple MCP server to search GitHub issues and use it from Cursor.

Search

Search Results

AI Dev Essentials #11: Gemini 2.5 Stable, MCP goes mainstream

Dynamically Inferring File Types from User Prompts in Local AI Scripts

Creating Dynamic, File-Based Commands for Local AI Scripts

Handling Invalid Commands and AI Errors in Local Scripts

Generating Text with a Local AI Model Based on File Content

Providing File System Context to Local AI Scripts with Globby and Zod Enums

Processing Dynamic User Input in Local AI Scripts

Scripting Local Language Models with Ollama and the Vercel AI SDK

Scripting Local Language Models with Ollama and the Vercel AI SDK

Enable Cursor to directly access the terminal to read the output and fix issues

Enable Cursor to generate predictable project setups

Give Cursor monorepo awareness with the Nx MCP

Advanced TypeScript Tricks for Cleaner, Safer Code

AI Dev Essentials #9: Playwright MCP is amazing, Hot Model Updates & Essential Dev Tools

AI Dev Essentials #8: Claude's Costly Lessons, Google's AI Flood & Workshop Alert 🚀

AI Dev Essentials #10: Cursor Hits 1.0 (and $9.9B!), OpenAI o3/pro, Gemini Updates

Capture Browser Logs with Playwright MCP in Cursor to Generate Reports

Autofix Browser Errors with the Playwright MCP in Cursor

AI Dev Essentials #7: Microsoft's AI Blitz, Google's NotebookLM Shines & New Coding Agents

Local AI Code Reviews with the CodeRabbit Extension in Cursor

Create a Simple GitHub Issue Search MCP Server using Cursor