Learn Browserify, Flow and Tachyons

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

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

Type Check React Components With Flow

In this lesson we are going to take a React and Redux application and add flow types throughout. This includes type checking a react component, a reducer, some actions, and a connect method. 

Type Check Redux Apps with Flow

Functional css for humans.

Quickly build and design new UI without writing css.

tachyons

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

Design for Mobile First with Tachyons

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the `flex-column` and `flex-row` classes to respond to mobile and desktop sizes.

Build Responsive CSS Layouts with Tachyons

flow

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Primitive Types in Flow

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

Setup Nuclide to use Flow and Eslint (Mac)

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Up and Running with Facebook Flow for Typed JavaScript

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

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