Learn Mocha, Nightmare and Recoil

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

Recoil offers several hooks to use for consuming state in React, and this lesson looks at how to choose which hook to use, and what happens when you don't use the right hook (hint: **extra renders**).

The three basic RecoilJS hooks are:

1. `useRecoilState`, which is great for reading and writing state,
2. `useRecoilValue`, ideal for reading state, and
3. `useSetRecoilState`, the primary candidate when you just need to write state.

Choose the Right Hook for Your Recoil State

When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data. 

One way to solve this issue is by setting a fallback value using React `Suspense`. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.

In this lesson we're going to have our selectors return Recoil's `Loadable` object, which always contains the current selector value (`contents`) and what state the selector is in (`state`). By consuming this with the `useRecoilValueLoadable` hook rather than the regular `useRecoilValue` hook, we can manually define whatever we want React to render in each of the 3 states: `hasError`, `hasValue`, and `loading`.

Handle Recoil Asynchronous Selectors using Loadables in React

Selectors are great for automatically triggering API calls with Recoil because they are automatically run as soon as any dependencies are updated, and because selectors are shared across your application.

Be aware that Recoil will cache your selector values, so asynchronous selectors are best utilized when the data is not meant to change throughout the life-cycle of an application. Fetching a user's avatar would be a good use case.

When writing asynchronous selectors, one thing to keep in mind is that React must always know what to render - even while your data is being fetched. One solution for this is to use Suspense, a React component that allows you to supply a fallback value to render until your data returns. In this lesson, we'll look at how to call APIs inside selectors and handle situations where selectors return promises.

Use Recoil Selectors to Make API Calls in React

In this lesson, we're going to learn how to create Recoil selectors that accept arguments. These are made possible using the `selectorFamily` utility function.

We'll start with an existing application that uses a regular `selector` to display a sorted array of Todo items, and then we'll refactor it so that we're able to supply the sort type (`ascending` or `descending`) in the React component itself.

For more information on `selectorFamily`, have a look at the official RecoilJS docs: https://recoiljs.org/docs/api-reference/utils/selectorFamily


Use selectorFamily to take arguments in your Recoil selectors

Learn how to set state in Recoil using the `useRecoilState` hook. 

Sound familiar? It should, because it works very similarly to React's built-in `useState` hook (the functional component equivalent of `setState`).

In this lesson, we'll practice removing and adding items from an array that we keep in state using a Recoil atom. We'll create new immutable functions, and then call our setter functions in order to update the state.

Update Recoil State in React using useRecoilState

In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

Display Computed Data Using Recoil Selectors in React

Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

In this collection, we'll create a simple game with React using Recoil, to explore how you can share and update state across an app. 

Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

A state management library for React.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

recoil

Getting Started with Recoil in React

[Recoil](https://recoiljs.org/) is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

* add Recoil to your React project
* create a Recoil atom and use it to store a piece of state
* use `useRecoilState` hook to update an atom
* use `useRecoilValue` to access value stored in an atom in a read-only fashion
* use 🔥`selectors`🔥 in order to calculate derived data based on state stored within atoms (this is *really* powerful!) 

Sync State Across Components with Recoil in React

Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application state (for instance to multiply height and width stored within a state to calculate area of an element).

Luckily Recoil provides us with a powerful tool to automatically re-calculate derived state value whenever an piece of state changes - selectors.

A [selector](https://recoiljs.org/docs/introduction/core-concepts#selectors) is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated.

In this quick lesson we're going to learn how to use a selector in order to automatically calculate a square of a number whenever a value stored within an atom is going to change

Use Selectors to Calculate Derived Data Based on State Stored within a Recoil Atom

Not every component is going to modify a 'global' state stored in a Recoil atom - in some cases a component just needs to be able to read the value.

In this quick lesson we're going to learn how to use a `useRecoilValue` hook to ensure that a component will be able to read a number stored in a Recoil atom in a read-only fashion. 

Use useRecoilValue Hook to Read a Value From a Recoil Atom

[Recoil](https://twitter.com/recoiljs/status/1260965007954591744) is a brand new state management library for React developed by Facebook.

In this quick lesson we're going to learn how to add it to a React app and how to use a Recoil atom in order to share state between two React components using `useRecoilState` hook

 

Use a Recoil Atom to Share State Between Two React Components

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

Nightmare is a high-level browser automation library.

The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It's designed for automating tasks across sites that don't have APIs.

nightmare

Many pages you'll want to grab data from will require you to log in first. This video demonstrates how to log in and grab whatever data off the page you will need.

Scraping Data from Sites with Login Forms with Nightmare

Many websites have more than just simple static content. Dynamic content which is rendered by JavaScript requires browser to be able to scrape data. This video demonstrates how to use Nightmare (which is a wrapper around Electron) to launch a url and scrape dynamic data.

Scraping Dynamic JavaScript Websites with Nightmare

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

Manage React State with Recoil

Establish an automated, AI-driven workflow for implementing UI designs by comparing live development versions against target screenshots. This lesson integrates the Playwright MCP server for browser automation, a custom script using Pixelmatch for visual diffing, and Cursor Rules for persistent context. See how to instruct the Cursor Agent to iteratively implement design changes based on visual diff feedback, creating a robust loop where the AI refines the UI towards the target design.

**Workflow demonstrated in this lesson:**

*   Configure the Playwright MCP server within Cursor for browser control.
*   Use the Agent and Playwright MCP tools (`browser_navigate`, `browser_resize`, `browser_take_screenshot`) to capture baseline and current state PNG screenshots.
*   Install `pixelmatch` and `pngjs` dependencies.
*   Guide the Agent to create and run a TypeScript script (`compare-images.ts`) to generate visual diff images between screenshots.
*   Establish Cursor Rules (`visual-testing.mdc`, `project-setup.mdc`, etc.) to provide the Agent with necessary context about directories, scripts, dependencies, and the overall workflow.
*   Initiate an AI-driven design implementation loop:
    *   Agent captures the current state via Playwright.
    *   Agent runs the comparison script to get a visual diff.
    *   Agent analyzes the diff and implements code changes in the project (e.g., `app/page.tsx`, components, `globals.css`).
    *   Repeat the capture-compare-implement cycle, using the latest diff as feedback.
*   Use context files and prompts like "Please continue" to manage the multi-step process and guide the AI through potential interruptions.

**Key benefits:**

*   Creates an iterative, AI-driven workflow for implementing designs based on visual comparisons.
*   Combines browser automation (Playwright) and pixel-level diffing (Pixelmatch) within the Cursor environment.
*   Utilizes Cursor Rules to effectively manage context and guide the AI through complex, multi-step tasks.
*   Demonstrates how visual diffs can serve as direct feedback for AI-driven UI code generation and refinement.

John Lindquist

AI-Driven Design Workflow: Playwright MCP Screenshots, Visual Diffs, and Cursor Rules

[Scraped MCP Examples](https://gist.github.com/johnlindquist/b19673bbf6a396406dff869beecace1d)
[ghx tool](https://www.npmjs.com/package/@johnlindquist/ghx)

Building complex components like Model Context Protocol (MCP) servers from scratch can be challenging, especially without good reference implementations. This lesson demonstrates a powerful workflow combining the `ghx` CLI tool with AI assistants (like Google's AI Studio and Cursor's agent) to overcome this hurdle.

You'll learn how to:

1.  **Use `ghx`:** Leverage the `ghx` command-line tool (which wraps the GitHub CLI) to search GitHub for real-world code examples based on specific import paths (e.g., `modelcontextprotocol/sdk/server/mcp.js`).
2.  **Refine Search Results:** Use `ghx` options (`--help`, `--limit`, `--max-filename`, `NOT demo`) within Cursor's chat to filter results, exclude simple demos, and gather a rich set of relevant MCP server implementations.
3.  **Provide AI Context:** Copy the aggregated code examples found by `ghx` into an AI environment like Google AI Studio (or ChatGPT).
4.  **Handle Context Limits:** See techniques for trimming large context files (like using Cursor's `Cmd+K` inline edit with `head -n` commands) to fit within model limits while retaining valuable examples.
5.  **Generate Code:** Prompt the AI (Gemini 2.5 Pro in AI Studio or ChatGPT O3) to generate a *new* MCP server (e.g., with five distinct tools) based *solely* on the provided real-world examples.
6.  **Integrate and Debug:** Set up the generated TypeScript code (`mcp_server.ts`) locally in Cursor, install dependencies (`pnpm install`), and use Cursor's agent (`Cmd+I`) or inline fixes (`Cmd+K`) to resolve TypeScript errors and path issues.
7.  **Configure in Cursor:** Add the newly created MCP server (running via `bun mcp_server.ts`) to Cursor's MCP settings, using the absolute path and the `bun` command.
8.  **Test the MCP Server:** Interact with Cursor's chat agent to call the custom tools (e.g., `add_note`, `list_notes`, `write_managed_file`) defined in the AI-generated MCP server, verifying its functionality.

This lesson showcases how combining targeted code searching (`ghx`) with the generative power of AI, fueled by relevant examples, can dramatically accelerate the process of building and bootstrapping complex tools and applications.

Generate and Debug MCP Servers from Scratch

Hey Everyone 👋,

John Lindquist here with the second issue of AI Dev Essentials! It's been another busy week in the AI tooling world. The biggest splash was probably GPT-4.1 hitting the streets, but there's plenty more action around MCP, Vercel's v0, Google's developer tools, and interesting community discussions. I've spent some time with GPT-4.1 already (specifically in Cursor), and while it shows promise, it didn't quite convince me to switch from Gemini 2.5 Pro yet. It stumbled on a few basic requests where Gemini usually shines on the first attempt.

---

### New egghead.io Lesson This Week:

* **[Create a Custom MCP that Calls Cursor Tools](https://egghead.io/create-a-custom-mcp-that-calls-cursor-tools~r77sw):** Learn how to build custom MCP server tools that allow Cursor's AI Agent to access your local project context. This lesson shows how to use Zod schemas and the crucial `.describe()` method to explicitly request information (like Git status or version) from the Cursor environment *before* your tool runs, enabling powerful, context-aware automation.

---

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

## Model Mania: GPT-4.1 Arrives, Plus Grok & Llama Updates

* **GPT-4.1 Lands:** OpenAI announced GPT-4.1, and it quickly became available via the [API](https://openai.com/live/) and showed up in [Cursor](https://x.com/cursor_ai/status/1911835651810738406). Cursor is offering it free for now to let users get a feel for it, though they don't recommend it as a default just yet. Curious to hear initial impressions from folks testing it out for coding tasks.

* **Grok 3 in Cursor:** Following other model additions, [Cursor also enabled Grok 3 models](https://x.com/amanrsanger/status/1910434915419906141), with the mini version available for free users. Aman Sanger noted it seems to "think upfront more than other models."

* **Community Hack: Llama 4.0 via Groq in Cursor:** Levi Dan shared a [detailed (and slightly hacky) guide](https://x.com/lxvi_brg/status/1908865544721154455) on how to wire up Groq's fast Llama 4.0 API into Cursor by using the OpenAI API key slot and intercepting requests. A clever workaround for the adventurous!

## Tooling & Platform Pulse

Lots of movement across different platforms and tools this week:

* **Vercel Ecosystem:**

  * Guillermo Rauch teased [v0 coming to VS Code](https://x.com/rauchg/status/1911524154458984515), hinting at tighter integration for the UI generation tool.

  * v0 also [added AI integrations](https://x.com/v0/status/1911912183149256943) with models from xai (Grok), FAL, Groq, and DeepInfra, including automatic API key setup and pay-as-you-go billing via Vercel Marketplace. They're offering a $10 credit for the Grok free tier.

  * Vercel shared insights on the [grep.app migration from CRA to Next.js](http://grep.app/), showcasing performance improvements. ([Source](https://x.com/rauchg/status/1911920410020757881)) I'm personally excited about this one – I rely heavily on examples when working with AI, and for me, a good example is often worth ten prompts. Tools like `grep.app` that make code discovery easier are invaluable.

* **Google's Growing Stack:**

  * Project IDX has officially become [Firebase Studio](https://x.com/_davideast/status/1909990728593453455), positioning itself as a cloud-based, agentic dev environment for full-stack AI apps, deeply integrated with Firebase. I've tried spinning up a few sites with it, and the speed is impressive. However, for more complex tasks like designing from images or intricate interactions, I still find myself leaning towards v0 for now.

  * Google quietly released the [Agent Development Kit (ADK)](https://x.com/omarsar0/status/1910004370864742757), a Python library (`pip install google-adk`) for building multi-agent systems with features like state management, tool usage, and orchestration. I haven't had a chance to dive into this yet, but it's right at the top of my list. Building robust agent systems is a huge area of interest, so this is probably the announcement I'm most excited about exploring this week.

  * Ramón Medrano Llamas shared his experience [moving back to VS Code from Cursor](https://x.com/rmedranollamas/status/1909516749612999149), highlighting the effectiveness of GitHub Copilot combined with the Gemini Code Assist extension (using Gemini 2.5 Pro in Agent Mode). I gave the Gemini Code Assist extension a try myself, but as someone deeply embedded in the Cursor workflow with established keyboard shortcuts and patterns, I struggled to find a flow I liked and didn't stick with it for long. It's interesting to see different perspectives, though!

  * AI features are rolling out more broadly in [Chrome](https://x.com/iam_chonchol/status/1909942954686636224), including text grabbing from YouTube videos and Google Lens integration.

* **Cloudflare Corner:**

  * Big news for edge compute: [Cloudflare Containers are coming to Open Beta in June](https://x.com/CherryJimbo/status/1910682562499850405), enabling running containerized apps (Next.js, Go, PHP confirmed) directly on the edge. This is huge news, in my opinion. Think about all the WordPress sites and other applications that rely on containerization. Opening this up on the edge unlocks incredible possibilities, including for AI applications. I'm super hyped to see what people build with this come June.

  * A new tool, [MCPify.ai](http://mcpify.ai/), launched for building MCP servers conversationally, built entirely on Cloudflare Workers and Durable Objects. ([Source](https://x.com/pbteja1998/status/1911723180445610149))

  * Securing MCP servers is getting easier, with examples shared using [WorkOS AuthKit](https://x.com/WorkOS/status/1910722639036874943) and [Auth0](https://x.com/dschenkelman/status/1910693265566728319).

* **IDE Updates:**

  * JetBrains shared the public [WebStorm roadmap for March-April](https://youtrack.jetbrains.com/issue/WEB-72310). ([Source](https://x.com/WebStormIDE/status/1909291367504748937))

> **✨ Workshop Spotlight: Conquer the Complexity of Cursor (Europe Friendly Time!) ✨**
>
> Missed the last workshop or found the timing tricky? This one's for you! Master practical AI development workflows in Cursor in a session scheduled for **12:00 PM UTC** to better accommodate European attendees.
>
> This hands-on workshop covers Agents, Ask, Custom Modes, multi-file analysis, effective prompting, Cursor rules, and strategies for handling AI failures. Unlock Cursor's potential and streamline your development process.
>
> * **When:** \[Check website for upcoming dates - This session is Europe-friendly at 12:00 PM UTC\]
>
> * **Where:** Zoom (Live Q&A included)
>
> * **Investment:** $149
>
> ➡️ [**Read More about the Workshop**](https://egghead.io/workshop/cursor)
> ➡️ [**Register Now ($149)**](https://buy.stripe.com/7sI7tT81dfpC06s28c)
>
> *(Team training also available)*

## Community Buzz & Resources

* **MCP Explained:** Kent C. Dodds wrote a piece explaining [why he's excited about Model Context Protocol (MCP)](https://www.epicai.pro/the-game-changing-potential-of-model-context-protocol) and its potential. ([Source](https://x.com/kentcdodds/status/1911840456432034112))

* **Prompting Guide:** Ian Nuttall surfaced [v7 of Google's Prompt Engineering Guide](https://x.com/iannuttall/status/1911086164196606314), a deep dive into techniques and best practices. Definitely worth a look.

* **Discussion Starter:** Eric Zakariasson asked the community about their [favorite CLIs and MCP servers to use with the Cursor agent](https://x.com/ericzakariasson/status/1910808935961088346). What are you all using?

* **Gemini 2.5 Pro Praise:** The positive buzz around Gemini 2.5 Pro continues to grow in the community. It's getting rave reviews and even achieving 'S-tier' status on social platforms like Reddit for its coding capabilities. ([Source](https://x.com/suchenzang/status/1911251230317490416))

That’s a wrap for this week! There's always so much happening, it's hard to keep up, but hopefully, this helps surface some of the more interesting bits for developers working with AI.

If you have any feedback or questions, feel free to respond to this email. Always happy to talk shop about the latest AI tools.

John Lindquist

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

AI Dev Essentials #2: GPT-4.1 Arrives, MCP Deep Dive & Google's Agent Dev Kit

AI Dev Essentials #2: GPT-4.1 & Gemini updates, MCP tools, Vercel v0, Google ADK, Cloudflare Containers news. Latest AI dev tooling highlights.

In this quick walkthrough, you’ll learn how to drop Nx into an existing npm or pnpm workspace and immediately benefit from project graph visualization, caching, and smart task orchestration, all without rewriting your setup.

You’ll start with a standard React monorepo containing a Vite app, a UI package, and utility functions. Then, using a single command (`nx init`), you’ll initialize Nx and see how it auto-detects your existing scripts, builds a dependency graph, and enables advanced features like affected commands and local caching.

We're also going to explore optional enhancements using Nx plugins for Vite and React. You’ll see how they help Nx infer tasks directly from your Vite config files, improve DX with the Nx Console VS Code extension, and leverage Nx plugin generators to scaffold code with a consistent structure.

What you’ll learn
- How to initialize Nx in an existing npm or pnpm monorepo
- How Nx understands your workspace structure and scripts
- How local caching and affected builds speed up development
- How optional Nx plugins improve DX without adding bloat
- How to scaffold new packages

Using Nx on an existing React and NPM workspace based monorepo

Applying Nx to an existing React monorepo to enable caching, task orchestration, and project graph analysis without changing your current setup.

Typing repetitive or complex instructions for Cursor's AI agent can slow down your workflow. This lesson teaches you how to create custom slash commands (e.g., `/s term`, `/l`, `/c`) using Cursor's "Rules" feature. Learn how to map these simple shortcuts to specific AI actions, instructing the agent to use precise tools like `codebase_search`, `edit_file`, or `run_terminal_cmd` based on your command and the current conversation context.

**Workflow demonstrated in this lesson:**

*   List available AI tools (built-in and MCP) to get their exact names.
*   Navigate to Cursor Settings -> Rules.
*   Define custom rules under a heading (e.g., `## Slash Commands`).
*   Create rules mapping a slash command pattern (like `/s <term>`) to a detailed instruction specifying which tool to use and how (e.g., "Use the codebase_search tool to search for <term/>").
*   Define rules that leverage conversation context (e.g., for summarizing notes or creating commit messages).
*   Save the rules (potentially in `.cursor/rules/project.mdc` for team sharing).
*   Invoke the custom slash commands (e.g., `/s handle`, `/l`, `/c`) in the chat/agent window.
*   Observe the AI understanding the shortcut and executing the intended tool call.

**Key benefits:**

*   Creates efficient, reusable shortcuts for common AI interactions.
*   Reduces the need for typing lengthy, detailed prompts repeatedly.
*   Allows mapping simple commands to specific Cursor tool invocations.
*   Enables commands that leverage the ongoing conversation context.
*   Improves workflow speed and consistency when working with the AI agent.

Speed Up Your Agents with Cursor Slash Commands

Hey Everyone 👋,

John Lindquist here. Since I've been diving deep into AI tooling and workflows over the past year, I'm starting this weekly newsletter to share updates on what interests me and could be helpful to the community. The goal is to help everyone stay up-to-date with the latest in essentials tools for AI devs.

I'll focus on relevant community news, model evaluations for coding, notable tools like Cursor and Windsurf, and practical workflows (including tools I build myself 😇). This week kicks off Cloudflare Developer Week with major announcements around agent/MCP services that many of us will likely use soon (I'll dig in and share my thoughts next issue). There are also lots of hints about new coding models possibly coming to Cursor (though my preference remains Gemini 2.5). Personally, I'm hoping for a Gemini Flash 2.5 variant. So let's hop into the latest! For my detailed, up-to-date workflows, check out the workshop info below.

Recent egghead.io lessons about AI tooling:

* **[Swarm Intelligence: Massively Parallelize Your AI Agents in Cursor](https://egghead.io/swarm-intelligence-massively-parallelize-your-ai-agents-in-cursor~g7u2g):** A workflow using `file-forge`, AI scripting, and a custom `git worktree` tool (`wt`) to launch parallel Cursor agents on different branches.
* **[Build a Better Edit Tool in Cursor with Custom Agent Modes](https://egghead.io/build-a-better-edit-tool-in-cursor-with-custom-agent-modes~21rr0):** Create a focused 'edit mode' in Cursor for precise AI refactors without conversational overhead, overcoming Command-K limitations.
* **[Visually Clone Websites with Gemini 2.5 Canvas for Cursor](https://egghead.io/visually-clone-websites-with-gemini-2-5-canvas-for-cursor~s5ugk):** Use Gemini 2.5 Pro's Canvas feature within Cursor to analyze and replicate website structures.

---

## Cloudflare Developer Week: Agent & Platform Updates

Cloudflare announced several updates relevant to AI application development:

* **Durable Objects Free Tier:** Lowers the barrier for experimenting with stateful serverless and the Agents SDK. ([Rita Kozlov](https://x.com/ritakozlov_/status/1909231625855983939))
* **MCP Enhancements:** BYO Auth (incl. [Auth0](https://x.com/auth0/status/1909307220816228354)) and Hibernation for MCP servers aim to improve agent security and efficiency. Exercise caution with MCP, but these are steps toward production viability.
* **Workflows GA & autoRAG:** Orchestration tool is now GA; a new autoRAG product indicates more integrated AI solutions.
* **Outerbase Acquisition:** Expect Durable Objects usability improvements following this acquisition. ([Rita Kozlov](https://x.com/ritakozlov_/status/1909232149246492887))
* **OpenNext Adapter Beta:** v1.0-beta for deploying Next.js apps on Cloudflare Pages adds caching, PPR, middleware support. ([CloudflareDev](https://x.com/CloudflareDev/status/1909598450871652398))

**Summary:** Cloudflare is actively enhancing its platform for AI/agent development, particularly reducing friction with Durable Objects and MCP.

## Llama 4 & Nemotron-Ultra Released

Meta's Llama 4 models began rolling out, with initial reports of variable quality across implementations. Meta attributes this to implementation stabilization, denying training on test sets ([Ahmad Al-Dahle](https://x.com/Ahmad_Al_Dahle/status/1909302532306092107)). Nvidia subsequently released **Llama-Nemotron-Ultra** (253B parameters), derived from Llama-405B via pruning and reasoning-focused post-training. Open weights and data are available ([Oleksii Kuchaiev](https://x.com/kuchaev/status/1909444566379573646)).

**Summary:** More powerful open models are available. Llama 4's initial rollout highlights the importance of stable implementations. Nemotron-Ultra adds a high-end specialized option.

---

## Quasar Alpha: Stealth Model on OpenRouter

OpenRouter provides early access to "Quasar Alpha," a model with limited public details but notable claims: 1M token context, benchmarks reportedly surpassing Claude 3.7 Sonnet, and >4x faster speeds. Reports suggest strong coding performance comparable to O3 Mini/DeepSeek R1 but significantly faster ([Matthew Berman's Thread](https://x.com/TheMattBerman/status/1908286423976886371)). The originating lab remains anonymous; speculation includes GPT-5, Claude 4, or Gemini 3.

**Summary:** The combination of large context, speed, and reported coding strength warrants attention for agentic workflows and large codebase analysis, despite benchmark caveats. Worth testing via OpenRouter if accessible.

---

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

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

* **When:** **This Thursday!** April 10, 2025, 9:00 AM - 2:00 PM (PDT)
* **Where:** Zoom (Live Q&A included)
* **Investment:** $149

Unlock Cursor's potential and streamline your development process.

➡️ [**Read More about the Workshop**](https://egghead.io/workshop/cursor)
➡️ [**Register Now ($149)**](https://buy.stripe.com/dR67tT4P17Xa8CYfZ1)

*(Team training also available)*

---

## Quick Links

* **Nightwhisper Buzz:** Highly-rated coding model "Nightwhisper" (rumored Gemini 2.5 variant?) left LMSys Arena; release may be imminent. ([ʟᴇɢɪᴛ Tweet](https://x.com/legit_api/status/1908264443827351913), [AiBattle Tweet](https://x.com/AiBattle_/status/1907519430961025476))
* **AI SDK Speech-to-Text:** Vercel AI SDK added a `transcribe` function. ([AI SDK Tweet](https://x.com/aisdk/status/1909603418639155460))
* **Gemini 2.5 Pro Updates:** Supports YouTube URLs as input in AI Studio (transcribe, summarize, analyze); reported improvements reducing stop issues/displaying thinking tokens. ([Jean Gatt Tweet](https://x.com/jean__gatt/status/1909256747518226829), [Eric Zakariasson Tweet](https://x.com/ericzakariasson/status/1908619515023548880))
* **Baby Cursor Project:** Cursor's Ryo Lu is building a rapid prototyping environment for IDE ideas. ([Ryo Lu Tweet](https://x.com/ryolu_/status/1908328050154233863))
* **(Rumor) Qwen3 Soon?:** Hints suggest Alibaba's Qwen3 model release is near. ([Elaina Tweet](https://x.com/Elaina43114880/status/1909572798944841859))

---

If you have any feedback or any questions, feel free to respond to this email. Always happy to talk shop about the latest AI tools.

John Lindquist

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

AI Dev Essentials #1: Cloudflare agent updates, Llama 4/Nemotron/Quasar models, Cursor workshop

Cursor's AI Agent has the abilitly to invoke MCP tools, but they lack direct access to your project. This lesson shows how to build custom MCP (Model Context Protocol) server tools that bridge this gap. Learn to define tool parameters using Zod schemas and the crucial `.describe()` method to explicitly request necessary context from the Cursor environment *before* your tool runs. See how the AI gathers this information (like Git status or version via terminal commands, or web search results) and passes it to your tool, enabling powerful, context-aware automation.

**Workflow demonstrated in this lesson:**

*   Scaffold a basic MCP server using a Cloudflare template (`pnpm create cloudflare`).
*   Run the MCP server locally and configure it in Cursor settings.
*   Define MCP tools (e.g., `status`) within the server code (`index.ts`).
*   Specify required context for tools using Zod schema parameters and `.describe()` (e.g., requesting "The status of the git repository").
*   Interact with the Cursor Agent using natural language (e.g., "Please check the status").
*   Observe the Agent's thought process: identifying the need for specific context based on the `.describe()` text.
*   See the Agent automatically using its *own* tools (like `run_terminal_cmd` or `web_search`) to gather the requested context *before* calling your MCP tool.
*   Watch the Agent call your MCP tool, passing the gathered local context (Git status, version, etc.) as arguments.
*   Receive the final response from the Agent, incorporating the information provided by your local MCP tool.

**Key benefits:**

*   Allows Cursor's AI to access and reason about information from your local machine (Git status, versions, file contents, etc.).
*   Enables the creation of AI tools that directly interact with or report on your local development environment.
*   Demonstrates the power of using `.describe()` in Zod schemas to guide the AI in gathering necessary context automatically.
*   Unlocks advanced automation possibilities by combining AI reasoning with local machine access.

Create a Custom MCP that Calls Cursor Tools

Vimium's Vomnibar is a "command palette"-like search tool for your open tabs, browser history, and bookmarks. We can search through and jump to any tab open across browser windows. We can also do a generalized search with results that also include browser history and bookmarks which can either be opened in the current tab or a new tab. If you're anything like me, you open tons of tabs and visit hundreds of webpages over the course of a week. The vomnibar puts all of that at your fingertips.

Josh Branchaud

Open Tabs, Browser History, and Bookmarks with the Vomnibar

Vimium's Vomnibar is a "command palette"-like search tool for your open tabs, browser history, and bookmarks.

Another aspect of Vimium's configurability is customizable key mappings. We can add new mappings and override existing ones. If there is a certain Vimium feature you want to make easier to trigger, adjust the key mapping to suit your needs.

Configure Custom Vimium Key Mappings

Another aspect of Vimium's configurability is customizable key mappings. We can add new mappings and override existing ones.

Many aspects of Vimium can be configured in order to bend the tool to your specific needs and use cases. We look at how to configure what sites turn off Vimium, the default search engine, link hint characters, and other basic settings. We also see how both insert mode and searching a visual selection work. Custom keymappings and custom search engines are covered in subsequent lessons.

Configure Basic Aspects of Vimium

Many aspects of Vimium can be configured in order to bend the tool to your specific needs and use cases.