Learn D3, Express and Rails

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

In this lesson, we'll clean up some of our placeholder elements. We'll then look at D3's ordinal scale to create a color scale that maps our regions to colors. We'll apply the colors based on region to our data points via the SVG `g`(group) element to apply the color to both our bars and their corresponding inline labels.

Create a Color Scale with D3's scaleOrdinal

Looking at our bars against each other with the x-axis as a guide gives us some relative information, but doesn't deliver the most precise values. In this lesson, we'll add additional labels to show the exact values of each data point in the context of the individual bars.

Clarify Data in D3 with Additional Labels and Rounded Domain Values

In this lesson, we'll see how we can add labels down the y-axis using our band scale. We'll see how to render the labels in React and how we can precisely position the labels based on values calculated by D3 and our scales.

Render a Y Axis for a Bar Chart with D3 and React

In this lesson, we'll take advantage of our `xScale` and the bottom margin to create an axis to start giving our data meaning. We'll access `ticks` from the scale and then use React to render and position the SVG `rect` and `text` elements to create the x-axis for our chart.

Render an X Axis for a Bar Chart with D3 and React

When applying scales to data elements in D3, it's common to combine the scale with an accessor function in order to apply the scale to the appropriate key on a data object. In this lesson, we'll create scaled accessors to refactor and tighten up some existing code.

Create Scaled Accessor Functions from D3 Scales

A band scale allows us to map a discrete set of values to a continuous range. In this lesson, we'll use a band scale in D3 to take the distinct "region" keys in our sample data and map those to evenly spaced and sized elements on our y-axis. We'll use this band scale to show a bar in the bar chart for each region, setting their size and position based on this scale.

Layout SVG Elements on a Y Axis with a D3 Band Scale in React

Drawing data accurately requires a consistent and precise mechanism for mapping data values to pixels on the screen. We can accomplish this mapping in D3 using scales. There are various scales available in D3, depending on your needs. In this lesson we'll using a linear scale to map a data domain of continuous values to continuous range of pixel values. We'll render a new SVG element, setting its width from our scale.

Set an SVG Element's Width Based on a D3 Linear Scale in React

When you want to add data visualizations to your web app, D3 is pretty much the accepted standard.

In this course, we'll start from scratch and build out a bar chart for some sample data using D3's utilities to wrangle the data and then we'll handle the rendering with React.

We'll start by laying out the SVG element that will hold everything, then we'll move on to creating scales that will give us the information we need to render our data as well as axes to give our data some meaning.

Along the way, we'll cover accessor functions, linear scales, band scales and finally, we'll use an ordinal scale to map data objects to colors.

This course certainly won't cover all of D3, but we'll cover enough of the fundamentals to give you a solid jumping off point for future D3 and React data visualization work.

Introduction to Create a Bar Chart with React and D3

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Learn about security headers by adding them to an Express app in a step-by-step guide.

We're going to cover:
- default request headers
- what are security headers
- why security headers are important
- how to add security headers using Helmet
- how to configure the newly added security headers

Add Security Headers to an Express app

We'll create our client-server using the `express` and `cors` packages

Express will be used to create our HTTP application. We'll need it to post to our endpoints and listen to our port.

We need the `cors` package to make cross-origin requests since the front-end will be a different origin than the server.

Create an OAuth Client-Server for code/token exchange

 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!

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

Add Github Login to Your Web App with OAuth 2.0

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

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

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

Nx is not only capable of scaffolding frontend projects, but it also supports a lot of backend setups. In this specific lesson, we're going to explore the setup we previously generated, specifically inspecting how passing `--frontentProject` to the Express.js schematic automatically sets up a [Webpack dev proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) to make it easy to call the backend API.

Connect to an Express.js API from a React app in an Nx Workspace

When we talk about monorepos, we don't talk about the frontend specifically. Quite contrary: an Nx workspace can also host our backend apps. This opens up completely new possibilities in terms of exchanging code between the frontend and corresponding backend API. But before diving deeper into this topic, let's first learn about how we can use the `@nrwl/express` package to generate a [Express](https://expressjs.com/) based API application.

Create an Express Backend API in an Nx Workspace

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

One way to secure API routes is by using JSON Web Tokens (JWTs) which are passed with each request and checked before a lesson is returned. To do this, you need an OAuth server to provide the signing and authentication of these tokens. Auth0 provides this for free for up to 7,000 users. 

In this lesson, we'll configure Auth0 and gather the details we need to be able to secure our API routes.

Configure an Auth0 API Authentication to Use with Your Server

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

When you create a User model with Devise using the command `rails generate devise User`. Devise will create  default columns in the database for your User model. To add your own columns for your users you can create a new Rails migration and add any columns you want for your users.

Add Custom Fields to a Devise User Model with a Ruby on Rails Migration

If you want to give the users the ability to follow or become friends with each other. Rails lets you create a join table in your database and have it reference the user database table. 

You can use Active Record to associate the new table with User table by using the `class_name` method

Create Active Record Self-Referential Relationships In Ruby on Rails

If you make a mistake when naming your database column, and have data that you want to keep unchanged. You can use the change method with the rename_column definition in your migrations files to update a single column name in your database.

Rename A Database Column with Ruby on Rails Active Record Migrations

In this lesson, we'll look at how to handle errors in syncronous and asyncronous request handler functions. 

We'll also look at custom error middleware that allows for better control over how we return errors to our client based on whether we are in a production or development environment.

Handle Syncronous and Asyncronous Errors in Express

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