Learn Chrome-devtools, Egghead and Postgres

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

PostgreSQL is a powerful, open source object-relational database system.

postgres

We create a PostgreSQL join table for `likes` in the [Supabase](https://supabase.com) dashboard. This has a many-to-many relationship between the `profiles` and `tweets` table, allowing us to store each instance of a like between a user and a tweet.

Additionally, we create Row Level Security (RLS) polices to enable `select`, `insert` and `delete`.

## Code Snippets

**Create likes table**

```sql
create table public.likes (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  user_id uuid references public.profiles on delete cascade not null,
  tweet_id uuid references public.tweets on delete cascade not null
);
```

**Enable Row Level Security**

```sql
alter table public.likes enable row level security;
```

**Enable insert action with RLS policy**

```sql
create policy "authenticated users can insert their own likes" ON "public"."likes"
as permissive for select
to authenticated
using (user_id = auth.uid());
```

**Enable delete action with RLS policy**

```sql
create policy "authenticated users can delete their own likes" ON "public"."likes"
as permissive for delete
to authenticated
using (user_id = auth.uid());
```

**Enable select action with RLS policy**

```sql
create policy "authenticated users can select likes" ON "public"."likes"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Create a PostgreSQL Join Table in Supabase Studio

[Supabase](https://supabase.com/) has an `auth.users` table that contains information about our user and their session. We want to display the user's name, username and avatar alongside their tweets, but the `auth.users` table cannot be publicly accessible, as it contains sensitive information.

In this lesson, we create a new table called `profiles` and populate it with the data we want to display from the `auth.users` table. Additionally, we set up a PostgreSQL Function and Trigger to create a new profile for any user added to the `auth.users` table.

Lastly, we create an RLS policy for the `profiles` table to enable read access, and re-generate our TypeScript definitions file to contain our new table.

## Code Snippets

**Create profiles table**

```sql
create table public.profiles (
  id uuid not null references auth.users on delete cascade primary key,
  name text not null,
  username text not null,
  avatar_url text not null
);
```

**Enable Row Level Security**

```sql
alter table public.profiles enable row level security;
```

**Enable read access with RLS policy**

```sql
create policy "anyone can select profiles" ON "public"."profiles"
as permissive for select
to public
using (true);
```

**Create PostgreSQL Function to create profile**

```sql
create function public.create_profile_for_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, name, username, avatar_url)
  values (
    new.id,
    new.raw_user_meta_data->'name',
    new.raw_user_meta_data->'user_name',
    new.raw_user_meta_data->'avatar_url'
  );
  return new;
end;
$$;
```

**Create PostgreSQL Trigger to create profile**

```sql
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.create_profile_for_user();
```

## Resources

- [Managing user data docs](https://supabase.com/docs/guides/auth/managing-user-data)
- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)

Automatically Generate a Profile for Every User with PostgreSQL Function Triggers

[Supabase](https://supabase.com/) uses the `auth.users` table to store information about our users and their sessions. In this lesson, we add a column to the `tweets` table to associate each tweet with one of our users.

Additionally, we set up cascading deletes, so when a user is deleted from the `auth.users` table, their tweets are also deleted.

Lastly, because our database schema has changed, our TypeScript definitions are now incorrect. Therefore, we use the Supabase CLI to introspect our PostgreSQL schema and create a new `database.types.ts` file.

## Code Snippets

**Add foreign key relationship to auth.users**

```sql
alter table public.tweets
add user_id uuid references auth.users on delete cascade not null;
```

**Generate TypeScript definitions**

```bash
npx supabase gen types typescript --project-id your-project-id > lib/database.types.ts
```

## Resources

- [Supabase Auth docs](https://supabase.com/docs/guides/auth)
- [Supabase CLI](https://supabase.com/docs/guides/cli)
- [Generating TypeScript definitions](https://supabase.com/docs/guides/api/rest/generating-types)

Setup a Foreign Key relationship between PostgreSQL tables

Next.js is a minimalistic framework for server-rendered React applications.

Since we're using [Supabase](https://supabase.com/) to authenticate our users, it knows who our user is throughout the rest of the Supabase environment.

In this lesson, we modify our Row Level Security (RLS) policy to only apply to the `authenticated` role to ensure that only authenticated users can select tweets.

Additionally, we use the `useRouter` hook and `router.refresh()` to run our Server Component again and fetch fresh data from Supabase, after the user signs in or out.

## Code Snippets

**Enable authenticated read access with RLS policy**

```sql
create policy "anyone can select tweets" ON "public"."tweets"
as permissive for select
to authenticated
using (true);
```

## Resources

- [Row Level Security docs](https://supabase.com/docs/guides/auth/row-level-security)
- [useRouter hook](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter)

Restrict Access to Authenticated Users with Supabase RLS Policies

[Supabase](https://supabase.com/) is a collection of open source tools that wrap around a PostgreSQL database - Hosting, Auth, Realtime, File Storage, Edge Functions etc. In this lesson, we go to [database.new](https://database.new) to create a free Supabase project.

Additionally, we create a `tweets` table and populate it with some seed data.

## Code Snippets

**Create a `tweets` table**

```sql
create table if not exists tweets (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  title text not null
);
```

**Insert tweets**

```sql
insert into tweets(title)
values
  ('first tweet'),
  ('second tweet'),
  ('third tweet');
```

## Resources

- [Supabase docs](https://supabase.com/docs)
- [Supabase SQL Editor](https://app.supabase.com/project/_/sql)

Create a New Supabase Project and Basic PostgreSQL Schema

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

Debug Computed Accessibility Properties with Chrome Dev Tools

In this lesson, we use the element inspector in Chrome to test and improve our contrast to meet WCAG AA Contrast Ratio Standards.

Resources:
- [WebAIM - Contrast and Color Accessibility](https://webaim.org/articles/contrast/)

Debugging Accessible Contrast with Chrome Dev Tools

Hasura allows for the addition of "computed fields" to any table. Computed fields are SQL functions that get added to that tables schema definition. This allows for increased flexibility in querying, and ordering. We will setup a computed field to add a users post count to the user schema, and show how to query and sort by the new computed field.

How to Create a Computed Field in Hasura

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

In this video, you'll learn how to build a full stack app with React, Supabase, and Postgres. We'll start by creating a new Supabase project, initializing a new PostgreSQL "posts" table, and adding rows for the post title and content.

Next, we'll install the Supabase library using NPM or Yarn, and configure a client to connect with the Supabase API. Using the Supabase client, we'll create a basic app that allows users to create and read posts from the Supabase back end.

By the end of this video, you should have a good idea of how to get up and running with building full stack apps using Supabase.

Building a Full Stack App with Supabase and React

We'll store client interaction using Hasura as our primary database. Hasura allows you to build a powerful, secure & flexible GraphQL API that can query data in your databases, HTTP services, serverless functions, as well as third party APIs. 

We'll start by creating a Hasura Cloud account. Proceed to create a Postgres database on Heroku. If you don’t have an account on Heroku, you need to sign up on Heroku. You won’t need a credit card. 

We'll add corgi data to the database using the Unsplash `ID` as our primary key, and `count` as an integer for our count functionality.

Create a Database using Hasura Cloud and a Postgres Instance to Store Data

A keyboard is the gateway to code. Your hands are the tools that manage the keyboard. Many people develop pain in their hands from repetitive stress injuries that can seriously damage their ability to code. This talk is about making your keyboard experience as gentle as possible on your hands so your hands are happier and you work more effeciently.

Save Your Hands and Save Your Time: Rethinking How to Use a Keyboard

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Lighthouse is a tool that analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

It's built directly into the Chrome DevTools and in this quick lesson we're going to learn how to run the audit, how to read its results and why you should always run the Lighthouse audit in Incognito mode.



Run a Lighthouse audit in Chrome Devtools

Sometimes you encounter a backend issue which seems to occur only on your computer, with a very specific sets of headers, cookies etc. Because of that, it's useful to have a way of easily sharing network requests sent by your browser with other members of your team.

In this quick lesson we're going to learn how to copy a network request as `fetch` (so we can test it in the Chrome DevTools console/in a node.js script) or as cURL (so we can test it in a terminal).

Copy a network request as fetch or cURL with Chrome DevTools

Sometimes when debugging our CSS styles it's useful to be able to see what a DOM element is going to look like in a given state (e.g. `:focus`, `:active, `:hover`) etc.

Unfortunately it's not possible to both hover over an element and debug it in Chrome DevTools at the same time (since we only have a single cursor!).

In this quick lesson we're going to learn how to address this problem by explicitly forcing an element state to `:hover` with DevTools

Force a DOM element state in Chrome DevTools

While editing, you can make mistakes that you don't realize right away. One of these is cropping off part of a word that you didn't mean to.

If you don't notice right away, you could be convinced that you needed to undo all of your edits up to that point but that's not the case! When you ripple delete in ScreenFlow, it saves the portion of the clip that you deleted. All you have to do to recover that clip is to select the clip and drag it. Then you can make your desired edits again

Recover a Cropped Section of Video in Screenflow

In this lesson, we explore using Chrome's DevTools to detect unwanted visual instability on a page.

We can do this using the new "Experience" heading under recorded "Performance" metrics.

To truly see the impact of "[Cumulative Layout Shift](https://web.dev/cls/)", we can make use of DevTools' "Network throttling" feature to see any visual instability with the naked eye.



Use Chrome DevTools to Detect Cumulative Layout Shift

Thanks for watching the course! In this video I am going to walk you through some info that is good to be aware of before watching the course. 

Introduction to Advanced SQL for Professional Developers

Check out the new and currently experimental "CSS Overview" feature in Chrome's DevTools.

Use it to get an overview of details such as colors, fonts, media queries, and even unused declarations.

Explore a Site's CSS with Chrome DevTools CSS Overview

Speeding up a clip can be useful for moving quickly past parts of your video that are not critical such as periods of typing or installing dependencies. In this lesson you will learn multiple ways to adjust the speed and duration of a clip.



Adjust play speed in ScreenFlow

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

**Workflow demonstrated in this lesson:**

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

**Key benefits:**

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

Juri Strumpflohner

Give Cursor monorepo awareness with the Nx MCP

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

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

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

---

## 1. Optional Keys vs Optional Values

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

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

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

But they behave differently:

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

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

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

### Example

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

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

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

---

## 2. Pick and Omit for Object Key Manipulation

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

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

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

### Pick

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

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

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

### Omit

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

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

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

---

## 3. Extract and Exclude for Union Filtering

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

### Extract

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

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

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

### Exclude

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

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


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

---

## 4. Loose Autocomplete

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

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

### The trick

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

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

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


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

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

### Use cases

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

---

## 5. Mapped Types for Smart Rewrites

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

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

### Example: feature flags

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

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

### General Utility Type

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

Mapped types are perfect for:

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

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

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

---

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

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

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

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

### The pattern

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

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

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

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

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

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

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

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

You can use this in different situations like:

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

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

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




Matías Hernández

Advanced TypeScript Tricks for Cleaner, Safer Code

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

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.

Search

Search Results