Learn Jwt, Redwoodjs and Rxjs

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

Do you want to allow users of your app to create an account and sign in with their Google profile? If so, this 10-minute video will show you how to set up within your Auth0 tenant! 

The Google social connection allows users to log in to your application using their Google profile. By simply adding the connection within your Auth0 dashboard, enabling it for your application, and creating a project within your Google developer console, you can be up and running within no time!

How To Add Google Authentication with Auth0

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Now that we have both the user and the token we can encode a JWT. This is made easy by the `jsonwebtoken` library that we will be using. 

To create a function that encodes a jwt, the function will need the user and token. Inside the function, definition create a `jwtPayload` object that just contains the essential data for encoding. Then, pass the payload to the `jsonwebtoken` library `sign` method and return the signed token.

Finally we store the jwt in the user's localStorage.

Encode User Data with JSON Web Token (JWT)

Now that we have our encoded JWT we need to be able to decode it!

The `jsonwebtoken` library makes this very easy. All we have to do is pass the `jwt` and our `token` to a decoder function. In that function definition we pass the arguments into the `verify` method and return the result.

Identify Users with JWT

We are going to use our JWT to make a protected request. 

All we have to do is create a button with a click event that calls our `fetchRepos` function. In the fetchRepos function make a fetch request to the `/repos` endpoint. In the fetch, pass an Authorization header with your JWT as a Bearer token. Then just await the response!

Use JWT to Make a Protected Request

We are going to simulate user verification when making a protected request. To simulate the database we are just going to use a simple array.

We verify the user by grabbing the JWT off of the authorization header in the request. We then look for a user in the database with a matching JWT. If the verification is successful we can give the user the data they requested.

Handle a Protected Request with JWT

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

Add Github Login to Your Web App with OAuth 2.0

Universal Login is Auth0's implementation of the login flow, which is the key feature of an Authorization Server. Each time a user needs to prove their identity, your applications redirect to Universal Login and Auth0 will do what is needed to guarantee the user's identity.

This video will walk you through how to customize and brand the Universal Login experience. This includes setting a custom domain, styling the user emails, and add your company logo to the form. 

Customize the Auth0 Universal Login

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

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

In simple terms, authorization is the process of verifying what users have access to (after authenticating). This video assumes that you already have authentication set up and are ready to add authorization. 

Authentication is the process of verifying if a user is who they say they are. After a user successfully authenticates, access JWTs are issued back to the application. 

In our case of authorization, we are using the JWT (JSON web token) in our NodeJS / ExpressJS API calls, to verify the user has the correct access to the desired resource. 

Authorization in NodeJS with ExpressJS and JWT

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

With Auth0's React SDK, integreting an identity provider has never been easier. With a couple changes to your React app, creating an account within Auth0, we can have a login experience ready to go! This lesson will walk through all the steps nesscary such as adding the SDK through npm, setting up your Auth0 account, adding a login/logout button, and using the Auth0 provided hook to access values. 

Adding Login to React with Auth0

Authentication and authorization doesn't need to be hard. In this lesson, we're going to use the Auth0 React SDK to add authentication to protect a route. Which means that a user has to be logged in in order to access any content on that page. We'll finish the lesson by sending an access token to an Express API in order to retrieve some data. 

Protecting Routes and Calling Secure APIs in React with Auth0

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Svelte can easily import RxJS and use all the Observables available fairly intuitively. Once you create your new Svelte project, simply install RxJS, create Observables as you would normally, then reference the Observable inside of your HTML with the `$` binding to subscribe to it.

This lesson walks you through the process of using an RxJS interval with Svelte by importing RxJS, then creating an interval Observable which we use inside of the template.

Use an RxJS Observable in Svelte

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

One of the things that drove me crazy when I was first learning RxJS in Angular was how difficult it seemed to reload a collection of data after I added or deleted an item. With promises, I could just use `.then()` and be on my way. What do we do with observables? Should we just nest another subscription? Even if we do that, since we're using the async pipe, nothing will happen. There are better ways to handle this that are more reactive. In this lesson, I'm going to show you one way using Subjects. Subjects are kind of like event emitters that can have multiple listeners.

Refetching Data with Subjects in Angular

This playlist will be a smorgasbord of Auth0 authentication and authorization topics. Everything from adding Auth0 to various apps, customizing your Auth0 settings, adding specific rules / audiences / features, and debugging errors. 

Auth0 Tips and Tricks 

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

We will introduce our first requirement: showing a loading spinner immediately when tasks are going on in the background. We will then break this requirement into more and more specific english sentences, which we will later turn into actual observable stream.

Break down a requirement into small problems

The scan() is very useful in RxJS. It allows you to maintain a running state over time. In this lesson, we'll look at some of the state types scan can hold: transient or single source of truth, and how we can achieve each of them by combining it with the `share` operators.

We'll also look at the differences between `share() / shareReplay(1) / shareReplay({bufferSize: 1, refCount: true})` and how to avoid memory leaks when using them.

Maintain shared observable state using the scan and shareReplay operators

Having built all the event streams we need, we can now assemble them and generate the observable equivalent of our main requirement sentence: “When the loader needs to show, show the loader, until it’s time to hide it”.

Build an observable from a simple english requirement

Before we can test what we built, we need to go back to the empty Subjects that we used as placeholders to define when tasks start and end and actually connect them to our app. In addition, we will learn how to keep our external APIs simple, and avoid making our users understand RxJS.

Expose complex reactive code as simple function based APIs

Two very important features of the Observable primitive is that they can be  activated by subscribing to them and disposed off when we are not interested in them anymore. All good observables need to clean up after themselves when they are disposed off. We took advantage of this when we wrote the observable that switches to showing the loader when the count is positive, and stops listening to it when the count is zero. In this lesson, we will learn how to encapsulate all the complex imperative logic for showing and hiding the spinner, inside a simple observable that can be plugged into any stream.

Encapsulate complex imperative logic in a simple observable

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