Learn Graphcms, Jspm and Zag

Learn how to build a pin-input component with state machines, Zag.js and React.

We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

In this course, you will:

- Learn fundamental concept of state machine, event and transition
- Model a UI component with state machine
- Connect state machine logic to UI
- Manage DOM events in state machines
- Create custom React hooks with state machines

A collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js

Statechart Driven UI Components with Zag.js

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 many projects, it is useful to separate the logic that you right with the view that you create so that you can easily share that logic throughout your application. In React we do this with custom React hooks.

We'll improve on the reusability of the pin input component by refactoring it to a custom React hook. To do this we will utilize the prop getter pattern 

This Headless Component pattern is a very useful pattern when building reusable components. It allows you separate functionality from presentation, making it easy to style them as needed.


Refactor Zag.js State Machine Powered Pin Component Functionality to a Custom React Hook

In some cases you'll want to actually have your pin input in a form to handle submitting the values. What's awesome about our implementation is that it doesn't get in the way of adding functionality like this.

First we'll extend our state machine to focus the first input when we click on the input label. Then we'll wrap our Pin Input component in a form element and implement an onSubmit. We can submit values of the form by creating a hidden input and set it's values to the joined values of the other inputs.


Submit Pin Input Values in a Form with a Hidden Input

When the pin input values are full we will want to do something with those values such as sending an HTTP request.

To do this we'll implement a callback in context that will get invoked when all the values are computed. We'll do this by creating a computed property that returns true when all values in context are full. From there we will watch that computed property to invoke our callback.

Trigger Side Effects using Zag.js computed and watch Properties

We have a bug in our pin input. Only 1 value should be allowed per input but if we focus an input that already has a value we can still input another value. 

Let's fix that.

We'll need to implement a function `getNextValue` that will take in the focused value of the current input and the event input that is coming in. After a set of conditionals we will select the value that wasn't the current focused value to update the field.


Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input

The paste event is a unique input event that we need to handle. When we paste a value in from the clipboard, we need to split that value and input single characters to the individual inputs in our Pin Input.

To do this we will need to `preventDefault` in the `onPaste` event so that we can implement our custom logic here. Next we'll implement `setPastedValue` that splits and iterates over the input value we receive and sets it into context. 

Finally we'll implement `focusLastEmptyInput` that looks up the index of the first empty value with `findIndex` and focuses that index.


Spread Values Across a Pin Input Field in a Zag.js State Machine 

We'll be implementing the backspace event which triggers two actions: `clearFocusedValue`, and `focusPreviousInput`. 

These implementations you'll be familiar with at this point but what you'll notice when we actually try to hit backspace that the focus value will get cleared but we won't be setting focus to the previous input. This is because there are several DOM mutations happening at the same time. We'll fix this by scheduling the focus of inputs to the next animation frame with `requestAnimationFrame`


Schedule Input Focus with requestAnimationFrame to Handle Multiple DOM Mutations in Zag.js

Let's actually implement inputting values into our Pin input. We have 3 functions that need implemented. They are `setFocusedValue`, `focusNextInput`, and `executeFocus`. The first two will be pretty straight forward in grabbing values from context and our events and setting new values to our context. 

When we finish implementing `setFocusedValue` and `setFocusedInput` we'll need a way to actually trigger our focus to be set in the DOM. This is where the watch property in a Zag.js State Machine comes into play. We will watch the `focusedIndex` context value and run `executeFocus` any time the focus index changes in our machine (e.g. when `focusNextInput` is triggered after an input event).


Trigger Side Effects in a Zag.js State Machine with the watch Property

Now that we have a machine and our UI is sending it events, we need to actually do something with events that are sent. This is where actions come into play.

We'll implement focus and blur events for the input by setting the context `focusedIndex` to the index that is coming in from the UI. We can mutate context directly in Zag.js because it handles mutations through proxies to stay reactive.


Implement a State Machine Action for Setting Input Focus in Zag.js

Now that we have a machine defined we need to send it events with the relevant data from the UI. To do this we'll need to install the useMachine hook from `@zag-js/react`. From there we'll wire up the actions that we need to send on the input element (e.g. onChange, onFocus, onBlur, and onKeyDown).

Connect Zag.js Machine Logic to React UI through the useMachine Hook

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

We've mapped out what a Pin input state machine should look like so now it's time to start implementing that in code. 

We'll be using Zag.js to model the machine for us. Zag.js works well with TypeScript so the first thing to do is create types for the machine context and state. Then we'll stub out the states, transitions, and actions for the machine. 

While we aren't implementing the actions in this lesson you'll quickly see how a state machine makes complex interactions easier to understand by the events that occur and the actions that are triggered by those events.

Lastly, we'll paste our machine in the stately machine visualizer and you'll see a visual representation of the machine that was created.


Create and Visualize a Pin Input State Machine with TypeScript and Zag.js

We’ll spin up a Vite project for React and install the required Zag.js dependency to model the pin input component logic.

Set up a React + Zag.js Project with Vite

A pin input is a common UI pattern that has more state than you might initially think. We have a handful of use-cases to think through when modeling a state machine that will power a pin input. It should: 

- Automatically focus the next field on typing and focuses the previous field on deletion.
- Support numeric and alphanumeric values.
- Support for copy/paste to autofill all fields.

We’ll break down the interactions and logic of a pin input component, detailing its state and transitions as well as talk through the actions that will be emitted when certain events are fired.


Model the Basic Events, Actions, and Transitions of a Pin Input Component

A state machine is a method of modeling a finite number of states and events. When an event is sent, actions and transitions are triggered within the machine to update it's state.

Here we model a a state machine for a check box. There are `unchecked` and `checked` states with a `click` event that transitions the machine between these two states.


Model Finite Number of State and Events with State Machines

Thanks for taking a look at my course on how to build statechart driven UI components with Zag.js.

Logic in a UI component can get tricky with the states and actions that you are juggling as a user interacts with your interface. This is why I believe statecharts are a game changer in building out logic that is bug-free and maintainable. 

In this course you will learn how to: 
- Breakdown components into a set of finite states
- Capture logic in a state machine that is readable and understandable
- Share logic visually with your team
- Interact with state machines from a UI component

Introduction: Statechart Driven UI Components with Zag.js

In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

snipcart

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

graphcms

Displaying a list of physical locations is helpful, but showing them on a map, giving your potential customers the ability to see how close each store really is to their location is even better.

GraphCMS supports adding coordinates as a field to our data models, where we can dynamically pull those coordinates in and add them to a map.

We'll walk through how we can loop through our store locations and add each one to a new React Leaflet map. We'll also learn about some pitfalls of using React Leaflet in an app framework like Next.js and how we can solve it with dynamic imports and manual image imports.

* [Dynamic Import - nextjs.org](https://nextjs.org/docs/advanced-features/dynamic-import)
* [Leaflet Map Marker Rendering - github.com](https://github.com/Leaflet/Leaflet/issues/4968)

I also have a whole course on how to [Build Maps using React Leaflet](https://egghead.io/courses/build-maps-with-react-leaflet) if you want a further dive on the topic. 

Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

If our store supports physical locations, we want to give our customers the opportunity to easily find out those locations so they can visit us in person. That means, we need to show them somewhere on our site.

We can take advantage of GraphCMS custom Schema Models to create a new document for each store.

We'll walk through setting up a new model for our stores and how we can query them in our app to list out all of our locations.

List Store Locations on a Page Using a Store GraphCMS Schema and Data

We are going to create a schema as we did in lesson 2, but this one is going to be for our Categories at the bottom of the home page. This will be slightly different because we are going to add a Reference field. This way we can create a reference between our categories and our products. 

Then over in the content tab, we will add our existing products to an Apparel category, an Accessory category, and a Featured category. 

Create a Product Category Graphcms Schema to Manage Product Groupings

We want to set up a schema for the most important part of our store, our products. We set up all the fields that we'll need, including the name, the image, and the price.

We also set up the description, which we'll use later when we're setting up individual product pages. Then we will see how we can easily construct and query for our data inside of GraphCMS and append that products query to the end of our existing query.

There, we will pass along that data, just like our existing home page data to our app, where we dynamically render our first four products inside of GraphCMS.

Manage Product Details with a Custom GraphCMS Schema Model

To manage my product data, I'm going to use [graphCMS](https://graphcms.com/) which is a content management system that's going to give us a content API backed by GraphQL. You'll need to login, or register an account, with just the free version for this course. I will also run you through the initial setup for graphCMS. 

Use GraphCMS Schema Models to Manage Page Content

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

Juri Strumpflohner

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.

Vimium's `yy` shortcut makes quick work of grabbing the URL for the current page. I find this useful for linking to an article in my notes or sharing a web page with my team in Slack/Discord. We'll get a glimpse at a couple other features like `gi` (for "go to input") and `o` to open the URL on the clipboard.

Grab and Open URLs with Vimium

Vimium's `yy` shortcut makes quick work of grabbing the URL for the current page.

Search

Search Results