Learn Ionic, Jspm and Serverless

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.

In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.

Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.

While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.


Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

A scenario you will inevitably run into is users needing to reset their passwords for security reasons or they lost and forgot their password.

We'll learn how to send our users an email to reset their passwords, after we send the email, we'll display a notification alert with ionic alertController to the user and redirect them to the login page.


Send a Password Reset Email Using Firebase Authentication with sendPasswordResetEmail

Now it's time to create a template for our authentication page using Ionics page generation CLI.

We'll show how to use the same page for all of our authentication operations by reading the parameters from the URL and displaying the right form elements and buttons depending on the parameters present.


Create an Authentication Page Template with Ionic Page Generation

We'll learn how to delete documents from the database. This action is pretty straight forward, we'll add a delete button that will call Firestore `deleteDoc` and pass in the task id.

We'll also explore a good practice when performing destructive operations (__like deleting database objects__) of adding a confirmation step to make sure our users don't delete objects by accident. We'll do this with the Ionic Alert Controller.


Delete a Document with a Confirmation Step from Firestore

We'll evaluate 2 good practices when adding a new task.

First, we'll show the users a toast alert to notify them that their document was saved in the database. We'll do this with a toast component that ionic makes available to us

And second, we'll use Angular's router to navigate the user back to the task list.

Notify Users Their Database Operation Worked with a Toast Alert

We'll create the template for our new page and set everything up so that we can use this page to create new tasks. The first thing we will do is create a BehaviorSubject task variable that we'll store form values in to send to Firebase.

Because we are using the ionic framework we'll lean heavily into this when creating our templates. You'll see how we bind text values to the object we'll send to Firebase as well as a selector component that will use `ion-segment`.

We'll also see a tip on handling the `async` pipe in a top container in our template so that we don't have to manually add it everywhere we'll render a property from an observable


Create a New Task Form Page Template with Ionic

firebase

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Import and Set Environment Variables from a .env file using Netlify CLI

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

There are a few ways you can run Netlify serverless functions while you are developing them. 

You can: 

- Navigate to the directory under the `/.netlify/functions/` path
- Curl them using the full URL
- Use an app like Postman

Manually Trigger Netlify Serverless Functions Locally

Netlify makes deploying to production a breeze by configuring your Netlify CLI to your Netlify account and integrating with GitHub.

We'll log in to Netlify through the CLI and initialize a site by completing all the options that the CLI runs us through. Once this is done, Netlify will trigger new builds for your site every time you push to GitHub.

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

Netlify makes developing serverless functions easy with the netlify-cli (`ntl` for short). You'll be able to build and test functions locally as well as publish your functions from the CLI. 

We will install netlify-cli globally and create a `netlify.toml` file that will configure where the CLI should look to run functions that we define, in our case `functions/`. When the application is served up, Netlify runs functions under `/.netlify/functions/`.

Set up a Local Development Environment for Serverless Functions Using Netlify

A serverless function is something that is going to allow us to do server-like things without having to manage servers, but an important distinction here is that serverless does not mean that there are **no** servers. 

The environment is actually running on top of an operating system and uses physical servers, but the responsibility for provisioning and managing the infrastructure belongs entirely to the service provider.

Some of the benefits of using serverless functions: 

- **Enhanced scalability.** No need for developers to implement code to scale. It scales automatically.
- **Reduced time to market.** Serverless is an optimized set of tools for building quickly.
- **No boiler code.** A serverless function is just a tiny piece of logic. Reducing the complexity of software.
- **More time for user experience.** Serverless functions allow teams to focus resources on the user experience and not on managing servers.
- **Security.** We can call third-party APIs securely without exposing important data on the client-side.

What Are Serverless Functions?

Understand the basics of the Ionic Card component. See how images are handled within the card, and how to use its sub-components like title, subtitle, and content.

Using the Ionic Card component

Learn the changes to the Ionic button component that were introduced in version 4. Understand how to change the style and size of the button and how to quickly include an icon.

Using the Ionic Button Component

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Creating cross-platform web-based applications with Ionic 4 and Vue is easy thanks to the Stencil compiler and the Vue.js CLI.

We look at how to combine these together to use Ionic 4 components within our Vue.js applications.

Create an Ionic 4 application with Vue.js

Learn how to use the Ionic 4 Actionsheet component to allow for more options than the standard Alert component.

Using the Ionic 4 Actionsheet Component

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Creating cross-platform web-based applications with Ionic 4 and React is easy thanks to the Stencil compiler and `create-react-app`.

In this video, we look at how to use create-react-app and @ionic/react to make an Ionic 4 + React application

Create an Ionic 4 application with React

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.

John Lindquist

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.

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.

Hey Everyone 👋,

John Lindquist here with the **sixth issue of AI Dev Essentials!** The AI coding landscape continues its rapid evolution, and this week is packed with significant updates. Cursor has rolled out its major 0.50 release, overhauling pricing, supercharging its AI features, and refining the developer experience. We're also seeing exciting new open-source entrants like the Zed code editor and the Cloudflare Agent Framework, plus fresh practical tips for your AI-assisted workflows. There's a lot to unpack, so let's dive in!

---

### New egghead.io Lessons This Week

* **[Clean up Legacy Functions for Testability in Cursor (0.50+) with cmd+k](https://egghead.io/clean-up-legacy-functions-for-testability-in-cursor-0-50-with-cmd-k~x1wb0)**

  Learn to refactor legacy code by extracting logic into new, top-level functions using Cursor's "Edit Full File" mode (Cmd+K then Cmd+Shift+Enter). This lesson shows how to break down monolithic functions into smaller, testable units and use "Fix in Chat" for quick error resolution, making your codebase more modular and maintainable.

* **[Automatically Improve Cursor Rules Using Custom Prompts](https://egghead.io/automatically-improve-cursor-rules-using-custom-prompts~5010d)**

  Refine unclear AI prompts or Cursor rules (.mdc files) by referencing a dedicated "best practices" rule file directly within Cmd+K. This lesson demonstrates how to instantly improve instruction clarity and leverage your own standards for better AI outcomes, with an option to have the AI Agent explain the improvements.


---

## 🚀 Cursor 0.50 Update: Key Enhancements
_Cursor's significant 0.50+ update simplifies pricing, boosts AI capabilities, and refines the developer experience. Highlights from their [changelog](https://www.cursor.com/changelog):_

### Simplified Pricing & Enhanced Model Access
Cursor introduces a unified, request-based pricing model. Max Mode, for demanding tasks, now offers token-based access to all top models. (*Note: Older Cursor versions will have access to previous MAX versions and long context mode for a few more weeks before they are sunset. [Read more about Max Mode](https://docs.cursor.com/max-mode).*)

### Advanced AI, Agentic Features & Broader Context
AI capabilities are enhanced with a new Tab Model for multi-file changes, a Background Agent (preview) for parallel tasks ([read more](https://docs.cursor.com/background-agent)), the ability to include the entire codebase in context using `@folders`, and fast agent-assisted edits in long files.

### Streamlined Workflow & Developer Experience
Developer workflow is streamlined with a refreshed Inline Edit (Cmd/Ctrl+K) integrated with agent options, support for multi-codebase projects via Workspaces, and improved chat features like markdown export and duplication.

---

## 🛠️ Dev Tooling, Frameworks & Ecosystem

_The developer ecosystem keeps expanding with new frameworks, SDKs, and practical agentic workflows._

* **Zed: The World's Fastest AI Code Editor**
  
  Zed is a new, open source, Rust-based code editor designed for agentic, collaborative editing. Features include automatic context discovery, real-time agent streaming, and extensibility via MCPs and tools. ([Zed](https://x.com/zeddotdev/status/1920102691365138826), [Blog](https://zed.dev/blog/fastest-ai-code-editor?x=60))

* **Cloudflare Agent Framework Video & Demo**
  
  Craig Dennis shows off the Cloudflare Agent Framework: synchronized agent state, client-side SQL storage, durable execution of third-party APIs (like YouTube), and human-in-the-loop RPC. [Watch the video](https://www.youtube.com/watch?v=ULu8hjFe_S0) | [GitHub](https://github.com/craigsdennis/kudos-agent) ([Craig Dennis](https://x.com/craigsdennis/status/1920643394872762487))

* **Mermaid Diagrams Coming to Cursor**
  
  The Cursor team announced that they will support Mermaid diagrams—great for visualizing complex code and data pipelines. ([ian](https://x.com/shaoruu/status/1922183290896744816))

* **AI SDK 5 Preview: UI Message Persistence**
  
  Store UI messages (not model messages) for better state restoration and backend integration (e.g., Langchain). ([Lars Grammel](https://x.com/lgrammel/status/1921542049821610068))

* **Gemini 2.5 Pro Turns YouTube Videos into Interactive Learning Apps**
  
  See it in action and check out [50+ free AI agent and RAG tutorials](https://github.com/Shubhamsaboo/awesome-llm-apps) ([Shubham Saboo](https://x.com/Saboo_Shubham_/status/1921210422742626449)).

---

## 💡 Prompting, Workflows & Best Practices

* **Prompting Techniques for Gemini Thinking Models**
  
  - Provide step-by-step instructions and refine as needed
  - Use multishot prompting for deeper understanding
  - Define output and behavior with clear system instructions
  - Debug and steer by checking reasoning for inconsistencies
  - For long outputs, be specific in your prompt
  [Full thread](https://x.com/googleaidevs/status/1922033670224806082) ([Google AI Developers](https://x.com/googleaidevs/status/1922033670224806082))

* **10 Brutal Lessons from 6 Months of Vibe Coding**
  
  [Reddit post](https://www.reddit.com/r/PromptEngineering/comments/1kk1i8z/10_brutal_lessons_from_6_months_of_vibe_coding/) ([Ian Nuttall](https://x.com/iannuttall/status/1921901239526109543))

* **Org Charts as Agent Architectures**
  
  Manu Cornet's classic comic is a surprisingly apt metaphor for AI agent architectures—even the Microsoft one. ([sunil pai](https://x.com/threepointone/status/1921105337907548350))

* **Pro Tip: Add Cursor's Docs to Cursor**
  
  Get Cursor tips inside Cursor by adding its own documentation. ([Fili](https://x.com/filiksyos/status/1920887960729170203))

* **Plan & Act Modes in Cline: Context-First Agentic Coding**
  
  Cline's Plan Mode helps you and the agent gather context and co-create a strategy before any code is written. Act Mode then executes with full context for robust, maintainable code. ([Cline](https://x.com/cline/status/1920009558971580648), [Blog](https://cline.bot/blog/plan-smarter-code-faster-clines-plan-act-is-the-paradigm-for-agentic-coding))

---

## 👨‍💻 Community Buzz & Quick Links

* **Anthropic is Thinking About a Meta Registry**
  
  [Discussion](https://github.com/modelcontextprotocol/registry/discussions/11) ([Sam Bhagwat](https://x.com/calcsam/status/1920250600412811314))

* **OpenAI Deep Research for GitHub Repos in ChatGPT**
  
  Connect GitHub repos to ChatGPT's deep research agent for detailed, cited reports. [Example](https://chatgpt.com/s/dr_681bf67f214c81918c0e9f934cd17171) ([OpenAI Developers](https://x.com/OpenAIDevs/status/1920556386083102844))

---

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

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

* **When:** Thursday, May 22, 2025, 9:00 AM to 2:00 PM (PDT)
* **Where:** Zoom (Live Q&A included)
* **Investment:** ~~$249~~ $200 (Early Bird - 20% off until May 14th at midnight!)

[Read More](https://egghead.io/workshop/cursor) | [Register Now](https://buy.stripe.com/3csdSh2GTdhucTedQW)

_(Team training also available)_

---

That's the scoop for this issue! The pace of change is only accelerating—new models, smarter agents, and better tools are landing every week. If you have feedback or questions, hit reply! Always happy to chat about the latest in AI dev tools.

John Lindquist

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

AI Dev Essentials #6: Cursor 0.50, Zed, Cloudflare & AI Workflows

Cursor 0.50 drops with streamlined pricing and smarter agents. Zed and Cloudflare launch new dev tools. Plus, NotebookLM and Gemini push mobile AI forward.

Hey Everyone 👋,  
  
John Lindquist here with the **fifth issue of AI Dev Essentials!** This week, I've been relying more on GPT-4.1 in Cursor (which seems vastly improved since I last tried it) when building CLI and node tools. GPT 4.1 seems more aggressive in using tools as a pseudo reasoning step, while Gemini 2.5 Pro often jumps straight to code changes based on its "real" reasoning. I'm finding that GPT 4.1 in Cursor is becoming legit, especially with a "please explain that back to me" workflow. The speed allows for almost instant alignment. This "time to alignment" is so critical. It's that moment you \*know\* the AI is on the same page after a brain dump. On another note, programming is getting weird! I had a moment working on an MCP process manager where all the code was correct, but my \*English descriptions\* of what it was doing were too technical and thus misleading. Wild times!  
  
Big news: **Gemini 2.5 Pro upgrade** launched a couple hours ago. I'm super excited for this to land in Cursor, hopefully even later today! For now, you can try it out in AI Studio. I can't wait to see the improvements in Cursor's agent mode, especially since the tool calling is reportedly vastly improved. Beyond that, the major themes this week include impressive new **generative AI capabilities** for voice, a continued surge in **developer tooling and frameworks** (especially open source), and ongoing discussions around **prompting best practices and AI model quirks.**  
  
Let's dive in!

* * *

🎓 New egghead.io Lessons This Week
-----------------------------------

*   [When to Use Cursor Rules Instead of MCPs](https://egghead.io/when-to-use-cursor-rules-instead-of-mcps~zazdq)
    
    This lesson demonstrates creating a Cursor Rule for a CLI tool (\`ghx\` for scraping GitHub examples) to make it available to the agent. It highlights how agent requested rules can be a simpler alternative to MCPs for tool integration, offering more control over context.
    
*   [Brainstorming and Planning with Mermaid Diagrams in Cursor](https://egghead.io/brainstorm-and-planning-with-mermaid-diagrams-in-cursor~9iu69)
    
    Learn to use Cursor Rules to enable Mermaid diagram generation. The lesson shows how to create and iterate on diagrams (like basic to do app flows and sequence diagrams for optimistic updates) visually within Cursor, providing a way to plan before coding.
    
*   [Create Complex Cursor Shortcuts to Run Commands and Generate AI Commits](https://egghead.io/create-complex-cursor-shortcuts-to-run-commands-and-generate-ai-commits~7arof)
    
    This lesson walks through setting up a custom keyboard shortcut (Command+Shift+S) in Cursor's JSON settings to run a sequence of commands: stage all git changes, use Cursor to generate a commit message, commit, and then push/pull.
    

* * *

💰 AI Coding Assistant Valuations & Acquisitions Skyrocket
----------------------------------------------------------

_The AI coding assistant space is on fire with some massive financial moves happening._

*   **Anysphere (Cursor IDE) Hits $9 Billion Valuation**
    
    Cursor's parent company, Anysphere, reportedly secured a new $900 million funding round, pushing its valuation to an estimated $9 billion. Key investors include Thrive Capital, Andreessen Horowitz (a16z), and Accel. This is a huge jump from their $2.5 billion valuation in January 2025, showing incredible investor confidence. (Source details from PitchBook: "Maker of AI-coding software Cursor is doubling its valuation every 8 weeks", citing The Financial Times; and Crunchbase News: "AI-Powered Coding Tool Anysphere Lands $900M At $9B — Report".)
    
*   **OpenAI Reportedly Acquires Windsurf (formerly Codeium) for ~$3 Billion**
    
    In what would be its largest acquisition, OpenAI is said to be acquiring Windsurf. Windsurf, an AI-assisted coding tool, was previously valued around $1.25 billion. This move clearly signals OpenAI's intent to bolster its position in the AI developer tools market. (Source details from Mashable citing Bloomberg: "OpenAI is buying Windsurf for $3 billion. What does that mean for ChatGPT?"; and Investing.com citing Reuters/Bloomberg: "OpenAI agrees to buy Windsurf for about $3 billion, Bloomberg News reports".)
    
    My take: It seems like OpenAI, above all, needed the team behind Windsurf. The value of people talented in code generation is through the roof right now. But they also needed a product ASAP, so it's essentially like they're paying for same day shipping, even with this incredible amount of money. And it boggles my mind that Cursor's valuation is estimated at $9 billion. I know a lot of us developers look at both Windsurf and Cursor and kind of think to ourselves that we could have forked VS Code and built these things. So, seeing an incomprehensible amount of value being assigned to what looks like something that we could build if we just would have dedicated our time to it is always pretty shocking.
    

* * *

Here are the highlights that caught my eye this past week:

🚀 Model & Platform Updates
---------------------------

_This week saw some impressive new releases and updates in the model space, particularly around generative capabilities for voice, alongside ongoing platform refinements._

*   **Gemini 2.5 Pro Upgrade: Now with Better Coding and Function Calling.**
    
    Google announced a significant upgrade to Gemini 2.5 Pro. It boasts improved performance in coding (especially frontend web dev, editing, and transformation) and more reliable function calling. The new model (\`gemini-2.5-pro-preview-05-06\`) automatically replaces the previous version with the same pricing and rate limits. [Details](https://developers.googleblog.com/en/gemini-2-5-pro-io-improved-coding-performance)
    
    This is the update I've been waiting for! Reliable tool/function calling is a massive unlock for agentic workflows. Eager to put this through its paces in Cursor.
    
*   **Minimax's High Ranking Text to Speech Models on Replicate.**
    
    Minimax's speech-02 models (speech-02-hd and speech-02-turbo) and voice cloning capabilities are now available on Replicate. They are touted as top ranking TTS models. [Replicate Blog](https://replicate.com/blog/minimax-text-to-speech)
    
*   **Gemini 2.0 Flash Photo Editing.**
    
    Google's Gemini 2.0 Flash is showcased for its ability to edit photos using natural language, without needing traditional tools like layers or brushes. (Mentioned by Rishabh, [Source](https://x.com/Rixhabh__/status/1919641187696418896))
    
*   **Grok 3.5 Beta Coming Soon.**
    
    Elon Musk announced that Grok 3.5 will have an early beta release next week for SuperGrok subscribers. He claims it can accurately answer technical questions by reasoning from first principles. ([Source](https://x.com/elonmusk/status/1917099777327829386))
    

🛠️ Developer Tooling, Frameworks & Ecosystem
---------------------------------------------

_The developer ecosystem continues to expand with new open source tools for data extraction, updates to agent frameworks, and interesting discussions on platform choices and best practices._

*   **ContextGem for Structured Data Extraction.**
    
    A new open source LLM framework, ContextGem, aims to simplify extracting structured data and insights from documents with minimal Python code. ([GitHub ContextGem](https://github.com/shcherbak-ai/contextgem) via Sumanth)
    
*   **Cloudflare Agents SDK Update: Upcoming Auth and State Handling.**
    
    An upcoming PR for the Cloudflare Agents SDK will enhance Agent classes to handle OAuth, redirect URLs, and reconnections out of the box. This makes every Agent an MCP client with state management. (Mentioned by Sunil Pai, [PR Link](https://github.com/cloudflare/agents/pull/254))
    
    Authorization has been one of the biggest challenges for MCPs, specifically because the MCP sits behind the AI agent. Most things are just configured in a simple JSON file defining your MCP servers. Triggering OAuth workflows inside UIs, which are essentially streaming text and working on other tasks, has been weird. Any sort of standardization and convenience they can add to authentication is very welcome, in my personal opinion.
    
*   **Persistent File Storage for Cloudflare Durable Objects Demo.**
    
    A demonstration of a real filesystem and terminal for Cloudflare Durable Objects using a Rust based chunked SQLite FUSE strategy ported to \`ctx.storage.sql\` and an xterm.js frontend. ([Demo](https://dofs.verifried.workers.dev/), [Tweet](https://x.com/benallfree/status/1919224851409379786))
    
    I love that as more new developers come on board, we can give them paradigms they're familiar with, like file systems and basic terminals to manipulate files. I think one of the biggest holdups for developers with things like images on their websites is they're just so unfamiliar with the various concepts around routing and where things are hosted. Any effort that brings existing paradigms that beginners understand to complex subjects is welcome, in my opinion.
    
*   **Stripe MCP Monetization.**
    
    Stripe now allows MCP developers to monetize their MCPs with subscriptions or usage based billing. It's compatible with various clients including Cloudflare's Agents SDK. ([Stripe MCP Payments](http://stri.pe/go/mcp-payments) via Jeff Weinstein)
    
    Stripe is obviously the biggest player in allowing people to spend money on things, so it's no surprise they're introducing ways to make money with MCPs. I'm definitely curious to see what sort of services will pop into existence now that you could request them from AIs. I'm in no hurry to pay for any MCP service myself, and I don't have any to recommend yet, but I'll definitely keep my eyes out for what may manifest from this.
    
*   **Cloudflare Workers Monorepo Template.**
    
    Jacob Hands shared a template for creating Workers monorepos. It's inspired by the \`mcp-server-cloudflare\` repo which deploys multiple Workers from one repo with shared packages. ([GitHub Template](http://github.com/jahands/workers-monorepo-template) via Jacob Hands)
    
*   **A Story of Migrating from Vercel to Cloudflare.**
    
    A developer shared their experience migrating their entire infrastructure to Cloudflare. They cited reasons related to control, security, performance, and pricing. ([Source](https://x.com/Osintly/status/1917964184198823951))
    
    I've seen a lot of people try to do this, especially with the perception that Next.js kind of locks you into Vercel. So I just think it's valuable for people to realize that options are out there and that a lot of your projects are more portable than you think they are.
    
*   **New MCP Authorization Spec.**
    
    A new MCP authorization spec has been introduced. It defines the MCP server as an OAuth "resource server" and outlines the authentication flow. Den Delimarsky provided a blog post with more details. ([Den Delimarsky's Blog](https://den.dev/blog/new-mcp-authorization-spec) via Yenkel)
    
    It'll be interesting to watch any of the MCP specs evolve over time. I know there's been a lot of work done with streaming. Authorization is obviously going to play a huge part. It'll be interesting to see all these pieces of MCPs fitting together and how all their auth will sync up, where the walls are built, and what they can and cannot do to communicate with each other. I can't imagine a system of roles and identifications for the various MCPs and how they allow each other to speak to one another is going to be critical for MCP moving forward.
    

💡 Prompting, Workflows & Best Practices
----------------------------------------

_This week brought fresh perspectives on interacting with LLMs, managing context, and structuring UI generation prompts._

*   **"AI Rivalry" Prompting Technique.**
    
    Greg Isenberg shared a technique of pitting different AI models (ChatGPT, Claude, Grok) against each other. You feed one's output to another with critical feedback to elicit better results. ([Source](https://x.com/gregisenberg/status/1918661279641723158))
    
    There's so much potential left to unlock when multiple models work with and against each other. It's still a little cost prohibitive to use this for a lot of the tools you're probably building by yourself. But I love any sort of back and forth or ping pong or even parallel agents coming to conclusions and fighting over what the best answers will be. I can only imagine what these techniques unlock. Hopefully someone will send me a credit card to run a bunch of experiments.
    
*   **Theo's Take on Major AI Models' Quirks.**
    
    Theo (t3.gg) shared a list of issues and frustrations with various AI models and providers including Gemini, Claude, ChatGPT, and Mistral. He covers setup, cost, and availability. ([Source](https://x.com/theo/status/1918810601968513249))
    
    I really agree with Theo's breakdown here. I've had a very similar experience trying out each of the models. So, definitely worth checking out his list. It's just a well written, very concise list.
    
*   **Tips for LLM Tools Editing Files with Diffs.**
    
    Matt Pocock initiated a discussion seeking examples and best practices for implementing LLM tools that edit files using diffs in TypeScript. ([Source](https://x.com/mattpocockuk/status/1918758488777408528))
    
    I hopped in on this discussion with Matt about my personal experience working with diffs. It's just so challenging to get LLMs to produce precise diff worthy code based on line numbers and white space, and then trying to match that up with the original file. It was a fascinating thread to read about how some people are solving the problem by using a second LLM trained specifically on diffing two files and essentially rewriting the entire file. It's a problem space I spent a lot of time in last year, but I'm just going to leave it up to all of these IDEs and tooling who are so far beyond where I got to now that it's not worth spending time on for myself.
    
*   **Prompting Guide for Lovable.dev for UI Generation.**
    
    Felix Haas shared a step by step guide on how to prompt Lovable.dev for better UI generation. It covers high level descriptions, look and feel, brand guidelines, UI library specification, and component details. ([Source](https://x.com/felixhhaas/status/1918316680108736775))
    
    I have some non developer friends using Lovable, and they seem to be really enjoying this, so I'm sending this over to them. This newsletter is more focused on a bit more experienced developers and what they would expect to read about, but this is definitely something I'm going to shoot over to a few people I know.
    
*   **Survey of AI Agent Protocols.**
    
    Elvis (omarsar0) highlighted key takeaways from a survey paper on AI Agent Protocols. He discussed the agent internet ecosystem, timelines, protocol overviews (MCP, A2A), evaluation considerations, and use case analyses. ([Source](https://x.com/omarsar0/status/1918723145923453022))
    
    I know that MCP gets so much attention, and it's interesting how it's taken over so quickly, but there are many other concepts to pay attention to, such as the A2A protocol. So it's definitely worth reading through how some of these things, when and why you would use different protocols.
    
*   **Vercel AI SDK \`useAssistant\` Hook.**
    
    Sam Denty pointed to the \`useAssistant\` hook in the Vercel AI SDK for building AI assistants. ([AI SDK Docs](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-assistant))
    
    The \`useAssistant\` hook was something I wasn't aware of, and Sam shared it with me. For an awesome hook for building out web based AI tools, I didn't know it existed, and I thought I'd pass it along because it covers a lot of scenarios that I would be building for web cases.
    

👨‍💻 X Posts from the Cursor Team
----------------------------------

_Folks from the Cursor team continue to share valuable insights and tips for getting the most out of the AI-first IDE._

*   **Effective Context Management in Cursor.**
    
    Eric Zakariasson (from the Cursor team) provided tips on managing context in Cursor. He emphasized the combination of intent and existing codebase state, using surgical @ mentions, rules for patterns, and MCP for external systems. ([Cursor Docs](https://docs.cursor.com/guides/working-with-context) via Eric Zakariasson)
    
*   **New Cursor Guide for Web Development.**
    
    Eric Zakariasson (from the Cursor team) also published a new guide for web development workflows in Cursor. ([Cursor Docs](https://docs.cursor.com/guides/tutorials/web-development))
    
*   **Cursor Rules for Better Results.**
    
    Ian (shaoruu) (from the Cursor team) shared examples of Cursor rules they use. These include specifying libraries, listing UI components, defining commands, and using "Auto Attach" for specific file contexts. ([Cursor Docs](https://docs.cursor.com/context/rules) via Ian)
    

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

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

**When:** Thursday, May 8, 2025, 9:00 AM to 2:00 PM (PDT)

**Where:** Zoom (Live Q&A included)

**Investment:** $249

[Read More](https://egghead.io/workshop/cursor) | [Register Now](https://buy.stripe.com/3csdSh2GTdhucTedQW)

_(Team training also available)_

That’s the scoop for this issue! As a final note, I'm excited for Google I/O in a couple of weeks. Since they're already releasing a huge update to my favorite model, and there are rumors around other models that are even better, I just can't wait to see what they have in store for us.  
  
If you have any feedback or questions, hit reply! Always happy to chat about the latest in AI dev tools.  
  
John Lindquist  
[egghead.io](https://egghead.io/)

AI Dev Essentials #5: 🤯 Cursor Valued at $9B, Gemini 2.5 Pro & More AI Updates

GPT-4.1 and Gemini 2.5 Pro are changing how devs build tools in Cursor. Plus: massive funding for Cursor, OpenAI acquires Windsurf, and new agentic dev tools.


Hey everyone 👋,  
  
John Lindquist here with the **fourth issue of AI Dev Essentials!** After months of teaching Cursor workshops, I've really enjoyed iterating on the AI assisted feedback loops: using AIs for spec work, diagramming, task management, and integrating them every step of the development process. I've even built a local MCP server that can monitor dev servers and test runners, checking on their progress to remove my biggest friction points when letting AI agents work autonomously. Expect an egghead.io lesson on it any day now. 🔧✨

🎓 New egghead.io Lesson
------------------------

[AI Driven Design Workflow: Playwright MCP, Screenshots, Visual Diffs & Cursor Rules](https://egghead.io/ai-driven-design-workflow-playwright-mcp-screenshots-visual-diffs-and-cursor-rules~aulxx)(egghead.io)

Walk through an automated loop where Cursor uses Playwright screenshots + Pixelmatch visual diffs to iteratively nudge your UI toward a target design.

🤖 Model Mania & Platform Shifts
--------------------------------

_The model landscape continues to shift rapidly, with major players releasing new contenders and tweaking existing ones based on user feedback and performance goals._

*   **OpenAI Rolls Back “Sycophantic” GPT 4o Update**
    
    OpenAI reverted last week’s GPT 4o tweak after users complained the model became an over eager yes man. The post explains how they detect and curb flattery bias. [Details](https://openai.com/index/sycophancy-in-gpt-4o/)(openai.com)
    
    It's fascinating when AI models get pushed so far by providers that public backlash forces a rollback to a previous state. This serves as a strong reminder that AI is software; it can be reverted, and users grow to expect predictability not just in information, but also in behavior and tone.
    
*   **Alibaba Unveils Open Weight _Qwen3_ Family**
    
    Eight new dense/MoE models (0.6B 235B) land with strong coding & math scores. The 235B flagship rivals closed source giants while staying fully open weight. [Benchmark blog](https://qwenlm.github.io/blog/qwen3/)(qwenlm.github.io)
    
    It's great to see more open source models being released. Personally, I tend to prefer the smartest models available for planning and coding tasks, and often lack the home hardware to run larger open models effectively. Still, these releases fuel hope for powerful on device models eventually rivaling giants like Gemini 2.5 Pro and O3.
    
*   **Gemini API Adds “Reasoning Effort” Knob**
    
    Google’s OpenAI compat endpoint now lets you pick _low → high_ reasoning, making it trivial to swap between Flash speed and deep thought. [Docs](https://ai.google.dev/gemini-api/docs/openai)(ai.google.dev)
    
    The distinction between questions needing quick answers versus deep thought is interesting. It's notable how AI models sometimes seem to first assess if a question requires deep thought before actually processing it, much like humans do. We instantly recall basic trivia but need to search our experiences for more complex answers.
    
*   **Rumor Mill: o3 pro Imminent?**
    
    Sam Altman mentioned an "o3 pro" tier a couple of weeks ago, fueling anticipation that a paid model between o3 and GPT 4o could drop any day now. Keep an eye on the pricing page. [Tweet](https://x.com/koltregaskes/status/1917143793649828320)(x.com)
    
*   **DeepSeek R2 Leak Hints at 1.2T Param Bargain LLM**
    
    Slides suggest a Huawei trained hybrid MoE vision model that’s 97% cheaper per token than GPT 4o, if the specs hold water, brace for price wars. [Leak thread](https://x.com/OpulentByte/status/1916195106580828344)(x.com)
    
    This lands squarely in the rumor mill and hasn't been confirmed. However, DeepSeek R1 was super impressive. If R2 lives up to these leaked specs, it has the potential to significantly disrupt the larger model landscape.
    

🛠️ Dev Tooling, Education & Ecosystem
--------------------------------------

_Beyond the models themselves, the surrounding ecosystem of tools, educational resources, and key personnel moves continues to evolve at pace._

*   **React Creator Jordan Walke Joins Replit**
    
    Walke says Replit’s AI first IDE feels like the early Facebook days and could onboard “the next billion programmers.” [Announcement](https://x.com/jordwalke/status/1915103101205594211)(x.com)
    
    I personally don't use full app generators like Replit, Lovable, or Bolt much, but I always keep a close eye on their announcements to see how far they push the tech. As an experienced developer, I haven't had much luck getting them to build apps where I don't know the final shape, but I can only imagine the feeling for a non programmer launching something from these tools. Definitely curious what the team will build next.
    
*   **Microsoft Drops “Generative AI for Beginners” Series**
    
    Free 18 episode curriculum covers LLM basics, responsible AI, and prompt craft, perfect onboarding material. [Watch](https://learn.microsoft.com/en-us/shows/generative-ai-for-beginners/)(learn.microsoft.com)
    
*   **OpenAI Launches Free “Academy” Courses**
    
    A new hub of AI courses, from intro to deep learning, built with universities like Georgia Tech, all 100% free. [Explore](http://academy.openai.com/)(academy.openai.com)
    
*   **GitHub Lists for Repo Curation**
    
    Use Lists to group related repos into smaller, AI friendly contexts, handy for prompting or onboarding. [Demo](https://x.com/janwilmake/status/1915338073061167487)(x.com) | [Example](https://github.com/janwilmake/forgithub.lists)(github.com)
    
    I didn't even know GitHub Lists was a feature! I'm definitely exploring ways to use AI to bring multiple repos together, since so many products are composed of different repositories. This looks like something fun to play with.
    
*   **Music AI Sandbox Upgrades (Lyria 2)**
    
    DeepMind’s tool now lets musicians generate, extend, and edit tracks with higher fidelity audio, all in browser. [Announcement](https://x.com/GoogleDeepMind/status/1915421048171856047)(x.com)
    
    Google getting into generative music tools for musicians is a welcome surprise. Their Veo 2 video generation is top tier, so you can only imagine the potential if they combine their music and video generation for ads and other media formats.
    
*   **Cloudflare Workers + Vercel AI SDK Starter**
    
    Kristian Freeman shared a template showing Gemini web search via the Vercel AI SDK in a Cloudflare Worker. [GitHub Repo](https://github.com/kristianfreeman/workers-vercel-ai-starter)(github.com)
    
    Adding web search to AI tooling significantly improves answers for many questions, especially in the fast moving dev space. I use deep research queries constantly in Gemini and OpenAI, so building easily launchable custom tools with web search enabled is something I'll definitely explore more soon.
    

🔌 Advancements in Agents & Protocols (MCP/A2A)
-----------------------------------------------

_The push towards more capable AI agents continues, with significant developments in the protocols and tools designed to help them interact with the world and each other._

*   **MCP Demo Day (Tomorrow!)**
    
    Cloudflare hosts demos from Atlassian, Intercom, Linear, PayPal, Sentry, Stripe, Webflow & more this Thursday (May 1st). [Details](https://demo-day.mcp.cloudflare.com/)(demo-day.mcp.cloudflare.com)
    
*   **Cloudflare Agents SDK Update**
    
    v0.0.66 includes a default MCP client, letting agents (and even MCP servers) call other MCP servers. [Details](https://x.com/threepointone/status/1915735083278880950)(x.com)
    
*   **\`mcp-memory\` Tool Released**
    
    An open source MCP server memory layer built on Cloudflare tech to share context between AI clients. [GitHub Repo](https://github.com/Puliczek/mcp-memory)(github.com)
    
*   **Zapier MCP Session (May 7th)**
    
    Learn best practices for leveraging Zapier's 7,000+ integrations via its MCP server in this free session. [Register](https://bit.ly/3XRrqfp)(bit.ly)
    
*   **Google: A2A + MCP Needed**
    
    Google reiterates that complex agentic apps likely need both A2A (agent to agent chat) and MCP (tool/data access). [Blog Post](https://goo.gle/4jSta0l)(goo.gle)
    
*   **Goose Agent Primer**
    
    A quick explainer on Block's Goose AI agent and how it uses MCP for task automation. [Project Site](https://block.github.io/goose)(block.github.io)
    
*   **Motia AI Agent Framework**
    
    Check out this open source framework with examples for deep research using OpenAI & Firecrawl. [Tweet](https://x.com/donvito/status/1915451174670749869)(x.com)
    

🚀 Level Up Your AI Dev Skills: Join My Cursor Workshop!
--------------------------------------------------------

Ready to master practical AI development workflows in Cursor? Join me, John Lindquist, for this hands on workshop! I've been teaching these sessions for months, refining the content, and I'm excited to share my latest insights on Agents, Ask mode, Custom Modes, multi file analysis, effective prompting, Cursor rules, and handling AI failures. Let's conquer the complexity together!

**When:** Thursday, May 8, 2025, 9:00 AM - 2:00 PM (PDT)

**Where:** Zoom (Live Q&A included)

**Investment:** $249

Act Fast! Get the Early Bird price of $200 if you register by midnight tonight (Wednesday, April 30th)!

[Read More](https://egghead.io/workshop/cursor)(egghead.io) | [Register Now ($200 Early Bird)](https://buy.stripe.com/3csdSh2GTdhucTedQW?prefilled_promo_code=SLV2PKOR)(buy.stripe.com)

_(Team training also available)_

⚡ Quick Links / Community Buzz
------------------------------

*   **Cursor Tips for Large Codebases:** Enable project structure, @ mention files, break down tasks, start new chats often, use Ask mode for planning. [Thread](https://x.com/ericzakariasson/status/1915072216523497628)(x.com)
    
    These tips come directly from the Cursor team themselves. Definitely worth reading through the thread if you work with large projects.
    
*   **Building Internal Tools w/ Cursor:** How Eric Zakariasson uses Cursor + Rules + MCP to build tools at Cursor. [Thread](https://x.com/ericzakariasson/status/1914696699274252405)(x.com)
    
    Another great thread from a Cursor employee detailing how they set up their internal configurations. Check this one out too!
    
*   **Gemma 3 OCR Demo:** A local OCR app powered by Google's Gemma 3. [GitHub Repo](https://github.com/patchy631/ai-engineering-hub/tree/main/gemma3-ocr)(github.com)
    
    I love seeing local models being used! Google is building AI directly into Chrome, and it's fascinating to watch how far they can push this. I often use OCR on screenshots for context in queries; the future of productivity might involve AIs constantly reading our screens. Faster OCR is better for all of us!
    
*   **Color Matcher Model:** Fix white balance or match colors for image model outputs. [Replicate](https://replicate.com/fofr/color-matcher)(replicate.com)
*   **o3 "Write in My Style" Prompt:** A two prompt technique for better voice cloning. [ShumerPrompt](https://shumerprompt.com/prompts/o3-write-in-my-style-prompt-017ae28e-c135-4f48-8bc5-8b78785a51d7)(shumerprompt.com)
*   **Open Source Prompt Library:** Conversational prompt templates for "vibe coding." [GitHub Repo](https://github.com/TechNomadCode/Open-Source-Prompt-Library/)(github.com)
*   **Kaggle 5 Day GenAI Course:** A quick intro to GenAI concepts. [Kaggle Learn](https://www.kaggle.com/learn-guide/5-day-genai)(kaggle.com)
*   **Underrated AI Coding Tools?:** Peter Yang asks the community for hidden gems. [Join the discussion](https://x.com/petergyang/status/1915934134507344095)(x.com)
*   **Value at the Application Layer:** Logan Kilpatrick on why now is a great time for builders (falling costs, rising intelligence & willingness to pay). [Clip](https://x.com/tbpn/status/1915110608149889385)(x.com)

That’s the scoop for this issue! The pace continues with new models, platform refinements, and a growing ecosystem of tools and educational resources aimed squarely at developers building with AI.  
  
If you have any feedback or questions, hit reply! Always happy to chat about the latest in AI dev tools.  
  
John Lindquist  
[egghead.io](https://egghead.io/)(egghead.io)

AI Dev Essentials #4: GPT-4o Rollback, Qwen3 Models, New AI Workflow Lesson & MCP Updates

Playwright-powered visual diffs, smarter agents, and new model controls define this week. Plus: OpenAI rollbacks, Gemini upgrades, and major MCP ecosystem moves

Search

Search Results