Learn Ionic, Mdx and Serverless

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



We will combine our knowledge of Dynamic routing to pass a dynamic parameter to a function that will query a single post from our Sanity CMS. When we fetch our blog post data this is a great place to do some processing of the content that we get back. If you didn't process your blog post markdown, it would come back as a string which doesn't look too great on the page.

To make our markdown pretty we will install and use the `MDSvex` library to use it's compile function and render our markdown.
  
We'll see that `MDSvex` gives us a Promise from `compile` because it's an async function so we'll use the Svelte `await` block to conditionally show the post body when it is ready, otherwise we'll show a loading state.

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

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

typescript

Build Full Stack Web Applications with Angular and Firebase

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.

In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.

Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.

While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.


Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

A scenario you will inevitably run into is users needing to reset their passwords for security reasons or they lost and forgot their password.

We'll learn how to send our users an email to reset their passwords, after we send the email, we'll display a notification alert with ionic alertController to the user and redirect them to the login page.


Send a Password Reset Email Using Firebase Authentication with sendPasswordResetEmail

Now it's time to create a template for our authentication page using Ionics page generation CLI.

We'll show how to use the same page for all of our authentication operations by reading the parameters from the URL and displaying the right form elements and buttons depending on the parameters present.


Create an Authentication Page Template with Ionic Page Generation

We'll learn how to delete documents from the database. This action is pretty straight forward, we'll add a delete button that will call Firestore `deleteDoc` and pass in the task id.

We'll also explore a good practice when performing destructive operations (__like deleting database objects__) of adding a confirmation step to make sure our users don't delete objects by accident. We'll do this with the Ionic Alert Controller.


Delete a Document with a Confirmation Step from Firestore

We'll evaluate 2 good practices when adding a new task.

First, we'll show the users a toast alert to notify them that their document was saved in the database. We'll do this with a toast component that ionic makes available to us

And second, we'll use Angular's router to navigate the user back to the task list.

Notify Users Their Database Operation Worked with a Toast Alert

We'll create the template for our new page and set everything up so that we can use this page to create new tasks. The first thing we will do is create a BehaviorSubject task variable that we'll store form values in to send to Firebase.

Because we are using the ionic framework we'll lean heavily into this when creating our templates. You'll see how we bind text values to the object we'll send to Firebase as well as a selector component that will use `ion-segment`.

We'll also see a tip on handling the `async` pipe in a top container in our template so that we don't have to manually add it everywhere we'll render a property from an observable


Create a New Task Form Page Template with Ionic

firebase

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

By leveraging the [dependency graph](https://nx.dev/l/r/structure/dependency-graph), [Nx](https://nx.dev) is able to understand which parts in the monorepo changed and thus trigger actions on those nodes, such as building an app, running tests or linting. This already works out of the box. However, with our portfolio application, all of our markdown articles reside in the root-level `_articles` folder. Those are not captured by the Nx dependency graph and thus Nx would not correctly detect a change to our Next.js site application whenever we change or add a new markdown article.
In this lesson, we learn how to register our `_articles` folder s.t. it appears as a dedicated node in the Nx dependency graph.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Register our Markdown Articles with the Nx Dependency Graph

**NOTE:** `workspace.json` is deprecated, you can update to `project.json` [here](https://nx.dev/deprecated/workspace-json).

One cool aspect of Next.js is its [fast refresh](https://nextjs.org/docs/basic-features/fast-refresh) support. Whenever you change some Next.js component it automatically refreshes the page without hard reloading everything. However, you might notice that whenever we change something within our MDX markdown files, fast refresh is not capturing that, hence we need to manually refresh the browser window.

In this lesson, we learn how to leverage a feature of Nx to create a "[custom Next.js development server](https://nx.dev/l/r/next/server#customserverpath)". We are going to use [chokidar](https://www.npmjs.com/package/chokidar) to watch our articles folder and then invoke a private API on the Next.js server instance to trigger a reload command.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/hot-reload-mdx-changes-in-next-js-and-nx-c05252cf450a).

Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers

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

Next.js is all about creating performant web applications. However, the more React components we pull into our MDX via `next-mdx-remote`, the heavier our JavaScript becomes which drains our site's performance. Also, while we might have quite a few React components to be included in our Markdown rendered content, we might not always use all of them in our articles.

In this lesson, we learn how to leverage Next.js dynamic imports to just pull the minimum necessary components into our final JavaScript bundle. Also, we look into why we might want to do deep imports into our Nx library setup to decrease the size of the bundle even more.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/component-hydration-with-mdx-in-next-js-and-nx-90f46ea0431c).

Dynamically Loading React Components with next-mdx-remote and Next.js Dynamic imports

The markdown rendering includes a lot of native HTML tags as well of course. Assume for instance we want to change the behavior of links within our rendered document. We can definitely create a custom component and include that in our MDX document, but we’d rather not want to have to use a specific `<Link>` component and rather be able to keep the native way of rendering links in Markdown, that is `[some link](https://juri.dev)`.

Turns out that with `next-mdx-remote` we are able to automatically replace all rendered `<a>` tags (or really any other tag we want) with a React Component.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/component-hydration-with-mdx-in-next-js-and-nx-90f46ea0431c).

Use React Components for Native HTML Tags with MDX and Next.js

When rendering our markdown we might want to enrich the experience with some dynamic content. Many static site generators allow to include dynamic content placeholders for like embedding a Youtube video, generating table of contents, code blocks with interactive functionality and more. One way to achieve this in the React ecosystem is by using MDX. MDX is similar to JSX but for Markdown content, and allows us to directly embed React components within it. This gives an enourmous flexibility to what we can display within a page.

In this lesson we’re going to generate a new Nx library to host our “mdx elements” and learn how to leverage the `MDXRemote` component to embed these React components into our markdown rendering flow.

Embed React Components in our Markdown with MDX in a Next.js App

Once we have separated the front-matter from the rest of the markdown document, we can proceed to convert it to HTML, for then finally render it with our Next.js page component. In this lesson we use `next-mdx-remote` to parse the markdown string into HTML and we learn how to leverage the `MDXRemote` component to include it into our page component.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Render Markdown With next-mdx-remote in our Next.js Page Component

Many markdown documents have a metadata section at the very beginning, which contains information such as the title, author and creation date. This section is the so-called "front matter". 

In order to render our markdown-based blog articles on our portfolio site we want to parse them and separate them into the front-matter and main article part. `gray-matter` is a library that helps us with that.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Parse a Markdown Document With gray-matter

In a plain normal Next.js application you would place your markdown processing logic somewhere within a folder insider your Next application. We could do the very same in an Nx monorepo, however, we get much more benefits by moving it into a dedicated library in the `libs` folder.

[Nx workspace libraries](https://nx.dev/l/a/structure/grouping-libraries#example-workspace) allow you to nicely encapsulate your functionality as well as to easily share it with other apps that might potentially live in our workspace. In this lesson, we learn how to generate a new library with Nx generators and how to import the library into our Next.js application.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Generate an Nx Library to Implement our Markdown Rendering for our Next.js App

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this video you'll learn how to deploy a React app to AWS using AWS Amplify Hosting's drag and drop folder functionality. The app will also automatically be globally distributed on AWS's global CDN.

Deploy a React App to AWS in 24 seconds

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Import and Set Environment Variables from a .env file using Netlify CLI

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

Writing clear and effective prompts or rules for AI (.mdc files in Cursor) can be tricky. Your instructions might start out clumsy or ambiguous, leading to less-than-ideal AI responses. This lesson demonstrates how to quickly refine them by referencing a dedicated "best practices" rule file directly within Cursor's inline editor (`Cmd+K`).

**Workflow demonstrated in this lesson:**

*   Select the text (a prompt or section of a rule) you want to improve.
*   Use `Cmd+K` to open the inline AI editor.
*   Reference your separate prompt best practices rule file using `@` (e.g., `@prompt-improve.mdc`).
*   Cursor's AI rewrites the selected text, applying the referenced best practices.
*   Accept the improved version (`Cmd+Enter`).
*   **(Bonus)** Use `Cmd+L` to send the edited section to the Agent chat and ask it to compare the changes with the previous version (using git history) and explain *why* the new version is better (e.g., improved clarity, stronger action verbs, explicit exclusions).

**Key benefits:**

*   Instantly improve prompt clarity and effectiveness based on your own defined standards stored in a rule file.
*   Reduces ambiguity in instructions, leading to better AI outcomes.
*   Leverages Cursor rules (`.mdc` files) as reusable templates for prompt refinement.
*   Provides insight into *how* and *why* prompts are improved via Agent comparison.

Stop wrestling with clunky prompts. Use this technique to systematically apply best practices and level up your AI instructions directly within Cursor.

```markdown
# Improve the User's Prompt Following the Patterns Below

> Practical prompt patterns to help anyone get clearer, more reliable answers from an AI agent.

| # | Pattern                       | Why It Matters                                                          | Template                                                                 | Example Prompt                                                                                             |
|---|-------------------------------|-------------------------------------------------------------------------|--------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| 1 | Lead with the ask             | The model reads top-down; putting the goal first stops it wandering.    | `Do X. [context]`                                                        | "Summarize this PDF in 5 bullet points. The text is below: ..."                                            |
| 2 | Repeat the key ask at the end | Long contexts sometimes truncate; an end-cap protects you.              | `...[detail]... REMEMBER: Do X.`                                         | "List pros & cons, keep it balanced. REMEMBER: 5 pros, 5 cons."                                             |
| 3 | Specify output shape          | Dictating format cuts revision loops.                                   | `Return as: 1) short title, 2) table (CSV).`                             | "Give 3 holiday ideas. Format: destination, flight-time-hrs, avg cost."                                    |
| 4 | Use clear delimiters          | Backticks/headings/XML keep sections from blending.                     | `TEXT TO ANALYSE`                                                        | "Rate the style of the text between the fences."                                                            |
| 5 | Induce step-by-step thinking  | Planning first boosts multi-step accuracy.                              | `Think step-by-step then answer.`                                        | "Solve this puzzle. Think step-by-step before giving the final move."                                      |
| 6 | Ask it to plan its workflow   | For big jobs, AI outlines tasks before doing them.                      | `First draft a plan, wait, then execute.`                                | "We're writing an e-book. ❶ Outline chapters. ❷ Wait. ❸ When I say 'go', draft chapter 1."              |
| 7 | Limit or widen knowledge sources | Controls hallucination.                                               | `Use only the info below. / Combine basic knowledge + this context.`     | "Using only the product sheet below, write FAQs."                                                          |
| 8 | Guide information retrieval   | Helps AI pick the right docs before answering.                          | `List which docs look relevant, then answer.`                            | "30 sales memos attached. 1) Name the 5 most relevant. 2) Summarise their common points."                 |
| 9 | Show a style/example          | Anchors tone, length, vocabulary.                                       | `Match the style of: <example>`                                          | "Review this gadget in the style of the sample below: 'Short, witty, 3 key facts...'"                      |
| 10| Set correction handles        | One-line fixes let you steer quickly.                                   | `If length > 150 words, shorten.`                                        | "Describe blockchain to a child. If your answer is >150 words, cut it in half."                            |
| 11| Tell it when to stop or loop  | Prevents half-finished lists or runaway essays.                         | `Keep going until you list 20 ideas, then stop.`                         | "Brainstorm webinar titles. Give exactly 12, then finish."                                                  |
| 12| Request the hidden reasoning  | Good for audits; otherwise omit to keep it short.                       | `After the answer, include a brief reasoning section.`                   | "Which of these stocks looks over-valued? Answer first; add a 2-sentence rationale below a divider."        |
```

John Lindquist

Automatically Improve Cursor Rules Using Custom Prompts

Cursor's `Cmd+K` is fantastic for targeted code edits, but sometimes you need the AI to operate beyond the confines of your current selection—like extracting a piece of logic into a brand-new, top-level function. Standard `Cmd+K` often falls short, keeping changes localized. This lesson reveals how to overcome this limitation using Cursor's "Edit Full File" mode, turning complex refactoring of legacy code into a streamlined process.

**Workflow demonstrated in this lesson:**

*   Contrast the behavior of standard `Cmd+K` (Edit Selection) with the "Edit Full File" mode.
*   Use `Cmd+K`, then `Cmd+Shift+Enter` (or the dropdown) to invoke "Edit Full File" mode for broader AI refactoring.
*   Instruct the AI to extract selected code into new functions at the top level of the module.
*   Demonstrate breaking down a large, monolithic function into multiple smaller, exported, and testable functions.
*   Utilize the "Fix in Chat" feature (`Cmd+Shift+D`) to send error messages and surrounding code directly to an AI agent for quick resolution.

**Key benefits:**

*   **True Top-Level Extraction:** Move code out of its current scope and into new, independent functions anywhere in the file.
*   **Simplified Legacy Code Refactoring:** Easily break apart large, untestable functions into manageable, testable units.
*   **Improved Code Structure:** Quickly organize and modularize your codebase with AI assistance.
*   **Contextual Error Fixing:** Send errors and relevant code snippets to an AI agent via "Fix in Chat" for efficient debugging.

This lesson shows a powerful technique for serious refactoring in Cursor, especially when dealing with large or legacy codebases, making your functions more modular, testable, and maintainable.

Clean up Legacy Functions for Testability in Cursor (0.50+) with cmd+k

Want Cursor's AI Agent to intelligently run your custom CLI tools without complex MCP setups or constant hand-holding? If only the AI could understand your tool's `--help` output, life would be much simpler. This lesson demonstrates exactly that, leveraging Cursor's "Rules" feature with the "Agent Requested" type. You'll learn to feed your CLI's help text directly into a rule, effectively teaching the AI to operate your custom commands through natural language.

**Workflow demonstrated in this lesson:**

*   Execute your custom CLI tool's `--help` command (e.g., `ghx --help`) and pipe its output to your clipboard (e.g., `| pbcopy`).
*   Create a "New Cursor Rule" (Cmd/Ctrl + Shift + P, then "New Cursor Rule").
*   Paste the copied help text into the main content area of the rule.
*   Set the "Rule Type" to "Agent Requested".
*   Provide a clear, concise "Description" (e.g., "Search GitHub") that will act as the trigger phrase for the AI.
*   In an Agent chat, prompt the AI using natural language that corresponds to your rule's description (e.g., "Search GitHub for examples of package.jsons using semantic-release").
*   Observe as the Agent uses the rule's help text to correctly formulate and run your custom CLI command.
*   Leverage the tool's output by further instructing the AI to generate or modify project files (e.g., create a `package.json`, `.releaserc.json`, or `biome.json` based on findings).

**Key benefits:**

*   Empowers Cursor's AI Agent to directly use your existing custom CLI tools without needing to modify the tools themselves.
*   Simple and intuitive setup: Uses your tool's own documentation (`--help` output) as the "API" for the AI.
*   Efficient context usage: The detailed help text for your tool is only loaded into the AI's context when your specific trigger phrase is detected.
*   Provides a straightforward and powerful alternative to MCPs for many CLI tool integration scenarios, especially when tools already have good help messages.
*   Enables complex, natural language-driven automation by combining custom tool execution with the AI's code generation and modification capabilities.

By using "Agent Requested" rules, you gain maximum control over how and when the AI interacts with your custom tools, making the Agent a more versatile and powerful assistant tailored to your specific command-line utilities.

**Resources**

[https://www.npmjs.com/package/@johnlindquist/ghx](https://www.npmjs.com/package/@johnlindquist/ghx)



When to Use Cursor Rules Instead of MCPs

Planning complex application logic or workflows before coding can be challenging. This lesson demonstrates how to leverage Cursor's AI (Chat and Agent modes) to visually brainstorm and iterate on features by generating Mermaid diagrams directly within Markdown files. You'll learn how to use prompts to create flowcharts, sequence diagrams, explore edge cases, and improve the viewing experience for detailed diagrams.

**Workflow/Benefits Demonstrated in this lesson:**

*   Use Cursor AI (Chat/Agent) to generate Mermaid diagrams from natural language prompts.
*   Employ Markdown preview, popping it into a separate window for better viewing and zooming independent of the editor font size.
*   Iteratively refine diagrams by asking the AI to add features or create new diagram types (e.g., sequence diagrams).
*   Generate diagrams to visualize complex scenarios like optimistic updates and edge cases (conflict resolution, offline sync).
*   Create persistent visual artifacts (diagrams in Markdown) for planning, documentation, and guiding further AI development tasks.


## Mermaid Cursor Rules
````markdown
---
description: Whenever diagrams or mermaid is mentioned.
globs: 
alwaysApply: false
---
Here are the essential rules for creating Mermaid diagrams that render well in GitHub Markdown:

1.  **Use the Correct Fenced Code Block:**
    *   Always start the block with ```mermaid and end it with ```.
    *   ```markdown
        ```mermaid
          graph TD
            A[Start] --> B{Decision};
            B -- Yes --> C[Action 1];
            B -- No --> D[Action 2];
        ```
        ```

2.  **Stick to Well-Supported Diagram Types:**
    *   GitHub generally has good support for the most common types:
        *   `graph` (Flowcharts - `TD` is often best for readability)
        *   `sequenceDiagram`
        *   `classDiagram`
        *   `stateDiagram-v2` (Prefer v2 for better features/rendering)
        *   `erDiagram` (Entity Relationship)
        *   `pie` (Pie charts)
        *   `gantt` (Gantt charts)
        *   `mindmap` (Mind Maps - Basic structure only. *See syntax notes below*)
    *   Avoid extremely new or less common diagram types, as GitHub's Mermaid version might lag slightly behind the latest release.

3.  **Keep Syntax Simple and Standard:**
    *   **Node IDs:** Use simple alphanumeric IDs (e.g., `node1`, `processA`, `userAuth`). Avoid spaces or special characters in IDs.
    *   **Node/Actor/State Labels:** **Use quotes (`"..."`)** for labels, especially if they contain spaces, punctuation, special characters, or Mermaid keywords. This is the most common source of rendering errors.
        *   *Good:* `A["User Input"] --> B["Validate Data"];`
        *   *Bad (potential error):* `A[User Input] --> B[Validate Data];`
    *   **Arrows:** Use standard arrow types (`-->`, `---`, `==>`, `->>`, etc.).
    *   **Comments:** Use `%%` for comments if needed.

4.  **Mindmap Specifics for GitHub:**
    *   GitHub **supports the basic `mindmap` structure**, using indentation to define hierarchy (parent/child relationships).
    *   Ensure each node/item is on its **own line** with correct indentation relative to its parent.
    *   GitHub **DOES NOT support** experimental or advanced `mindmap` features like `::icon()` syntax. Using icons **will cause rendering errors**.
    *   Stick to plain text nodes for mind maps intended for GitHub Markdown.
    *   *Correct Example (GitHub compatible):*
        ```mermaid
        mindmap
          Root
            Parent
              Child 1
              Child 2
        ```
    *   *Incorrect Example (GitHub incompatible due to icons):*
        ```mermaid
        mindmap
          Root
            Parent
              ::icon(fa fa-one) Child 1
              ::icon(fa fa-two) Child 2
        ```

5.  **Prefer Vertical Layouts (`graph TD`):**
    *   For flowcharts (`graph`), `TD` (Top Down) or `TB` (Top Bottom) usually renders more readably within the flow of a Markdown document than `LR` (Left Right). GitHub often gives diagrams ample width, but vertical flows are easier to follow on typical screens.

6.  **Let GitHub Handle the Styling:**
    *   **DO NOT** try to set themes (e.g., `%%{init: {'theme': 'dark'}}%%`) or apply custom styling using `classDef` or `style` *within the Mermaid code*.
    *   GitHub **ignores** these theme directives and applies its own styling based on whether the user is viewing GitHub in light, dark, or dimmed mode. Your diagram will automatically adapt. Trying to force colors or themes will likely just be ignored or look out of place.

7.  **Keep Diagrams Focused:**
    *   Avoid overly complex diagrams with excessive nodes, edges, or nesting in a single block. While GitHub *can* render complex ones, they might become hard to read or hit rendering limits. Break down very complex ideas into multiple simpler diagrams if possible.

8.  **Test in GitHub Preview:**
    *   Always use GitHub's preview tab when editing your Markdown file to see exactly how the diagram will render. This is the best way to catch syntax errors or unexpected layout issues.

9.  **Tooling & Edit Verification Note:**
    *   Automated code editing tools may sometimes struggle to apply changes correctly within Mermaid blocks, especially with complex syntax involving indentation or specific formatting (like the mindmap example above).
    *   **Always carefully review edits** made to Mermaid blocks by automated tools. If errors persist or the diagram doesn't render as expected, manual correction might be necessary.

**In short:** Write standard, clearly quoted Mermaid syntax using common diagram types. For mindmaps in GitHub, use only the basic indentation structure (no icons). Prefer `graph TD`. Avoid trying to control the theme/colors yourself. Use the GitHub preview, and double-check automated edits to Mermaid blocks.
````

Brainstorm and Planning with Mermaid Diagrams in Cursor

Manually staging files, writing commit messages, committing, and syncing to Git involves multiple repetitive steps. This lesson demonstrates how to significantly streamline this common Git workflow in Cursor (or VS Code) by creating a single, powerful keyboard shortcut using `keybindings.json` and the `runCommands` feature.

**Workflow demonstrated in this lesson:**

*   Open `keybindings.json` to customize keyboard shortcuts.
*   Unbind default shortcuts (like `Shift+Cmd+S`) that you might not use.
*   Utilize the `runCommands` command to create a sequence of actions.
*   Chain together `git.stageAll`, `cursor.generateGitCommitMessage`, `git.commitAll`, and `git.sync` commands.
*   Bind this entire sequence to a single custom keyboard shortcut.
*   Execute the full stage -> AI commit message -> commit -> sync workflow with one keystroke.

**Key benefits:**

*   Combines multiple Git actions into one efficient step.
*   Automates staging, committing, and syncing changes.
*   Leverages Cursor's AI to generate commit messages automatically.
*   Frees up valuable keyboard shortcuts for powerful custom workflows.
*   Significantly speeds up your development cycle by reducing manual Git operations.

```json
  {
    "key": "shift+cmd+s",
    "command": "runCommands",
    "args": {
      "commands": [
        {
          "command": "git.stageAll"
        },
        {
          "command": "cursor.generateGitCommitMessage"
        },
        {
          "command": "git.commitAll"
        },
        {
          "command": "git.sync"
        }
      ]
    }
  },
  {
    "key": "shift+cmd+s",
    "command": "-workbench.action.files.saveAs"
  },
  {
    "key": "shift+cmd+s",
    "command": "-workbench.action.files.saveLocalFile",
    "when": "remoteFileDialogVisible"
  }
```

Create Complex Cursor Shortcuts to Run Commands and Generate AI Commits

In development we often want to test out features we are building but can only do so with deployed or staging applications or setting up Ngrok or Cloudflare Tunnels. 

UntunJS allows us to get the benefits of Cloudflare tunnels without having to go into the Cloudflare dashboard and set it up.

In this quick lesson we utilize UntunJS to run our local Nextjs application in a Cloudflare Tunnel

Ben Patton

Run local Nextjs App in a Cloudflare Tunnel with UntunJS

UntunJS is a great package to get the quickest start with Cloudflare tunnels and development and testing

Hey Everyone 👋,

John Lindquist here with the third issue of AI Dev Essentials! Another week, another whirlwind of updates in the AI development space. We saw Google drop Gemini 2.5 Flash, OpenAI counter with o3/o4-mini and a new Codex CLI, Anthropic beef up Claude with research tools, and continued evolution in the MCP and agent framework landscape. Personally, I've been digging into Gemini 2.5 Flash – it's impressive to see Google pushing the performance frontier for smaller models and comparing it directly against the competition like O4-mini. Let's dive in!

___

### New egghead.io Lesson This Week:

* **[Generate and Debug MCP Servers from Scratch using GitHub Examples and AI](https://egghead.io/generate-and-debug-mcp-servers-from-scratch~k98ad):** 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 (a wrapper I built for the GitHub CLI - find it [here](https://www.npmjs.com/package/@johnlindquist/ghx)) with AI assistants (like Google's AI Studio and Cursor's agent) to overcome this hurdle. Learn how to scrape real-world examples from GitHub using `ghx` ([see scraped examples here](https://gist.github.com/johnlindquist/b19673bbf6a396406dff869beecace1d)), feed them to an AI to generate a new server, and then integrate and debug it within Cursor. It's a practical look at bootstrapping complex tools using AI and targeted code searching.

___

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

## Model & Major Platform Updates

* **Gemini 2.5 Flash Arrives:** Google released Gemini 2.5 Flash ([Google Developers Blog](https://developers.googleblog.com/en/start-building-with-gemini-25-flash/)), their first unified reasoning model with thinking budgets. It's positioned as a high-performance, cost-effective option. Notably, Google's benchmarks included comparisons against OpenAI's very recent O4-mini, drawing praise for transparency ([Nathan Lambert](https://x.com/natolambert/status/1912958672881303943)). It's available via the Gemini API, AI Studio, Vertex, and the Gemini app. The [Live API docs](https://ai.google.dev/gemini-api/docs/live) are also updated.
* **OpenAI Counters with o3/o4-mini & Codex CLI:** OpenAI launched [o3 and o4-mini](https://openai.com/index/introducing-o3-and-o4-mini/), highlighting their agentic capabilities and tool use during Chain-of-Thought. Alongside these, they released the open-source [Codex CLI](https://github.com/openai/codex), a coding agent designed to leverage these new models. Interestingly, the OpenAI dev behind Codex CLI was spotted [using Cursor](https://x.com/chuhang1122/status/1912786904812294312).
* **Claude Gets Research Superpowers:** Anthropic rolled out a major [Claude upgrade](https://x.com/jowettbrendan/status/1912446262756151732) introducing a "Research" agent capability. It can search the web and internal docs, chain queries, and explore topics agentically, building citations along the way. They also added Google Workspace integration (Gmail, Calendar, Docs) for paid users. (Official blog post link pending confirmation).
* **Cursor 0.49 Update:** The latest Cursor update ([Changelog 0.49](https://www.cursor.com/changelog/0-49)) brings several enhancements: improved Cursor Rules generation and attachment, better chat history access, built-in diff reviews, image support in MCP context, agent command editing/skipping, global ignore files, added models (Gemini 2.5 Pro, Grok 3, GPT-4.1), and project structure context for the agent. [AGIdevice](https://x.com/agidevice/status/1913575514670776520) shows how to enable the beta features.

## Tooling & Protocol Developments

* **MCP Nuances:** David Cramer cautioned against simply [proxying OpenAPI specs via MCP](https://x.com/zeeg/status/1913289979368796671), arguing it misuses the protocol and ignores LLM limitations in tool selection and JSON handling.
* **MCP Transport Clarification:** Harald Kirschner clarified the newer "Streamable HTTP" transport ([MCP Spec](https://modelcontextprotocol.io/specification/2025-03-26/basic/transports)), noting it's primarily HTTP-based, with Server-Sent Events (SSE) as an optional upgrade for streaming server messages, deprecating the older standalone SSE transport. Discussions on implementation and future streaming enhancements are ongoing ([TS SDK Issue #220](https://github.com/modelcontextprotocol/typescript-sdk/issues/220), [MCP Roadmap](https://modelcontextprotocol.io/development/roadmap)).
* **Agent2Agent (A2A) Protocol Announced:** Google unveiled the Agent2Agent (A2A) protocol ([Google Developers Blog](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/)), an open standard aiming to allow AI agents from different frameworks and vendors to communicate and collaborate. This is a significant step towards agent interoperability. Akshay Pachaar also provided a clear explanation contrasting [MCP vs. A2A](https://x.com/akshay_pachaar/status/1912123161883345321). ([GitHub Repo](https://github.com/google/A2A))
* **New MCP Tools:** Ishan Goswami released an open-source [Twitter MCP Tool using Exa](https://x.com/TheIshanGoswami/status/1914226695118168331) (GitHub: [exa-labs/exa-mcp-server](https://github.com/exa-labs/exa-mcp-server)) for searching tweets/profiles without the official API. Eyal Toledano shipped [TaskmasterAI v0.12](https://x.com/EyalToledano/status/1914084622918455572) with multi-PRD parsing, smarter breakdowns, and easier MCP setup, alongside a new [website](http://task-master.dev).
* **Cursor Workflows & Tips:** Ryo Lu shared [12 tips for using Cursor effectively](https://x.com/ryolu_/status/1914384195138511142), emphasizing clear rules, specific prompts, and iterative testing. Prajwal Tomar detailed his ["Context Boundary Method"](https://x.com/PrajwalTomar_/status/1913961327711633601) using structured docs (PRD, Flow, Tech Stack etc.) to guide AI coding tools like Cursor and reduce errors. Andrew Jefferson noted potential issues with [Markdown tab completion](https://x.com/EastlondonDev/status/1913967886521053688) in Cursor.
* **AI UI Builders Compared:** Damien shared a comparison of [Replit, Bolt.new, Lovable.dev, and v0](https://x.com/damienghader/status/1913248328302608482) for generating a multi-step onboarding flow from the same prompt.

## Building AI Agents: Frameworks & Best Practices

* **Agent Framework Discussion:** Harrison Chase (LangChain) published a deep dive on [how to think about agent frameworks](https://blog.langchain.dev/how-to-think-about-agent-frameworks/), sparking discussion comparing approaches (agents vs. workflows, declarative vs. non-declarative) and frameworks like LangGraph, OpenAI's Agents SDK, CrewAI, and AutoGen. Key themes include balancing flexibility vs. predictability and choosing the right abstraction level. OpenAI also released its own [practical guide to building agents](https://cdn.openai.com/business-guides-and-resources/a-practical-guide-to-building-agents.pdf).
* **Production Agent Principles:** Dex Horthy shared principles for production-grade LLM apps in ["12-factor-Agents"](https://github.com/humanlayer/12-factor-agents), arguing successful systems often use focused LLM loops within well-engineered software rather than fully autonomous, monolithic agents. This resonated with many builders facing reliability challenges.
* **Agent Memory:** Taranjeet from [mem0.ai](https://x.com/taranjeetio/status/1912185506559053855) emphasized the importance of persistent memory (beyond session history) for truly intelligent agents that learn and adapt over time ([Blog Post](https://mem0.ai/blog/memory-in-agents-what-why-and-how/)).
* **Key Best Practices:** Common advice emerging from various discussions includes: start simple (maybe not even an agent), use structured outputs (like JSON schemas) to reduce hallucinations, prefer multiple specialized agents over one complex agent, own your control flow rather than relying solely on the framework, and carefully manage context windows. ([Anthropic Guide](https://www.anthropic.com/research/building-effective-agents), [Dev.to Summary](https://dev.to/isaachagoel/read-this-before-building-ai-agents-lessons-from-the-trenches-333i)).

___

**✨ 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 24, 2025, **9:00 AM - 2:00 PM (PDT)**
* **Where:** Zoom (Live Q&A included)
* **Investment:** $249

Unlock Cursor's potential and streamline your development process.

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

_(Team training also available)_

___

## Notable Prompts

* **o3 Fact-Checking:** A prompt structure for using o3 to thoroughly fact-check an entire article by parsing individual facts. (See [Matt Shumer's Tweet](https://x.com/mattshumer_/status/1914412812891570199) for the prompt start).
* **Multiple Experts Method:** A system prompt that instructs the AI to analyze problems from multiple expert perspectives (e.g., Systems Thinker, Risk Assessor) and synthesize their insights. (See [God of Prompt's Tweet](https://x.com/godofprompt/status/1914370848032497906) for the full prompt and example).
* **Personality-Infused Prompt:** A detailed persona prompt instructing the AI to adopt a specific, informal, and slightly critical tone using modern slang and abbreviations. (See [Kitze's Tweet](https://x.com/thekitze/status/1913719205007937825) for the full prompt, originally from [@threepointone](https://x.com/threepointone)).

## Community Buzz & Resources

* **New Community Site:** [AGIdevice](https://x.com/agidevice/status/1913666033870647325) is building [cursorcommunity.com](http://cursorcommunity.com) in public.
* **Industry Chatter:** Deirdre Bosa discussed the potential [OpenAI bid for Windsurf](https://x.com/dee_bosa/status/1912906057791447294) and the shift towards the app layer. AI Native Dev reported on perceived [friction between Microsoft and Cursor](https://x.com/ainativedev/status/1912869556973949430) ([Article](http://ainativedev.co/spx)).
* **Android XR Demo:** Google showed off prototype smart glasses with Android XR ([Demo Video via 9to5Google](https://9to5google.com/2025/04/17/google-android-xr-smart-glasses-live-demo/)).
* **New Open Dialogue Model:** A new small open model, [Dia-1.6B](https://x.com/altryne/status/1914421817139454341), was released. It's focused on dialogue disentanglement – figuring out who's talking to whom in complex conversations. ([GitHub](https://github.com/nari-labs/dia), [Hugging Face](https://huggingface.co/nari-labs/Dia-1.6B)). I was extremely impressed with the demos – definitely worth checking out.
* **Video Generation with Veo 2:** Google's Veo 2 video generation model is now available in Gemini Advanced and Google AI Studio ([Google Blog](https://blog.google/products/gemini/video-generation/), [Developers Blog](https://developers.googleblog.com/en/veo-2-video-generation-now-generally-available/)). I've tried out a few videos and was really impressed with the quality. Pro tip: In AI Studio, you can use an image as a reference when generating video ([API Docs](https://ai.google.dev/gemini-api/docs/video#generate_from_images)), though surprisingly, Gemini doesn't support that yet. It's heavily rate-limited at the moment, but still fun to play with for generating short 8-second clips.

___

That’s the scoop for this issue! The pace isn't slowing down, particularly around agent capabilities, specialized models, and the tooling ecosystem supporting them.

If you have any feedback or questions, hit reply! Always happy to chat about the latest in AI dev tools.

John Lindquist


AI Dev Essentials #3: Gemini Flash, o4-mini, Codex CLI, A2A Protocol & Agent Updates

AI Dev Essentials covers Gemini 2.5, O4-mini, Claude’s research tools, Codex CLI, and new workflows for building AI agents with MCP and Cursor.

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.

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.