Learn Jwt, Netlify and Stripe

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

You will implement stripe checkout in your application so that customers can buy products.

To do this, you will first create a Next.js API route that starts a stripe session and passes in products that are in the cart. This will forward users to the Stripe checkout page where they can input their credit card information.

Upon success or cancel, stripe will forward the user back to urls that you set.

Accept Payments through Stripe Checkout using Next.js API Routes

snipcart

While we have a lot of options for the different payment gateways that we can use in order to take payments, we're going to use [Stripe](https://stripe.com/), which is a well-known secure payment processing platform, where it's going to be able to easily integrate into our Snipcart account.

Once we add our Stripe account, we will head over to the Snipcart dashboard where we will connect Stripe as our payment gateway, which simply allows us to go through an authentication process, where we will have Stripe configured.


Use Stripe as a Payment Gateway in Snipcart

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

netlify

In this lesson, you'll learn how to set up a new Vite project and configure it to use React with TypeScript.

Set up a Vite project with React and TypeScript

In this lesson, you'll globally install the Netlify CLI and use its dev command to run your site locally. Netlify automatically detects if it's a Vite project!

Set up Vite local dev with the Netlify CLI

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

Netlify has the power to automatically detect serverless functions in your project and run a functions server with hot reloading for you. 

In this lesson, you'll learn how to create serverless functions in your Netlify app using TypeScript

Add TypeScript powered serverless functions to a Netlify project

In this lesson, you will learn how to create a Netlify serverless function, powered by TypeScript, to handle form submissions.

Create a serverless form submission handler with TypeScript

In this lesson, you'll learn how to set up a submit handler that posts your form data to a serverless function.

Submit form data to a Netlify serverless function

After all your hard work, it's time to deploy your app! 

In this lesson, you will learn how to get your project onto GitHub and deploy it using Netlify

Deploy a Vite project with the Netlify CLI

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Every transaction in Stripe is associated with a customer. Since we want our user to be able to see their transaction history in Stripe, we need to keep a track of their customer ID in our `profile` table.

In this video, we create a new Stripe account and configure our Next.js application to use its publishable and secret API keys. Additionally, we discuss by adding `NEXT_PUBLIC_` to our environment variable names, it exposes them to the client - running in the user's browser. This is entirely safe for our publishable key - which can be public - but not our secret key - which should always be kept private.

To create a Stripe customer, we need to use our private API key, meaninh this logic will need to be executed on the server. Next.js makes this simple with API routes - special serverless functions that will be created for any `.js` files in the `pages/api` directory.

We create a new API route to handle adding a stripe customer and updating the user's profile with their customer ID. 

Create a Stripe Customer with Next.js API Routes

Each of our subscription options will be a product in Stripe. In this video, we create a `/pricing` page to display our new products. We use the Stripe package to fetch these options at build time and add some simple styling to make it look nice!

Annoyingly, the `prices` list is what we need to request for pricing information, but does not contain product information - such as `name`. This means we need to make an additional request for the product information for each price. Good thing we are only doing this once at build time, as the request time could add up pretty quickly, if we needed to do this on every request!

Lastly, we sort the list of plans from Stripe, to ensure that the prices go up in ascending order. Since each plan has a price, we can use a simple native JS sorting technique.

Use Stripe.js to Query Product Data and Pre-Render with Next.js

Stripe makes taking payments easy. We can use the Stripe library to create a checkout session. This takes a configuration object, which describes how we want to charge our customer, the method we would like to use, and where we want to redirect the user based on a successful transaction or cancellation.

In this video, we create a new API route to initiate a Stripe session to charge for a particular subscription option. This API route returns the session's ID, which we can use to redirect the client. In order to do this, we install the `stripe-js` library - which is used client-side to interact with Stripe - and initialize it using our `publishable` key.

Lastly, we can use the test credit card for Stripe to confirm everything is working in test mode.

Charge Customer for Stripe Subscription in Next.js

Webhooks allow us to subscribe to particular events, and have Stripe let us know when they occur. From the Stripe dashboard we can specify an endpoint to call, and which events we care about. For subscriptions, we want to know when a new subscription occurs, is updated, or deleted.

In this video, we create a new API route to handle webhook events from Stripe. We can call the `stripe.webhooks.constructEvent` function which returns the event object. It also takes the `req`, `signature` and `signingSecret` to verify the request is valid and came from Stripe.

The `signature` can be extracted from the request's headers, and the signing secret is available in the Stripe dashboard, however, the Next.js `req` object is a different structure to what `constructEvent` is expecting. Therefore, we need to install the `micro` package and use its `buffer` function to get the `reqBuffer`. We also need to export a config object from our page component, setting `bodyParser` to `false`.

Subscribe to Stripe Webhooks Using Next.js API Routes

We can use Stripe's Customer Portal to allow our users to manage their subscription and payment information. We will configure the Customer Portal in the Stripe Dashboard and create the required pages for `/terms` and `/privacy`.

Additionally, we create an API route to initiate our customer portal session. Similarly to our API route that charges for a subscription, we need to get the token from the cookie, add it to the Supabase session and fetch the associated `profile` data. 

Since the `updated` event gets triggered for creating a new subscription, as well as updating an existing one, and we want to perform the same changes in our Supabase DB, we can replace our case statement to handle `customer.subscription.updated`.

Lastly, we implement a case for `deleted`, setting `is_subscribed` to `false` and `interval` to `null`. Since this event doesn't actually trigger until the end of the customer's billing cycle, we can manually cancel the user's subscription from the Stripe dashboard.

Allow Customer to Manage Their Subscription with Stripe Customer Portal

There are a few steps to go through to push our application and all of our services to production!

1. In order to "activate" our Stripe account, we need to fill out some details about our business. 

2. Update everywhere `[http://localhost:3000](http://localhost:3000)` is referenced in our application to use the `CLIENT_URL` environment variable, which can be set to localhost in `.env.local`.

3. Create a GitHub repo, and commit and push all of our changes.

4. Create a Vercel account, import project from GitHub, configure all environment variables and deploy!

5. Use our Vercel domain to configure our Customer Portal and Webhooks in Stripe.

6. Update `STRIPE_SIGNING_SECRET` environment variable in Vercel and manually redeploy.

7. Update our Site URL in Supabase and remove our test `user` and `profile` records.

8. Create a function hook in Supabase to use our Vercel domain

We now have a SaaS application deployed to the Internet that we can start making that side hustle money from!! 🎉

Configure Stripe for Production and Deploy Next.js Application with Vercel

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

Do you want to allow users of your app to create an account and sign in with their Google profile? If so, this 10-minute video will show you how to set up within your Auth0 tenant! 

The Google social connection allows users to log in to your application using their Google profile. By simply adding the connection within your Auth0 dashboard, enabling it for your application, and creating a project within your Google developer console, you can be up and running within no time!

How To Add Google Authentication with Auth0

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Now that we have both the user and the token we can encode a JWT. This is made easy by the `jsonwebtoken` library that we will be using. 

To create a function that encodes a jwt, the function will need the user and token. Inside the function, definition create a `jwtPayload` object that just contains the essential data for encoding. Then, pass the payload to the `jsonwebtoken` library `sign` method and return the signed token.

Finally we store the jwt in the user's localStorage.

Encode User Data with JSON Web Token (JWT)

Now that we have our encoded JWT we need to be able to decode it!

The `jsonwebtoken` library makes this very easy. All we have to do is pass the `jwt` and our `token` to a decoder function. In that function definition we pass the arguments into the `verify` method and return the result.

Identify Users with JWT

We are going to use our JWT to make a protected request. 

All we have to do is create a button with a click event that calls our `fetchRepos` function. In the fetchRepos function make a fetch request to the `/repos` endpoint. In the fetch, pass an Authorization header with your JWT as a Bearer token. Then just await the response!

Use JWT to Make a Protected Request

We are going to simulate user verification when making a protected request. To simulate the database we are just going to use a simple array.

We verify the user by grabbing the JWT off of the authorization header in the request. We then look for a user in the database with a matching JWT. If the verification is successful we can give the user the data they requested.

Handle a Protected Request with JWT

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

Add Github Login to Your Web App with OAuth 2.0

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.

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

Hey Everyone 👋,

John Lindquist here with the **eleventh issue of AI Dev Essentials!** I've been digging more and more into using Claude Code to spin up projects. Here's a couple of fun ideas I've been putting together using _only_ Claude Code:

- dotagent (https://www.npmjs.com/package/dotagent) - A tool for syncing rules/instructions across Cursor/Claude/Windsurf/etc.
- chromancer (https://www.npmjs.com/package/chromancer) - A CLI for interacting with Chrome. It wraps around Claude Code to generate and save automated browser workflows.
- Script Kit (https://www.scriptkit.com/) - I added MCP support so Cursor/etc can invoke your scripts.

There's obviously no way I could've done this much work in the past week without using AI agents (mostly Claude Code).

I'm still deterimining guidelines for Cursor vs Claude Code. Cursor recently introduced a new Ultra plan that's $200/month and has 20x more usage than Pro which should allow you to run `o3` (an _awesome_ model) full time. My quick, too-early take:

- Cursor gives you more control and customizations. It's perfect for "focused" work where you want to be an active participant in the process.
- Claude Code is great for "automated" work where you just want to leave the desk and come back to to review a feature.

As always, the model used will always be more important than the tool. So since Cursor can also use Claude Opus/Sonnet and has backgound agents + bugbot, it's just a more fully-featured offering which can only continue to improve. I love CLIs (I'm mean I really, really love CLIS), but there always comes a point where you need to open a GUI. Anyway, I'll be continuing to use both for now.

I was also just accepted into the OpenAI Open Source fund which granted me $5000 in credits to use the Codex CLI (OpenAI's version of Claude Code), so I should have strong opinions on that very soon. I _love_ OpenAI's Codex through the web interface where it can spin up your project and submit PRs, so I have high hopes for the CLI.

I've honestly had more fun programming over the past couple of months than I've had during my entire 20+ year career!

### 🎓 New egghead.io Lessons This Week

The [Building Local AI Agents with Ollama and the AI SDK](https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k) course is now live! I've released the first 5 lessons covering:
- Setting up Ollama for local AI development
- Building your first agent with the AI SDK
- Implementing tool calling and function execution
- Managing agent state and conversation flow
- Deploying local agents with persistent memory

Check out the course at [https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k](https://egghead.io/courses/scripting-local-language-models-with-ollama-and-the-vercel-ai-sdk~gmi9k)

---

## 🤖 Model & Platform Updates

### Gemini 2.5 Family Goes Stable

Google has restructured their Gemini 2.5 lineup with significant improvements:

**Gemini 2.5 Pro** (Stable, no changes from 06-05)
- Now the stable long-term support model
- Maintains existing pricing structure
- "gemini-2.5-pro" model name for production use

**Gemini 2.5 Flash** (Stable, updated pricing)
- Simplified pricing based on developer feedback
- Performance improvements from 05-20 variant
- Now the go-to model for cost-conscious applications

**NEW: Gemini 2.5 Flash-Lite** (Preview)
- Small reasoning model at just $0.10/1M input, $0.40/1M output
- Pushes the cost/intelligence frontier
- Ideal for high-volume applications requiring reasoning capabilities

([Google Blog](https://blog.google/products/gemini/gemini-2-5-model-family-expands/), [Google Cloud Blog](https://cloud.google.com/blog/products/ai-machine-learning/gemini-2-5-flash-lite-flash-pro-ga-vertex-ai))

> The introduction of Flash-Lite is particularly exciting. We're seeing Google compete aggressively on the cost front while maintaining reasoning capabilities. This could be a game-changer for applications that need to process massive amounts of data with some level of intelligence. Honestly, I'm kinda glad they've shipped 2.5 so they can focus on whatever 3.0 is going to be 😅

### OpenAI's Open Source Model Progress Update

At Y Combinator's AI startup school, Sam Altman provided an update on OpenAI's open-source model initiative, first announced in March 2025. The model, which will be OpenAI's first open-weight release since GPT-2 in 2019, is being developed with reasoning capabilities similar to o3-mini and is aimed for release in early summer.

Key details:
- Text-in, text-out model designed for high-end consumer hardware
- Highly permissive license with few usage restrictions
- Toggle-able reasoning capabilities
- Led by VP of Research Aidan Clark

([TechCrunch](https://techcrunch.com/2025/03/31/openai-plans-to-release-a-new-open-language-model-in-the-coming-months/), [Reuters](https://www.reuters.com/technology/artificial-intelligence/openai-plans-release-open-weight-language-model-coming-months-2025-03-31/), [VentureBeat](https://venturebeat.com/ai/openai-to-release-open-source-model-as-ai-economics-force-strategic-shift/))

> OpenAI has been gathering community feedback since March, and Altman himself admitted they've been "on the wrong side of history" regarding open source. This shift is clearly influenced by the success of Meta's Llama models (over 1 billion downloads) and pressure from competitors like DeepSeek. I'm looking forward to seeing how this balances OpenAI's commercial interests with community needs.

### Revolutionary AI Performance in Medical Research

A combination of GPT-4.1, o3-mini-high, and Gemini 2.0 Flash achieved superhuman performance in systematic medical reviews ([medRxiv](https://www.medrxiv.org/content/10.1101/2025.06.13.25329541v1)):

- Completed 12 work-years of Cochrane reviews in just 2 days
- 96.7% sensitivity vs 81.7% for human reviewers
- Found 54 additional eligible studies missed by original authors
- Generated new statistically significant findings in 2 reviews

The system correctly identified all originally included studies while discovering critical findings humans missed, like preoperative immune-enhancing supplementation reducing hospital stays by one day.

> This is the kind of AI application that genuinely excites me. It's not replacing researchers but augmenting them to find insights that would otherwise be missed. The fact that blinded reviewers sided with the AI 69.3% of the time when there were disagreements speaks volumes.

---

## 🔧 Developer Tooling & MCP Updates

### MCP Goes Mainstream

The Model Context Protocol is having a moment:

**Cloudflare Open Sources use-mcp**
- React library connecting to any MCP server in 3 lines of code
- Supports SSE and Streamable HTTPS remote servers
- Handles OAuth flow automatically
- Part of the official MCP organization for reference implementation

([Cloudflare Blog](https://blog.cloudflare.com/connect-any-react-application-to-an-mcp-server-in-three-lines-of-code/), [GitHub](https://github.com/modelcontextprotocol/use-mcp))

**OpenAI Adds MCP Support to ChatGPT**
- Limited initially to search and fetch tools for deep research
- Remote MCP with OAuth support
- Documentation available at [platform.openai.com/docs/mcp](https://platform.openai.com/docs/mcp)

**Google Cloud Run MCP Tutorial**
- Deploy remote MCP servers in under 10 minutes
- Comprehensive guide for production deployments

([Google Cloud Blog](https://cloud.google.com/blog/topics/developers-practitioners/build-and-deploy-a-remote-mcp-server-to-google-cloud-run-in-under-10-minutes))

**Block's MCP Best Practices**
- Lessons from building 60+ MCP servers
- Design patterns and architecture recommendations

([Block Engineering Blog](https://engineering.block.xyz/blog/blocks-playbook-for-designing-mcp-servers))

> MCP is becoming the standard for AI tool integration. The fact that major players are all adopting it suggests we're moving toward a more interoperable AI ecosystem. I'll definietly have more educational materials around MCPs soon!

### OpenAI's Prompt Management Revolution

OpenAI introduced Prompts as an API primitive:

- Centrally manage, version, and optimize prompts
- Use across Playground, API, Evals, and Stored Completions
- Preconfigured with tools, models, and messages
- New "Optimize" button in Playground for API optimization
- Replaces the old presets system

([OpenAI Community](https://community.openai.com/t/prompts-are-an-api-primitive-now/1290247), [Documentation](https://platform.openai.com/docs/guides/text?api-mode=responses#reusable-prompts))

> Finally! Prompt management has been a pain point for production AI applications. This brings prompts to the same level as other API resources, making it easier to maintain consistency across teams and applications.

### Developer Resources

**models.dev - Open Source AI Model Database**
- Comprehensive pricing and limits information
- Powers opencode under the hood
- Community-contributed with API access
- Star and contribute at [models.dev](https://models.dev)

([Official Site](https://models.dev/), [GitHub](https://github.com/sst/models.dev))

**Container-use Now Works with OpenAI Codex CLI**
- Solomon Hykes confirmed integration
- Enables containerized development workflows

([GitHub](https://github.com/dagger/container-use))

> Giving AI Agents enough control to `rm -rf` is why the community is so bullish on containers for everything!

---

## 💻 Cursor Corner

### Cursor Ultra Plan Launches at $200/month

Cursor introduced a new Ultra tier with 20x more usage than Pro:

- Addresses heavy user demands for unlimited-style usage
- Positioned between Pro and enterprise offerings
- Reflects the growing appetite for AI-assisted development at scale

([Cursor Blog](https://www.cursor.com/blog/new-tier), [TechCrunch](https://techcrunch.com/2025/06/17/anysphere-launches-a-200-a-month-cursor-ai-coding-subscription/))

> This is exactly what I've been hoping for! The mental overhead of tracking usage on Pro was real. While $200/month isn't cheap, for professional developers who live in Cursor, it's a no-brainer. I'm curious to see if this pressures other tools to offer similar "all you can eat" plans. There's a bit of buzz around how ambigous the messaging/pricing and it's obviously frustrating for anyone trying to budget out AI costs.

## 🚀 Quick Updates

- **OpenAI Codex Best-of-N**: Generate multiple solutions simultaneously, rolling out to Pro, Enterprise, Team, Edu, and Plus users ([Changelog](https://help.openai.com/en/articles/11428266-codex-changelog))
- **Claude Code "ultrathink" Trigger**: Use thinking triggers for better results, with "ultrathink" being the most powerful ([Anthropic Docs](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/extended-thinking-tips))
- **Google Labs Flow Updates**: Complete tutorial thread on ingredients, frames, camera controls, and scene builder for Veo 3 ([Google Blog](https://blog.google/technology/ai/google-flow-veo-ai-filmmaking-tool/), [FAQ](https://labs.google/fx/tools/flow/faq))
- **ElevenLabs v3**: Revolutionary emotion control with audio tags like [excited], [whispers], [sighs], [laughs] ([ElevenLabs v3](https://elevenlabs.io/v3), [Blog](https://elevenlabs.io/blog/eleven-v3))

---

## 🔒 Security & Best Practices

### The Lethal Trifecta Warning

Simon Willison echoed many of my thoughts around MCP+Security. Definitely worth a read: ([Blog Post](https://simonwillison.net/2025/Jun/16/the-lethal-trifecta/)):

**The Lethal Trifecta = Private Data + Untrusted Content + External Communication**

Any AI system with all three components is vulnerable to data exfiltration attacks. This is especially critical for MCP users who might inadvertently combine:
- File system access (private data)
- Web browsing (untrusted content)  
- API calls or messaging (external communication)

**Mitigation Strategies:**
- Never combine all three capabilities in one agent
- Implement strict sandboxing between components
- Use human-in-the-loop verification for sensitive operations
- Audit your MCP tool combinations carefully

> This is the kind of security thinking we need more of. As we give AI agents more capabilities, we need to think adversarially about how they could be exploited. The MCP ecosystem makes it trivially easy to create vulnerable combinations.

---

## ⚡ AI Ecosystem Observations

### Google Cloud IAM Outage Cascade

A major lesson in infrastructure dependencies:
- Google Cloud IAM failure cascaded to Cloudflare, Anthropic, Spotify, Discord, and Replit
- Highlighted single points of failure in the AI infrastructure stack
- Key takeaway: Implement graceful fallbacks and avoid single-provider dependencies

([Full Analysis](https://forgecode.dev/blog/gcp-cloudflare-anthropic-outage/))

> Did you feel this? I sure did. That was a strange couple of hours where I felt lost without my AI agents... I'm just glad it was a simple failure and not a more serious issue.

### AI Agents Playing Diplomacy

Fascinating behavioral patterns emerged:
- **Claude**: Couldn't lie, was exploited by other players
- **Gemini 2.5 Pro**: Nearly conquered Europe with tactical brilliance
- **o3**: Orchestrated secret coalitions, backstabbed allies, won

> These experiments reveal fundamental differences in how models approach strategy and deception. When choosing models for your applications, consider not just capabilities but behavioral tendencies. I'm sure we'll see more about this in the future.

### AGI as Product Experience

Logan Kilpatrick's perspective on AGI resonated strongly this week:
- AGI won't be a single model breakthrough
- Product experience integrating memory, reasoning, and context matters more
- Small model improvements + great design = "AGI moment" for users
- The narrative is shifting from model-centric to product-centric

([Source](https://youtu.be/kp9afmazO_w))

---

## 🚨 URGENT: Cursor Workshop Early Bird Ends TOMORROW! 🚨

### Turn Failures into Fuel with Cursor - Save $49 NOW!

**⏰ LAST CHANCE: Early bird pricing expires in less than 24 hours!**

I'm genuinely excited to share this workshop with you. After months of pushing the boundaries with AI coding tools, I've distilled everything into a 6-hour intensive that will transform how you work with Cursor (and any AI coding assistant).

**Why This Workshop is Different:**
- **Real workflows, not tutorials**: Learn the exact processes I use daily to build production apps
- **Failure-focused approach**: Turn every AI mishap into a learning opportunity
- **Tool-agnostic principles**: Master concepts that work across Cursor, Windsurf, Copilot, and beyond
- **Live debugging sessions**: Watch me handle real errors and stuck agents in real-time

**What You'll Master:**
✅ Project generation that actually works (with proper structure and best practices)
✅ Context curation for massive codebases without token overload
✅ Agent behavior patterns - know when they're stuck BEFORE wasting credits
✅ Composer pipelines that automate your entire workflow
✅ Git + AI strategies for safe experimentation
✅ Multi-file refactoring without the chaos

**Proven Results:**
> "Take John's cursor workshop it is 🔥 HIGHLY Recommend" —David Wells

> "I used the skills you taught me to effectively one-shot OAuth issuer support in the Epic Stack. So cool!" —Kent C. Dodds

> "John is the cursor god" —Sunil Pai

**Workshop Details:**
- **When:** Friday, June 27, 2025, 9:00 AM - 2:00 PM (PDT)
- **Format:** Live Zoom workshop with Q&A throughout
- **Includes:** Recording access, workshop materials, and my personal Cursor rules

**💰 Pricing:**
- ~~Regular Price: $249~~
- **🎯 EARLY BIRD: $200 (Save $49!)**
- **⚠️ Price increases TOMORROW at midnight!**

**Perfect for:**
- Developers frustrated with AI tools that "almost" work
- Teams wanting to standardize their AI workflows
- Anyone who's felt the pain of agents modifying the wrong files
- Developers ready to 10x their productivity with AI

➡️ **[See Full Workshop Details](https://egghead.io/workshop/cursor)**

➡️ **[SECURE YOUR EARLY BIRD SPOT NOW →](https://buy.stripe.com/7sY7sEbOZbGO0kx7pw9fW09?prefilled_promo_code=GEUHPI9B)**

*P.S. - Team training packages available. Get your whole team up to speed with group rates!*

*P.P.S. - Seriously, don't wait. The $49 savings ends tomorrow and I'd hate for you to miss out. This workshop will pay for itself in saved time within the first week.*

---

That's all for this week! Feel free to reply directly to this email with any questions or feedback.

Keep on shipping! 🚀

John Lindquist

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

John Lindquist

AI Dev Essentials #11: Gemini 2.5 Stable, MCP goes mainstream

AI Dev Essentials #11: Claude Code fuels new CLI tools, Cursor Ultra plan launches, Gemini 2.5 Flash-Lite slashes costs, & OpenAI open-source model looms 

Hardcoding your script to search for only one type of file (like `.md`) is a major limitation. This lesson shows you how to make your script smarter by teaching it to infer the desired file type directly from the user's natural language prompt.

You'll implement a two-stage AI process. The first stage analyzes the user's request to determine the file extension they're interested in (e.g., `md`, `txt`). The second stage then uses that file type to dynamically search the file system, find the relevant files, and execute the command.

**Workflow demonstrated in this lesson:**

* Add a preliminary `generateObject` call to extract a `fileType` from the user's initial prompt.
* Define a list of supported `fileTypes` (e.g., `['md', 'txt']`) and use a detailed prompt to guide the AI, instructing it to choose from the list or use a default.
* Dynamically construct the `globby` pattern using the inferred `fileType` (e.g., `*.$[fileType]`).
* Implement error handling to inform the user if they request an unsupported file type or if no files of the specified type are found.
* Demonstrate how the script defaults to searching for Markdown files but can correctly search for other types when specified (e.g., "summarize my profile from my pdf").

This technique adds a significant layer of intelligence to your script, allowing it to adapt its behavior based on the user's intent and making it a far more flexible and intuitive command-line tool.

Dynamically Inferring File Types from User Prompts in Local AI Scripts

Hardcoding command logic and prompts directly into your script makes it rigid and difficult to extend. This lesson demonstrates a more flexible and powerful pattern: defining your script's commands as individual Markdown files in a dedicated directory.

This approach allows you to easily add, remove, or modify commands without touching the core script logic. You'll learn how to dynamically load these command files, present them as options to the AI, and inject the corresponding instructions into your prompt, creating a truly modular and extensible tool.

**Workflow demonstrated in this lesson:**

* Create a `commands` directory to house your command definitions (e.g., `summarize.md`, `translate.md`).
* In each file, write the specific prompt or instructions for that command.
* Use `globby` to discover all available command files at runtime.
* Create a `commandMap` that maps the filename (e.g., "summarize") to its file content.
* Update the Zod schema to use an `enum` of the dynamically discovered command names.
* Dynamically construct the final text generation prompt by injecting the instructions from the user-selected command file.
* Add a `profile.md` file to demonstrate how the script can act on user-created content with the new file-based commands.

By the end of this lesson, your script will be architected for easy expansion, allowing you to build a robust library of custom commands simply by adding new text files.

Creating Dynamic, File-Based Commands for Local AI Scripts

AI models won't always give you the answer you expect; sometimes they'll return invalid data or "hallucinate" a response that doesn't fit your schema. This lesson teaches you how to make your local AI script more robust by implementing essential error handling for user commands.

You'll learn how to validate the AI's output against a predefined list of valid commands and gracefully catch errors when the model generates an unexpected response, ensuring your script fails predictably and provides helpful feedback to the user.

**Workflow demonstrated in this lesson:**

* Define a list of `validCommands` (e.g., `summarize`, `translate`, `review`) to constrain the AI's choices.
* Wrap the `generateObject` call in a `try...catch` block to handle cases where the AI's output doesn't match the Zod schema.
* Implement a type guard function (`isValidCommand`) to check if the command returned by the AI is in your list of valid commands.
* Provide clear error messages to the user, indicating what went wrong and what the valid commands are.
* Test the script with invalid commands (like "taco" or "delete") to confirm that the error handling works as expected.

By adding these checks, you make your script significantly more reliable and user-friendly, preventing it from crashing on bad input and guiding the user toward correct usage.

Handling Invalid Commands and AI Errors in Local Scripts

Once your script can understand a user's command and identify a target file, the next step is to perform an action. This lesson shows you how to use the Vercel AI SDK's `generateText` function to process a file's content and produce a relevant, AI-generated response.

You'll learn how to read the content from the file path you've already identified, combine it with the inferred command into a new, more detailed prompt, and then pass it back to your local AI model to generate a final text output, such as a summary or a review.

**Workflow demonstrated in this lesson:**

* Import the `generateText` function from the `ai` SDK.
* Read the file content from the `filePath` returned by `generateObject`.
* Construct a new, structured prompt that includes the original command (e.g., "summarize") and the full content of the file.
* Pass this new prompt to the `generateText` function.
* Log the resulting AI-generated text to the console.
* Run the script with commands like "Summarize our TypeScript config" or "Review my package file" to see the full, context-aware output.

This lesson completes the core cycle of your AI script: understanding a command, reading the relevant context, and generating a useful, text-based result, all on your local machine.

Generating Text with a Local AI Model Based on File Content

A command is useless without knowing what to act upon. This lesson elevates your local AI script by giving it context from your project's file system. You'll learn how to find all relevant files and empower the AI to intelligently select the correct one based on your prompt.

The core technique involves using the `globby` package to scan for files and then feeding that list into a Zod `enum`. This constrains the AI's choices to a valid set of files, allowing it to accurately determine which file you're referring to in a natural language command.

**Workflow demonstrated in this lesson:**

* Install and import the `globby` library to find files based on a pattern (e.g., all `.json` files).
* Add a `filePath` field to your Zod schema.
* Define the `filePath` as `z.enum(files)`, where `files` is the array of file paths returned by `globby`.
* Pass a natural language prompt like "Summarize our typescript config" to the script.
* Observe how the AI correctly identifies `tsconfig.json` from the list of available JSON files and returns it as structured data.

This lesson is a crucial step toward building powerful, context-aware tools that can intelligently interact with your project's files based on simple, human-readable commands.

Providing File System Context to Local AI Scripts with Globby and Zod Enums

Hardcoded prompts are great for testing, but a truly useful script needs to respond to dynamic user input. This lesson shows you how to make your local AI script interactive by capturing command-line arguments.

You'll learn how to use Node.js's built-in `parseArgs` utility to take a user's natural language command directly from the terminal and pass it to your local language model for processing.

**Workflow demonstrated in this lesson:**

* Import the `parseArgs` function from the `node:util` module.
* Configure `parseArgs` to accept positional arguments from the command line.
* Replace the static, hardcoded prompt with the dynamic input provided by the user.
* Run the script with different sentences (e.g., `"Download a file"` or `"I want to download a file"`) to demonstrate that the AI can correctly infer the core command regardless of the phrasing.

By the end of this short lesson, your script will be able to accept and process commands directly from the user, making it a flexible and reusable command-line tool.

Processing Dynamic User Input in Local AI Scripts

While command-line chats with local AI models are useful, the real power comes from scripting. This lesson walks you through the initial setup for creating powerful, local AI-driven scripts by combining Ollama, the Vercel AI SDK, and Zod.

You'll learn how to take a natural language command, like "Concatenate all of the markdown files in my Downloads folder into a single file," and use the `generateObject` function to intelligently extract structured, actionable data from it.

**Workflow demonstrated in this lesson:**

* Install and set up the `ollama-ai-provider`, `ai`, and `zod` packages.
* Create a local AI model instance using Ollama and the Gemma 3 model.
* Define a Zod schema to specify the exact data structure you want to extract (e.g., `{ command: string }`).
* Use `generateObject` to pass a natural language prompt to the local model and receive a structured JSON object that matches your schema.
* Run the script using `bun` to see the local model successfully infer the "concatenate" command from a full sentence.

This foundational lesson unlocks the ability to build sophisticated, automated workflows by translating human language into machine-readable commands, all running entirely on your local machine.

Scripting Local Language Models with Ollama and the Vercel AI SDK

### **Build Powerful, Local AI-Driven Command-Line Scripts**

Go beyond simple AI chats and unlock the true potential of local language models by learning to script them. This course will guide you step-by-step through the process of building a flexible and intelligent command-line tool that can understand natural language, interact with your file system, and automate complex tasks—all running entirely on your local machine.

Starting with a blank TypeScript file, you'll learn how to combine the power of **Ollama**, the **Vercel AI SDK**, and **Zod** to create a script that's not just functional, but smart. We'll begin by teaching the AI to parse a simple command from a sentence. From there, we'll progressively add layers of sophistication: processing dynamic user input, making the script aware of your project's files, and generating meaningful text-based output.

You'll also learn critical patterns for building robust and extensible tools. We'll cover how to handle invalid commands and unexpected AI responses gracefully. Then, you'll refactor the script to use a modular, file-based system for its commands, allowing you to easily add new functionality without touching the core logic. Finally, we'll add a layer of intelligence that allows your script to infer exactly what you mean, right down to the type of file you want it to process.

By the end of this course, you will have built a powerful, personalized AI assistant and gained the foundational skills to create sophisticated local automations for any task you can imagine.

**What You'll Learn:**

* How to script local language models using Ollama and the Vercel AI SDK.
* To parse and process dynamic user input from the command line.
* To use Zod schemas, including `enums`, to validate and structure AI model output.
* Techniques for providing file-system context to your scripts with `globby`.
* How to generate context-aware text based on file content.
* Robust error handling for invalid user commands and unexpected AI responses.
* To build a modular and extensible tool by defining commands in separate files.
* To intelligently infer user intent, such as dynamically determining file types from a prompt.

Build a local AI-powered command-line assistant from scratch. Learn to use Ollama, Vercel AI SDK & Zod to parse input, automate tasks, and run scripts offline.

This lesson demonstrates how to give Cursor direct access to your terminal output using the [Nx MCP extension](https://nx.dev/getting-started/ai-integration?utm_source=youtube&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI), enabling automatic error detection and fixing in monorepo projects.

**Workflow demonstrated in this lesson:**

- Encounter a runtime error when serving a Vite application in an Nx monorepo
- Install and configure the Nx Console extension with MCP integration
- Ask Cursor to check your terminal for errors and fix the underlying issues
- Watch as the AI accesses running task details and terminal output through Nx MCP tools
- Observe how it analyzes workspace relationships to identify incorrect imports and missing dependencies

**Key benefits:**

- Seamless Error Handling: AI gains direct access to terminal output and running task information
- Automatic Diagnosis: Accurately identify the root cause of errors without manual copying
- Context-Aware Fixes: Leverage workspace knowledge to implement proper solutions
- Reduced Context Switching: Eliminate the need to manually relay information between terminal and AI



Juri Strumpflohner

Enable Cursor to directly access the terminal to read the output and fix issues

See how Nx MCP gives AI coding assistants direct access to terminal output and running tasks, enabling automatic error detection and fixing.

Search

Search Results