 Courses from Alejandro Roman

As a front-end developer, it's crucial to implement form validation, especially when building apps that involve user input. Two of the standout libraries in this domain are **React Hook Form** and **YUP**. 

- **React Hook Form** handles the form's state management and more.
- **YUP** is perfect for schema validation, allowing you to define and enforce specific data types for your form fields. 

Interestingly, there's a dedicated library to integrate both, ensuring a seamless user experience.

### YUP: Declaring Our Schema

Taking a sample form with fields like email, first name, and last name, we use YUP to define our schema. 

![example form](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698439266/tips/alejandro-roman/react_hook_form_example.png)

For instance:

```javascript
const schema = yup.object().shape({
  email: yup.string().email().required(),
  firstName: yup.string().matches(/^[A-Za-z]+$/, 'Only letters are allowed').required(),
  lastName: yup.string().required()
});
```

Here's a breakdown:

- For the email, we're using YUP's built-in validation for email strings with `.email()`.
- For the first name, we've added custom validation to ensure only letters are present with Regex and `.matches()`.
- The last name is kept as required.

yup also gives us an `InferType` function, which allows us to create a type for our schema. This is useful for declaring interfaces and types for our form fields.

```javascript
export type FormValues = yup.InferType<typeof schema>;
```

### React Hook Form: Managing Form State

With the schema set, we can utilize the power of the React Hook Form:

```javascript
const { register, handleSubmit, errors } = useForm({
  resolver: yupResolver(schema)
});
```

For every form field component, we `register` it with the React Hook Form:

```javascript
<Input 
  id="firstName" 
  {...register("firstName")}
  placeholder="First Name"
/>
```

I've also imported a `FormProvider` component, which allows us to nest components that have access to our hook form. This is useful for building custom components that we might not want to have in our form directly.

```javascript
<FormProvider {...formMethods}>
 // many nested form components
  ...
</FormProvider>
```

Components that want to access the hook form can use the `useFormContext` hook:

```javascript
const { register, formState: { errors } } = useFormContext<FormValues>();
```

React Hook Form provides us with a `formState` that exposes many values that we could want when building forms. Here I'm only using errors but you could also use `isDirty`, `isLoading`, `isSubmitted`, `touchedFields`, `defaultValues`, and more.

### Advanced: Watching Field Changes

React Hook Form provides a `watch` function, allowing us to monitor real-time changes in our form fields:

```javascript
const { firstName, lastName } = watch();
```

By doing so, we can dynamically display messages or perform certain actions based on user input.

### In Summary

With the combination of React Hook Form and Yup, managing and validating forms becomes a breeze. Whether it's a simple login screen or a comprehensive data entry form, these tools ensure robustness and user-friendly feedback.

Give them a try, and you'll likely find your form development process elevated to the next level.

Streamline Form Creation and Validation with React Hook Form and Yup

I recently stumbled upon a fantastic tool for authentication: **Clerk**. Here's why I think it's a game-changer:

### 1. **Easy Installation and Setup**
By simply following their outstanding documentation, you can install the necessary packages and set up Clerk in no time. If you're using AppRouter for Next.js, all you need to do is wrap your entire layout with `ClerkProvider`, and voila – instant authentication!

```jsx
<ClerkProvider>
  {/* Your App's Components */}
</ClerkProvider>
```

![clerk auth](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698429385/tips/alejandro-roman/clerk_auth.png)

### 2. **Out-of-the-box Login and Sign-up Screens**
Gone are the days of building a login and sign-up screen from scratch. With Clerk, you get these, along with social media sign-up options, right out of the box. Just use their provided `sign-up` and `sign-in` components, set some environment variables, and you're good to go.

### 3. **Robust Route Authentication**
Through middleware, you can utilize the `authMiddleware` to specify which routes are public and which ones to ignore. This means that any route that isn't public or ignored will require authentication – a feature that ensures enhanced security.

```jsx
// Using authMiddleware to specify routes

export default authMiddleware({
  publicRoutes: ["/api/documents/insights/1"]
})
```

### 4. **Access to User Details with getAuth**
By importing `getAuth` from Clerk's package, you can pass in the request object and instantly access the entire user's details. This functionality enables you to swiftly implement features like:

```jsx
const {userId} = getAuth(req);

if (!userId) {
  return new Response("Unauthorized", {status: 401});
}
```

### 5. **Exceptional Documentation**
I can't emphasize enough how comprehensive and user-friendly Clerk's documentation is. From installation guides to detailed explanations of features and components – everything is meticulously laid out. Plus, the option to copy-paste components means you can achieve a lot with minimal effort.

### 6. **User-Friendly Components**
Clerk also offers components like the `UserButton`, a handy UI element that lets users manage their accounts or sign out. The best part? You don't even need to build the sign-out functionality – it's all taken care of!

In conclusion, Clerk has transformed the way I approach authentication in my projects. Its ease of use, combined with its powerful features, makes it an invaluable tool for both seasoned developers and beginners. I've already incorporated it into several of my side projects over the past month, and I'm eagerly looking forward to using it in future endeavors.

Simplify Your Web App's Authentication Process with Clerk

Clerk provides out-of-the-box login and signup screens along with social media integration, making authentication incredibly fast and easy compared to building from scratch.

Doppler has been a game-changer for managing environment variables. This tool is essentially a vault for environment variables, providing an easy way to inject them directly into your system.

### Why Doppler?

- **Security**: No more sharing variables over communication platforms like Slack or Discord.
- **Centralized Management**: Update a variable once and have it reflect across your team.
- **Replaces .env**: For Node users, the traditional `.env` file becomes obsolete.
  
![doppler dashboard](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698438364/tips/alejandro-roman/doppler_dashboard.png)

### Setting Up Doppler

1. **Multiple Environments**: Create as many environments as required.
2. **Integration**: Directly integrate with tools like Vercel or, in the absence of direct integration, use Docker.
3. **Installation**: Follow the installation guide to set up the CLI. Once done, add Doppler to your run, start, or build script.

    ```json
    {
      "scripts": {
        "dev": "doppler run -- npm run start"
      }
    }
    ```

4. **Injecting Variables**: Every time you run, for instance, `yarn start`, Doppler pulls your environment variables and injects them into your Node system.

### Example

For demonstration purposes, let's consider a database URL set as `localhost:5439/whatsapp`. 

If you update a variable in Doppler, you have the option to replicate this change across all environments. This is particularly useful for adding new secrets.

In our project, you can notice the absence of a `.env` file. The `package.json` has the `doppler run` flag added to the script. Running `yarn dev` will log the database URL:

```javascript
console.log(process.env.DATABASE_URL);
```

This approach simplifies the process of managing environment variables. No more asking team members if they added or changed a specific variable – everything is managed in one place with Doppler, ensuring security and consistency.

Secure and Efficient Environment Variables with Doppler

Learn how Doppler can replace the need for .env files, providing a more secure way to manage and share environment variables across your entire team.

Lets dive into a high-level explainer on how you can use TypeScript to chat with a document. For this, we'll be employing two main tools: **OpenAI** and **Pinecone**.

We'll have 4 main steps that I'm going to walk you through:


1. **Document Setup**: I've got a social media study in PDF format, about 75 pages, stored in S3.
   
2. **Data Extraction**: We download this document and use a library called `PDF parse` to extract its data. This data is then split by paragraph or a set character limit. We also have logic to remove any chunk that's 10 words or less because, let's be real, there's not likely much meaningful information in such short snippets.

3. **Creating Embeddings**: We then iterate over these chunks to create embeddings. I'll deep dive into what embeddings are in a more detailed video soon. These embeddings are prepared and upserted as vectors into Pinecone.

4. **Interacting with the Document**: When a user poses a question, we craft a new embedding from that prompt. This is used to create a query request which is then sent to the Pinecone index. Pinecone returns the top five results. We construct a context prompt from these, feed it to OpenAI, and obtain a response to present to the user.

![process image](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698427862/tips/alejandro-roman/chat_with_doc_process.png)

I've set up two endpoints in Postman that will interact with this document AI:
- **Summary**: This endpoint processes the document, splits the text into chunks, and upserts the data into Pinecone.
- **Chat**: Using this, we can ask questions against our processed document. It grabs a user's query, makes an embedding, and fetches the top results from Pinecone to generate a relevant answer.

Chat with a Document Using TypeScript, OpenAI, and Pinecone

Learn how to build a chatbot that uses a PDF document as a database, extracting text and answering questions using TypeScript, OpenAI, and Pinecone.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

El servidor de Apollo nos brinda la opción de usar una configuración llamada Contexto. El contexto es un objeto o una función que retorna un objeto el cual es compartido con todos los Resolvers que ejecutan alguna operación en particular. Con el contexto podemos crear o compartir información a nivel global adentro de nuestro servidor.

Como Usar El Contexto de Apollo Server

Aprende como publicar un servidor de GraphQL a Heroku de manera gratuita. Heroku es una solución de plataforma como servicio (PaaS) a base de contenedores. Heroku es completamente auto-manejado y te permite publicar, manejar, y crecer tu aplicación de una manera muy fácil.

Este método también se puede utilizar con express o cualquier solución para la cual Heroku ofrece soporte. Otros lenguajes compatibles con Heroku incluyen: Ruby, Java, PHP, Python, Go, Scala, y Clojure.

Publica Un Servidor De GraphQL A Heroku De Manera Gratuita

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

typescript

In this lesson, you will learn how to extend a class's functionality through typescript decorators. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

Extend Functionality of a TypeScript Class with Decorators

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

En esta lección, aprenderemos como crear un servidor básico de GraphQL usando Apollo Server Express. GraphQL un lenguaje de consulta que nos permite hacer consultas y esperar respuestas predecibles, y Apollo Server express es un marco de referencia que nos permite combinar Apollo con middleware de Express.

Crea un Servidor de GraphQL usando Apollo Server Express

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.

John Lindquist

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.

This lesson demonstrates how to solve the predictability problem when using AI to generate code in monorepos by combining Cursor with Nx generators.

**Workflow demonstrated in this lesson:**

- Explore how Nx generators provide predictable scaffolding for new libraries
- Set up [Nx Console with MCP](https://nx.dev/features/enhance-AI?utm_source=egghead&utm_medium=videos&utm_campaign=Nx-AI&utm_id=Nx-AI) integration to expose generator capabilities to Cursor
- Use the AI assistant to brainstorm a new feature with the help of the Nx MCP tools
- Have Cursor leverage the Nx MCP tools to trigger the appropriate Nx generator for creating a React-based feature library
- Observe how the AI assistant takes the generated library and further integrates it into the codebase

**Key benefits:**

- **Predictable Code Structure**: Ensure generated libraries follow your project's and organization's conventions
- **Consistent Setup**: Maintain uniform configuration across TypeScript projects and package.json files
- **Guided Implementation**: Combine AI instructions with structured, predictable code generation

Enable Cursor to generate predictable project setups

Learn how to combine Cursor AI with Nx generators for predictable library creation in monorepos, ensuring consistent structure across your codebase.

Alejandro Roman

Search Results