Learn Lodash, Ramda and Recompose

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

`_.omitBy` and its sibling `_.pickBy` are popular utilities which apply filter-like functionality to objects. Both of them accept a function to determine if a given entry in the object should be included in the output object. This lesson will demonstrate an approach to build both of these utilities from a single function using the combo of `Object.entries` and `Object.fromEntries`.

`Object.entries` converts an object into an array of key, value pairs. We couple that with the native Array filter method, to create a generate `filter()` method that works on objects. Once we've filtered our object we use `Object.fromEntries` to convert the array back into an object. This works great for both `omitBy` and `pickBy`.

**Note**

`Object.fromEntries` is part of the ES2019 spec and may need [a polyfill](https://github.com/ungap/from-entries) to work depending on your environment.

---

- [MDN Guide: Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
- [MDN Guide: Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)



Build lodash.omitBy and lodash.pickBy with Object.fromEntries

`_.pick` and its sibling `_.omit` are popular utilities which apply filter-like functionality to objects. This lesson will demonstrate two different techniques for building the functionality found in [_.pick](https://lodash.com/docs/4.17.15#pick).

1. Using `for...of` to loop through the `keys` array
2. Using `for..in` to loop through the target object

This lesson will also cover how to emulate `_.pick`'s support for either an array or multiple arguments for the picked keys using [Rest params](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).


Build lodash.pick from Scratch

This lessons builds on [Build lodash.debounce from scratch](https://egghead.io/lessons/javascript-build-lodash-debounce-from-scratch) to add support for one of its more interesting options: `maxWait`. The `maxWait` option ensures that a debounced method is deferred no longer than the time specified. This is helpful if we need to respond to a long running interaction while it's still in progress. 

In this lesson we'll demonstrate how continuously typing into a debounced input field prevents us from logging any input at all. We'll add a `maxWait` option as a third parameter to our `debounce` function and set it up using an additional `setTimeout` call.

Essentially `maxWait` works by adding a second timer which will fire in the case that the normal debounce timer does not get called. We avoid unnecessarily triggering our debounced function by calling `clearTimeout` in both of our `setTimeout` functions to clear out whichever timer didn't just fire. We also need to set the `maxTimer` variable to `null` to tell our function it's safe to start a new maxWait timer each time either timer fires.


**Notes**

- `setTimeout` returns a timer ID not the actual timer object itself, which is why we have to `null` it out *after* we already call `clearTimeout`
- If you don't `null` out `maxTimer` in your original timer, the maxWait timer will stop triggering after the debounce timer is called the first time. I learned that one the hard way when I first recorded this video.


Extending debounce with a maxWait Option

This lesson will demonstrate how to replace common uses of [lodash.get](https://lodash.com/docs/4.17.15#get) with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) syntax.

`_.get` is by far my favorite lodash method. I've been on so many projects where the results of a network call was a large and often unreliable blob of data. After countless attempts to reign in errors caused by trying to access non-existent properties I've come to rely on _.get as a simple & safe way to retrieve data from those objects. However, as is always the case in web development, times are changing and the tools we need to safely access properties of complex objects are now being built into the platform. [Optional chaining syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) gives us the power of _.get without several of the tradeoffs. It doesn't require an extra library to use, it plays nicely with TypeScript and it can be used when calling methods as well as when accessing properties.

This lesson covers 4 common use cases of `lodash.get` and converts them to using optional chaining syntax.

1. Nested Object and Array Access
2. String and Variable Property Access
3. Calling a Method on an Object that may Not Exist
4. Providing a Default Value when a Property does Not Exist 

---

 ### Resources

- [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

Replace lodash.get with Optional Chaining Syntax

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.debounce](https://lodash.com/docs/4.17.15#debounce) method from scratch. **I literally failed a job interview by messing up this question, so watch carefully!**

Debounce is an incredible tool most commonly used to prevent responding too quickly to user input that is in motion. For example, preventing excessive AJAX requests made while a user types into an autocomplete field or quickly responding to window resize events without bringing your browser to a halt.

Our approach is to build the simplest `debounce` method possible using a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) which gets cleared each time the supplied function is called thereby delaying the execution of our function until input stops for a given amount of time.

The [Lodash implementation of debounce](https://lodash.com/docs/4.17.15#debounce) includes support for a number of options including `leading`, `maxWait`, and `trailing` which we have not covered in this video, but may in future lessons.

### Variations

Modern implementations of `setTimeout` include support for additional arguments which get passed into your function so an alternative to the approach used in this lesson would be `setTimeout(fn, wait, ...args)`

### ES5 Compatbility

If you are in an es5 environment skip the rest/spread syntax and use:

```
var args = Array.prototype.slice.call(arguments)
```

And later, in your setTimeout function:

```
fn.apply(null, args)
```

----

There are some really great resources out there to learn more about debounce, here are my two favorites:

- https://css-tricks.com/debouncing-throttling-explained-examples/
- http://benalman.com/projects/jquery-throttle-debounce-plugin/


Build lodash.debounce from Scratch

[Lodash](https://lodash.com/docs/) is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like `_.merge`, `_.get` and `_.debounce` from scratch you will also learn how to replace them completely in some cases with modern syntax such as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) and [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).

This collection should interest the following groups:
- Those who want to better understand common JavaScript patterns
- Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
- Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

Recreating Popular JavaScript Utility Methods from Lodash

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.merge](https://lodash.com/docs/4.17.15#merge) method from scratch.

First we'll create a test file with two objects that we want to merge together and demonstrate the output after running them through lodash.merge , then we'll go about creating our own version of the function.

Our initial version will support only one `source` object to merge in, and will support only the subset of JavaScript syntax supported by the JSON spec, including the following types:
- `boolean`, `number`, `string`
- object literal
- array

After getting basic types to merge we'll show off two methods for merging arrays, either using [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) or recursively going through the children and merging them.

Finally we'll build our own `isObject` function to check for object literals and recursively apply our `mergeJSON` function to any object literals in our `source` object.

And last we'll add support for multiple `source` objects to be merged in using a `for...of` loop.


**Note**

The `mergeJSON` method we create approximates the `lodash.merge` functionality but does not seek to replace it. It may be useful for some use cases, but primarily it's meant to be a tool for understanding how to merge objects with recursion.

Build lodash.merge from Scratch

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.get](https://lodash.com/docs/4.17.15#get) method from scratch.

Our function takes 3 parameters `obj`, `string` and `defaultValue`.

The primary technique we discuss is splitting the `string` on any kind of separator we might see such as `[`, `]`, or `.` and then filtering out any empty strings we get in our array. Once we have that array of path parts, we can loop through each part with a `for..of` loop then keep reaching into object until we either a) run out of parts to try 🎉 or b) hit a dead end (`null` or `undefined`). The entire function is very simple to write, but can be incredibly powerful when you're safely trying to access large and complex blobs of data that might be coming from a database or server response. 

Build lodash.get from Scratch

A library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

ramda

In this lesson we'll see how to use the `without` function to remove items in a known list from an array. Then we'll generate our exclusion list and apply it to `without` using `reduce`, `min`, `max` and `converge` to detect the highest and lowest values in an array and creating a new array that excludes those values.

Discard the High and Low Values From an Array of Numbers with Ramda

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

Functional Programming in JavaScript with Ramda.js

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

Functions created with `mapPropsStream` canned be composed together to build up powerful streams. Bring in the `compose` helper from Recompose then simply list your functions in the order you want the props to push through.

Compose Streams of React Props with Recompose’s compose and RxJS

Loading data using RxJS is simple using `Observable.ajax`. This lesson shows you how to take the ajax response and pass it along the stream to use as props in a React Component.

Stream a React Component from an Ajax Request with RxJS

Mapping the props to multiple children involves the use of React’s `Children.map` so that you can map over each child Component provided to the Parent Component stream. Inside the mapping function, you use the `cloneElement` and pass the props manually as you would with a single child component.

Stream Props to Multiple Children with React's Children.map  and RxJS

Combining input streams then using `scan` to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.

Merge RxJS Button Event Streams to Build a React Counter Component

Rather than using Components to push streams into other Components, `mapPropsStream` allows you to create functions that can wrap components to create shareable behaviors across components.

Create Stream Behaviors to Push Props in React Components with mapPropsStream

If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that stream with any other components. Configuring your props stream with lenses will allow you to reuse your stream with any React component.

Make Reusable React Props Streams with Lenses

You can decouple the parent stream Component from the mapped React Component by using `props.children` instead. This process involves mapping the stream to React’s `cloneElement` with the `children` then passing the `props` in manually.

Stream Props to React Children with RxJS

Events are the beginning of most every stream. Recompose provides a `createEventHandler` function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as props and combining the streams any way you want.

Handle React Events as Streams with RxJS and Recompose

When you declare your Component and Props in JSX, you can pass those props along to your [RxJS](/q/rxjs) stream. This is typically done using `switchMap` or `combineLatest` where you can grab from the props from your `props$` stream and push them into another stream.

Pass a React Prop to a Stream in RxJS

Kent taught us about the concept of "render props" in his lesson from the Advanced React Component Patterns course here: [https://egghead.io/lessons/react-use-render-props-with-react](https://egghead.io/lessons/react-use-render-props-with-react)

This lesson takes the concept of render props and migrates it over to streaming props by keeping the same example and simple refactoring the `Toggle` component which handles the render prop.

Refactor React Render Props to Streaming Props with RxJS and Recompose

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

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