 Courses from Tomasz Ducin

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:
- set up and scaffold new applications,
- use file-based routing
- create nested routes
- manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Tomasz Ducin

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.


In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also **enables permalinks**, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Browse History in Tanstack Router

Browse history in TanStack React Router using the native history API for seamless navigation

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Hook into Route Lifecycle Hooks in Tanstack Router

Hook into TanStack React Router's lifecycle hooks for custom route logic and animations.

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels.

To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a `defaultNotFoundComponent` at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.



In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router.

When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like `employeeId`.

However, when using `useParams` globally without specifying a route, it requires an options object with `{ strict: false }`, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.



Access Dynamic Route Parameters with useParams in Tanstack Router

Access dynamic route parameters with useParams in TanStack React Router for type-safe routing.

In this lesson, we learn how to troubleshoot issues with TanStack Router's automatic generation of the `routeTree.gen.ts` file.

If the file is not being updated or new routes are not being recognized, the most common cause is that the development server is not running. As a rule of thumb, start the dev server - this resolves the issue, allowing the `routeTree.gen.ts` file to be properly generated and updated with new routes. This ensures that all routes are correctly registered and type-safe routing features function as expected.


Troubleshoot Tanstack routeTree.gen Generator

Troubleshoot TanStack Router's routeTree.gen generator by checking the dev server status.

This course provides a practical introduction to MongoDB, a leading NoSQL document database. You will learn how to set up a local MongoDB environment using Docker and then dive into essential database operations. By the end of this course, you will know how to:

- Create and manage MongoDB collections.
- Insert, filter, update, and delete documents.
- Perform complex queries using logical operators and expressions.
- Manipulate data within arrays and nested fields.
- Rename fields and manage date and time properties.
- Execute multiple operations efficiently using bulk operations.

Effectively manage and interact with MongoDB databases. Being proficient with databases is a crucial skill in modern app development.

Get Started with MongoDB

Learn MongoDB setup with Docker, manage collections, documents, queries, data manipulation, and bulk operations. Essential for modern app development.

In this lesson, we learn that replacing a document in a MongoDB collection is done using the `replaceOne` method, which does **not** have a _replaceMany_ equivalent.

We demonstrate how to search for a specific document, such as one with the name "Alice Smith," and replace it with a new document containing updated information like "John Doe."

This operation completely removes all existing fields from the original document and replaces them with those in the new document. After running the operation, we verify that only the new data remains in the collection.


Replace Documents in MongoDB Collections using replaceOne

Replace documents in MongoDB collections using replaceOne to completely overwrite existing documents with new data based on specified queries.

In this lesson, we learn that we can store datetime properties in MongoDB documents using the `$currentDate` operator.

We demonstrate how to create a new date property for a document, such as one for "Bob Johnson," by simply applying the operator.

We also show how to update multiple properties at once and set them as either Date or timestamp types.

By using `$currentDate`, we can easily manage and modify date-related information in our MongoDB documents, ensuring accurate time tracking.

Create or Modify Datetime properties using $currentDate in MongoDB

Create or modify datetime properties in MongoDB using $currentDate to set fields as Date or timestamp types for efficient date management

In this lesson, we learn that renaming fields in MongoDB documents can be accomplished with the `$rename` operator.

We demonstrate how to use the `updateOne` method to target a specific document, such as one with the name "Bob Johnson."

By specifying the old field names and their new counterparts, like changing position to title and skills to competence, we can effectively update our document structure.

Rename fields in MongoDB Documents

Rename fields in MongoDB documents using the $rename operator with updateOne or updateMany for efficient data management

In this lesson, we learn that updating arrays within MongoDB documents involves using the `$push` and `$pull` operators.

The `$push` operator allows us to add new items to an array, while combining it with the `$each` operator enables us to add multiple items simultaneously.

We demonstrate how to add "Java" and ".Net" to the skills array.

Conversely, the `$pull` operator removes elements from an array, and we can use the in operator with `$pull` to remove multiple items, such as "Python" and "SQL," based on specified criteria, providing flexibility in array manipulation.

Update Mongo Documents arrays using $push, $pull and $each operations

Update MongoDB arrays with $push and $pull: add single/multiple elements using $each and remove elements using in with $pull.

In this lesson, we learn that updating documents in MongoDB involves using the `updateOne` and `updateMany` methods along with operators like `$set` and `$unset`.

The `$set` operator allows us to modify existing properties or add new ones, even in nested structures, while the `$unset` operator removes specified properties from a document.

We demonstrate how to use these operators to change a document's salary, modify nested personal information, and remove fields like position.

We also show how to combine `$set` and `$unset` in a single operation for efficient data management.


Update Mongo Documents using updateOne, updateMany, $set and $unset operations

Update MongoDB documents with $set and $unset operators: modify, add, and remove properties, including nested fields, in a single operation.

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures.

We explore how to create additional nested routes by converting files into directories, allowing for further nesting.

For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `index.tsx` file inside it to define the route component for this nested route.

This approach provides flexibility in organizing files while maintaining the convention that file names and locations align with route paths. We also see how to adapt existing components and loaders to work with these reorganized routes, enabling features like edit forms or delete actions (or whatever) within nested routes.


Reorganize File-Based Routes in Tanstack Router

Reorganize file-based routes in TanStack Router for flexible nested routing.



In this lesson, we learn how to parametrize the loader for a nested route in TanStack Router.

We focus on a nested route like `/employees/$employeeId`, where the `$employeeId` is a **dynamic parameter**.

To fetch data for this route, we use a `loader` function that accesses the `$employeeId` parameter. This is achieved by using the params object available in the `loader` function, which contains the dynamic segments of the URL. We then use this parameter to call a function like `getEmployeeById`, which fetches specific employee details from an API.

We highlights that TanStack Router **automatically infers types** for these parameters, ensuring type safety for nested routes.

Parametrize Route Loader for Nested Route in Tanstack Router

Parametrize nested route loaders in TanStack Router using path parameters

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing.

We start by creating a new `employees` directory and files to represent nested routes, such as `/employees/$employeeId`. The `$` symbol is used to denote dynamic parameters.

We then use the `<Link>` component from TanStack Router to create links to these nested routes, passing necessary parameters.

To render the nested content, we use the `<Outlet>` component (nested), which automatically renders child routes. This approach allows us to dynamically display stuff under a nested route.

All the time, the TanStack Router generator automatically updates the route tree based on file changes - our routing configuration remains consistent 🔥



Create Nested Route and Nested Outlets in Tanstack Router

Create nested routes and outlets in TanStack Router using file-based routing

In this lesson, we learn how to configure `staleTime` and `gcTime` in TanStack Router to manage data caching and freshness.

The `staleTime` parameter determines how long data is considered **fresh** before it is refetched in the background, while the `gcTime` parameter controls how long data is kept in the cache before being **removed**.

By default, **data is considered stale immediately**, but we can adjust these times to suit our needs. For example, setting `staleTime` to 10 seconds (10,000 milliseconds) means that if a user navigates back to a route within that time, the cached data will be used and refetched in the background.

Adjusting `gcTime` affects how long data remains cached after a route is unloaded. These settings help balance data freshness with performance by minimizing unnecessary network requests.

Configure staleTime and gcTime in Tanstack Router

Configure staleTime and gcTime in TanStack Router for data caching and freshness

In this lesson, we explore how TanStack Router caches data returned from a route's `loader` function.

This caching mechanism is focused on the data fetched by the `loader` (!), not the component's rendered markup (i.e. unlike React's `memo`).

We learn how to view cached data using TanStack Router DevTools, where we can see details like the `age`, `staleTime`, and garbage collection `gcTime` for each route's loader data.

These settings control how long data remains fresh and when it is refetched or removed from the cache. For example, the stale time determines how long cached data is considered fresh before being refetched in the background, while the GC time controls how long data is kept after a route is unloaded.

Cache Route Loader Data in Tanstack Router

Cache route loader data in TanStack Router using built-in caching features.

In this lesson, we explore how to use **route preloading** in TanStack Router to enhance user experience by loading data before navigating to a route.

[Preloading](https://tanstack.com/router/latest/docs/framework/react/guide/preloading) is triggered when a user hovers over the `<Link>` component, assuming they are likely to click it next.

This feature is enabled by default for routes with loaders and can be disabled by setting the `preload` flag to `false` in the route configuration.

We also discuss how preloading interacts with configuration options like `staleTime` and  `gcTime` (garbage collection time), which affect how often data is refreshed or removed.

By leveraging preloading, applications can reduce the delay when switching between routes, providing a smoother user experience.

Preload Routes in Tanstack Router

Preload routes in TanStack Router using hover-based Link preloading strategy for faster navigation

In this lesson, we learn how to use the loader option in TanStack Router to fetch data for a route.

We start by moving hardcoded data from a component to a loader function, which typically makes an HTTP request to fetch data.

The loader function returns a promise, and we consume this data in the component using the `useLoaderData` hook.

This approach allows TanStack Router to handle asynchronous data fetching seamlessly, ensuring that components render without needing explicit waiting mechanisms.

We also integrate it with a real API by using a `getEmployees` function in the `loader.

Additionally, we see how TanStack Router caches the fetched data for efficient navigation.



Use Loader to Feed a Route with Data in Tanstack Router

Use TanStack Router's loader to fetch data for routes, leveraging async functions and caching.

In this lesson, we learn how to create a new route in TanStack Router by simply adding a new file to the `routes` directory.

For example, creating an `employees.tsx` file automatically generates a new route, which is reflected in the `routeTree.gen.tsx` file.

We explore how to define the root component within this new file and how to link to it from other components using the `<Link>` component.

The lesson highlights the benefits of type safety provided by TypeScript, which helps catch typos and ensures that only valid routes are used. This approach streamlines the process of adding new routes and maintaining a robust routing system.

Create a new Route in Tanstack Router

Create new routes in TanStack Router by adding files to the routes directory for automatic route file generation.

In this lesson, we explore how to use [File-Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) with TanStack Router.

This approach allows the router to automatically generate routes based on the file structure within the `routes` directory.

The router watches these files and updates the TypeScript module definitions accordingly, ensuring type safety for features like redirects and navigation using navigateTo.

We learn how the root route is created using `createRootRoute` and how components are matched against specific routes, such as the home and about pages, which are displayed in the `<Outlet />` component.

The lesson also mentions the use of TanStack Router DevTools to visualize and manage routes in real-time.

Use File-Based Routing in Tanstack Router

Use TanStack Router's file-based routing for automatic route generation and type safety

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)

John Lindquist

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.

Vimium's "marks" feature lets you mark positions in the current tab and across tabs. These are positional markers that you can jump back to. For instance, as you browse a huge page of documentation or a massive forum discussion, you can leave a series of "dog ears" to sections or conversations that you'll later want to revisit. Each tab supports its own set of lower-case letter marks. Upper-case letter marks are shared across tabs allowing you to seamlessly move between a specific set of tabs regardless of how they are arranged.

Set Marks on a Vimium Webpage You Want to Jump Back To

Vimium's "marks" feature lets you mark positions in the current tab and across tabs. These are positional markers that you can jump back to.