Forem: Carl

Creating a Review Analyser Using the Vercel AI SDK and React 19

Carl — Fri, 29 Aug 2025 03:46:00 +0000

Experience the ease of integrating AI into your applications with React 19's useActionState, Server Functions and the Vercel AI SDK.

What we'll build

We'll create a form that allows users to paste an e-commerce product review to get insights on sentiment and key themes.

What you'll learn

By the end of this tutorial, you'll learn how to integrate AI capabilities into your Next.js applications using the Vercel AI SDK. You'll discover how to make AI calls that return structured JSON responses and handle them seamlessly on the server side. The Vercel AI SDK allows you to use a wide range of AI models from different providers using the same API, which you'll learn to implement.

You'll also gain hands-on experience with modern React patterns, including React Server Functions and the useActionState hook for efficient form state management. Plus, you'll learn how to implement robust server-side validation using Zod to ensure data integrity.

For styling, we'll use Tailwind CSS to ensure our app is visually appealing and responsive.

Project Setup

To get started, create a new Next.js project with the required dependencies. Open a terminal and navigate to your desired folder, then enter the following commands:

npx create-next-app@latest review-analyser --typescript --tailwind --app --eslint --src-dir --turbopack --no-import-alias
cd review-analyser
npm install ai zod @ai-sdk/openai

Open the created review-analyser folder in your preferred code editor.

Environment Configuration

We'll utilise OpenAI's GPT-4o mini model for our review analysis functionality. Securely store your OpenAI API key as an environment variable by creating a .env.local file in your project's root directory with the following content:

OPENAI_API_KEY=your_openai_api_key_here

Building the Server Function

Begin by creating a new file at src/actions/analyse-review.ts to define our Server Function. Add the following code to get started:

"use server";

import { generateObject } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";

const reviewAnalysisSchema = z.object({
  sentiment: z.enum(["positive", "negative", "mixed"]),
  categories: z.object({
    product_quality: z.enum(["good", "bad", "neutral"]),
    shipping: z.enum(["good", "bad", "neutral"]),
    customer_service: z.enum(["good", "bad", "neutral"]),
    value_for_money: z.enum(["good", "bad", "neutral"]),
  }),
  summary: z.object({
    main_complaint: z.string().optional(),
    main_praise: z.string().optional(),
    recommendation: z.string(),
  }),
});

export type ReviewAnalysis = z.infer<typeof reviewAnalysisSchema>;

type AnalyseReviewState = {
  success: boolean;
  errors?: string[];
  result?: ReviewAnalysis;
  loading?: boolean;
  content?: string;
};

The "use server" directive ensures that all exported functions in this file are Server Functions, so the code runs exclusively on the server rather than the client.

We import the openai models for our AI requests, generateObject from the ai package to handle the AI call, and the zod package for schema validation. These server-side packages are never bundled into the client, keeping the client-side bundle lightweight and efficient.

The reviewAnalysisSchema is a Zod schema that specifies the expected structure of the AI response from OpenAI. It captures both the overall sentiment and category-specific sentiments, as well as a summary with the main complaint, main praise, and a recommendation.

The AnalyseReviewState type defines the complete state for the form, including whether the submission was successful, any validation errors, the analysis result, and the original content to ensure it isn't lost after submission.

Implementing the Server Function

Now, let's start to write the Server Function:

export async function analyseReview(
  _: AnalyseReviewState,
  formData: FormData
): Promise<AnalyseReviewState> {
  try {
  } catch {
    return {
      success: false,
      errors: [
        "An error occurred while analysing the review. Please try again.",
      ],
      content: "",
    };
  }
}

The analyseReview Server Function accepts two parameters: the previous state (unused, hence named _) and the FormData object containing the form submission. Wrapping the logic in a try-catch block ensures that any unexpected errors are gracefully handled, returning a consistent failure state to the client.

Validating Review Content

Next, we'll get and validate the review content:

export async function analyseReview(
  _: AnalyseReviewState,
  formData: FormData
): Promise<AnalyseReviewState> {
  try {
    const content = formData.get("content");

    const validationResult = z
      .string()
      .min(3, "Review content must be at least 3 characters long")
      .max(4000, "Review content must be less than 4000 characters")
      .safeParse(content);

    if (!validationResult.success) {
      return {
        success: false,
        errors: validationResult.error.errors.map((err) => err.message),
        content: typeof content === "string" ? content : "",
      };
    }

    const parsedContent = validationResult.data;
  } catch {
    ...
  }
}

First, we extract the content field value from the form using FormData.get. Next, we validate this value with a Zod schema, which enforces a minimum length of 3 characters and a maximum of 4000 characters. If validation fails, we return a failure state.

Making the AI Call

Next, we'll invoke the AI model to analyse the review:

export async function analyseReview(
  _: AnalyseReviewState,
  formData: FormData
): Promise<AnalyseReviewState> {
  try {
    ...
    const { object } = await generateObject({
      model: openai("gpt-4o-mini"),
      schema: reviewAnalysisSchema,
      prompt: `Analyse this customer product review and categorise it according to the specified schema.

        Customer Review: "${parsedContent}"

        Please analyse the review and provide:

        1. Overall sentiment (positive, negative, or mixed)
        2. Category ratings for:
           - product_quality: How the customer feels about the product quality (good/bad/neutral)
           - shipping: Their experience with shipping and delivery (good/bad/neutral)
           - customer_service: Their experience with customer service (good/bad/neutral)
           - value_for_money: Whether they think it's worth the price (good/bad/neutral)
        3. Summary including:
           - main_complaint: The primary issue mentioned (if any)
           - main_praise: The main positive aspect highlighted (if any)
           - recommendation: One sentence business action for improvement

        If a category is not mentioned in the review, mark it as "neutral".
      `,
    });

    return {
      success: true,
      result: object,
      content: typeof content === "string" ? content : "",
    };
  } catch {
    ...
  }
}

The generateObject function from the Vercel AI SDK enables type-safe AI responses by requiring a schema that specifies the expected output format. By supplying our reviewAnalysisSchema Zod schema, we guarantee that the AI's response adheres to our defined structure. This function leverages the gpt-4o-mini OpenAI model and uses a comprehensive prompt to guide the review analysis.

Under the hood, generateObject calls Open AI using the key defined in our OPENAI_API_KEY environment variable. This key isn't leaked into any client-side JavaScript because this function only exists on the server.

Creating the Review Analyser Form Component

Begin by creating a new file at src/components/review-analysis-form.tsx and add the following code:

"use client";

import { useActionState } from "react";
import { analyseReview } from "@/actions/analyse-review";
import { ReviewAnalysisDisplay } from "./review-analysis-display";

export function ReviewAnalysisForm() {}

The "use client" directive designates this component as a Client Component, which is necessary because we utilise the useActionState hook here. Alongside this, we import our server-side function analyseReview and a child component named ReviewAnalysisDisplay (which we'll implement shortly).

By referencing the server function directly in client-side code, we benefit from full type safety—hovering over the function reveals its signature—making for an excellent developer experience.

Using the `useActionState` Hook

Next, we'll use the useActionState Hook, which will manage all of the form state for us, both on the client and in the Server Function.

export function ReviewAnalysisForm() {
  const [state, formAction, isPending] = useActionState(analyseReview, {
    success: false,
  });
}

The useActionState hook takes two parameters:

The server function to execute on form submission—in this case, analyseReview.
The initial state object, which sets the default values before any action occurs. Here, we start with { success: false }.

When called, useActionState returns a tuple with three elements:

state: Represents the latest state returned by the server function. Initially, this is the default state, but after submitting the form, it updates to include the result from analyseReview, such as the success flag, enhanced content, or any errors.
formAction: A function intended for the form’s action attribute. Submitting the form triggers this function, which serialises the form data, invokes the server function, and manages state updates automatically.
isPending: A boolean indicating whether the server function is currently running. It’s true while awaiting a response, enabling you to show loading indicators, disable the submit button, or provide feedback during processing.

Rendering the Form

Next, we will render the form:

export function ReviewAnalysisForm() {
  const [state, formAction, isPending] = useActionState(...);
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      <div className="text-center">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          Product Review Analyser
        </h1>
        <p className="text-gray-600 max-w-2xl mx-auto">
          Paste a customer review to get insights on sentiment, key
          themes, and actionable recommendations for your business.
        </p>
      </div>

      <form action={formAction} className="space-y-6">
        <div>
          <textarea
            id="content"
            aria-label="Customer review content"
            name="content"
            rows={8}
            className={`w-full px-4 py-3 border-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-blue-600 ${
              state.errors ? "border-red-500" : "border-gray-300"
            }`}
            placeholder="Customer Review"
            disabled={isPending}
            defaultValue={state.content ?? ""}
          />
          {state.errors && (
            <p className="mt-1 text-sm text-red-600">
              {state.errors.join(". ")}
            </p>
          )}
        </div>

        <button
          type="submit"
          disabled={isPending}
          className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
        >
          {isPending ? (
            <span className="flex items-center justify-center">
              Analysing Review...
            </span>
          ) : (
            "Analyse Review"
          )}
        </button>
      </form>
    </div>
  );
}

The form includes a textarea for users to input review content and a submit button. The action attribute is linked to formAction from the useActionState hook, which triggers the analyseReview Server Function when the form is submitted.

While the form is submitting, indicated by the isPending flag from useActionState, both the textarea and submit button are disabled to prevent further input.

The textarea's defaultValue is set from the form state's content property, ensuring that user input is retained if validation fails.

If there are validation errors, they are shown below the textarea using the errors array from the form state.

Displaying Review Analysis

Lastly, we will render the review analysis in a child of ReviewAnalysisForm:

export function ReviewAnalysisForm() {
  const [state, formAction, isPending] = useActionState(...);
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      <div className="text-center">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          Product Review Analyser
        </h1>
        <p className="text-gray-600 max-w-2xl mx-auto">
          Paste a customer review to get insights on sentiment, key themes, and
          actionable recommendations for your business.
        </p>
      </div>
      <form action={formAction} className="space-y-6">...</form>

      {state.success && state.result && (
        <ReviewAnalysisDisplay
          analysis={state.result}
        />
      )}
    </div>
  );
}

ReviewAnalysisDisplay is only rendered if the form success state is true and we have some enhanced content. The analysis result is passed to ReviewAnalysisDisplay.

Begin to implement ReviewAnalysisDisplay by creating a new file at src/components/review-analysis-display.tsx and add the following code:

Here's the definition for ReviewAnalysisDisplay:

import { type ReviewAnalysis } from "@/actions/analyse-review";

export function ReviewAnalysisDisplay({
  analysis,
}: {
  analysis: ReviewAnalysis;
}) {
  return <div className="space-y-6"></div>;
}

We've used the ReviewAnalysis type from the analyseReview server function as the props for the ReviewAnalysisDisplay component.

Render the overall sentiment:

export function ReviewAnalysisDisplay( ... ) {
  return (
    <div className="space-y-6">
      <div
        className={`border rounded-lg p-4 ${getSentimentColor(
          analysis.sentiment
        )}`}
      >
        <div className="flex items-center gap-3">
          <h3 className="text-lg font-semibold">Overall Sentiment:</h3>
          <div className="text-lg font-bold capitalize">
            {analysis.sentiment}
          </div>
        </div>
      </div>
    </div>
  )
}

const getSentimentColor = (sentiment: string) => {
  switch (sentiment) {
    case "positive":
      return "text-green-800 bg-green-50 border-green-200";
    case "negative":
      return "text-red-800 bg-red-50 border-red-200";
    case "mixed":
      return "text-yellow-800 bg-yellow-50 border-yellow-200";
    default:
      return "text-gray-800 bg-gray-50 border-gray-200";
  }
};

Render the category analysis beneath the overall sentiment:

export function ReviewAnalysisDisplay( ... ) {
  return (
    <div className="space-y-6">
      ...
      <div className="bg-white border border-gray-200 rounded-lg p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">
          Category Analysis
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {Object.entries(analysis.categories).map(([category, rating]) => (
            <div
              key={category}
              className={`p-3 rounded-md border ${getCategoryColor(rating)}`}
            >
              <div className="flex items-center justify-between">
                <span className="font-medium capitalize">
                  {category.replace("_", " ")}
                </span>
                <div className="flex items-center gap-1">
                  <span>{getCategoryIcon(rating)}</span>
                  <span className="text-sm font-medium capitalize">
                    {rating}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const getCategoryColor = (rating: string) => {
  switch (rating) {
    case "good":
      return "text-green-700 bg-green-100";
    case "bad":
      return "text-red-700 bg-red-100";
    case "neutral":
      return "text-gray-700 bg-gray-100";
    default:
      return "text-gray-700 bg-gray-100";
  }
};

const getCategoryIcon = (rating: string) => {
  switch (rating) {
    case "good":
      return "👍";
    case "bad":
      return "👎";
    case "neutral":
      return "➖";
    default:
      return "➖";
  }
};

Lastly, render the insights under the category analysis:

export function ReviewAnalysisDisplay( ... ) {
  return (
    <div className="space-y-6">
      ...
      div className="bg-white border border-gray-200 rounded-lg p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">
          Key Insights
        </h3>
        <div className="space-y-4">
          {analysis.summary.main_praise && (
            <div className="p-4 bg-green-50 border border-green-200 rounded-md">
              <h4 className="font-medium text-green-900 mb-2">Main Praise</h4>
              <p className="text-green-800">{analysis.summary.main_praise}</p>
            </div>
          )}

          {analysis.summary.main_complaint && (
            <div className="p-4 bg-red-50 border border-red-200 rounded-md">
              <h4 className="font-medium text-red-900 mb-2">Main Complaint</h4>
              <p className="text-red-800">{analysis.summary.main_complaint}</p>
            </div>
          )}

          <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
            <h4 className="font-medium text-blue-900 mb-2">
              Business Recommendation
            </h4>
            <p className="text-blue-800">{analysis.summary.recommendation}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

Main Page Component

Our final coding task is to update app/page.tsx to use our form component. Replace the existing content with the following:

import { ReviewAnalysisForm } from "@/components/review-analysis-form";

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50 py-8">
      <ReviewAnalysisForm />
    </main>
  );
}

Running the Review Analyser

In a terminal, run the following command to start the app:

npm run dev

Navigate to http://localhost:3000 and enter review:

Prior to submitting the form, open your browser’s DevTools and navigate to the Network tab. After submitting the form, you’ll see the analysis results displayed.

When you submit the form, notice that a network request is made—a POST request sent to the root URL. The payload contains both the form field values and metadata specifying which Server Function should be executed, all organised as FormData.

The server responds using a streaming protocol, where each line corresponds to an individual data chunk. The first line (line 0) contains metadata, such as a pointer to the Server Function, while the second line (line 1) holds the actual response data.

Conclusion

This guide walked through building an AI-powered review analyser leveraging the latest features in React 19. By combining Server Functions, server-side validation, and the Vercel AI SDK, you gain a streamlined development workflow with simplified form management, automatic state handling, and type-safe AI integration—all without the complexity of traditional client-server coordination.

Autonomous AI Coding Agents - Boosting Developer Productivity

Carl — Fri, 18 Jul 2025 03:55:07 +0000

Recently, I've discovered something that has completely changed how I think about AI-assisted development: the most productive AI coding experience isn't necessarily the one where you're constantly interacting with an AI assistant. It's the one where AI works autonomously while you focus on other tasks.

What Are Autonomous Coding Agents?

Until recently, most of my AI-assisted code was written by a supervised coding agent, Cursor. Autonomous coding agents are very different:

They work in the background, unsupervised.
They operate in the cloud rather than locally in your IDE or terminal.

I've used Devin, OpenAI Codex, Google Jules, and, more recently, Cursor background agents.

Initial Skepticism

AI tools like Cursor and GitHub Copilot revolutionized my coding speed. I was amazed, firstly, by the super-smart autocomplete and then again when supervised agents were able to make robust code changes that I requested. I especially love asking the agent to make UI changes and, seconds later, seeing the changes in real-time, allowing for quick iterations. I felt so much faster than I did a year ago because of the ability to quickly translate my thoughts into working code.

Devin was the first autonomous coding agent I used, and I was skeptical. My initial thought was: "Why would I want this? It's much slower and far more expensive than Cursor?" This was back in March 2025—the pricing has changed quite a bit since then!

I initially dismissed Devin because I was thinking about it incorrectly. Firstly, I assumed I needed to sit there and hand-hold it, essentially making it a slow, interactive tool. I then tried giving Devin a couple of large, meaty tasks—my thinking was that it needed to do something significant if I was going to leave it for an hour or so. Obviously, this approach didn't work out well.

The breakthrough came when I realised that background agents aren't about speeding up your current workflow—they're about parallel processing.

How Autonomous Coding Agents Increase Productivity

The key insight for me was shifting from thinking about speed to thinking about throughput. Yes, watching Devin implement a feature takes longer than doing it myself with Cursor. But here's what I was missing: while Devin works on Task A, I can be productive on Task B using the Cursor supervised agent. Even if the tasks given to an autonomous agent are simple, small tasks, parallelization can significantly increase productivity.

It's not about individual task speed—it's about getting multiple things done simultaneously.

This realization was a powerful productivity multiplier.

What Types of Tasks to Give to Autonomous Coding Agents

As you can see from the diagram above, I still need to do some work on tasks I give to autonomous coding agents:

I spend time constructing a clear, thorough prompt for the task.
I spend time reviewing and testing the code.

To gain a good productivity boost, the agent needs to complete the task in one shot. Time spent tweaking the generated code or re-prompting hurts productivity.

The tasks need to be small and simple. They are usually straightforward changes I could make if I had the time. Usually, I'll have a decent idea of where the code changes need to be made. So, a lot of the time, the tasks are simple features or fixes. Small code refactoring and documentation are also good autonomous tasks.

An interesting process side effect of using autonomous coding agents is when you find a bug while working in a different area of an app—instead of backlogging it, you just ask an autonomous coding agent to fix it. No more endless backlogs!

What Not to Give Autonomous Coding Agents

As mentioned before, I avoid complex tasks that can't be done in one shot. Tasks that need research or in-depth thinking, I'll keep for myself, asking an AI tool questions where needed.

Personally, being frontend-focused, when building new screens, I like to start the UI work myself with a supervised agent. I like to quickly iterate until the screen looks and feels right. Once the basics of the screen are in place, I'm happy to hand off to an autonomous agent to do minor UI work.

Maximising Throughput

The autonomous coding agents work in an environment in the cloud. For maximum impact, the environment should be set up like your local environment—this not only includes the code but any tools such as local databases and services. For complex apps, this can take time, but it's worth it. The environment persists as well—there is no need to do the setup before each task.

The reason for the setup is so that the autonomous coding agent can execute a build, perform linting checks, and run tests—it can even run the app. Just like a human developer, the autonomous coding agent will want to do these operations to validate the changes it makes. If something fails, it'll dig into the problem and try to resolve it, adjusting the code. So, linting and a solid test suite help the autonomous coding agent be successful.

Another way to maximise throughput is to avoid parallel tasks in the same area of code; otherwise, you end up spending time dealing with merge conflicts. I usually mentally assign agents to areas of code and give them tasks in those areas, just like a human team would organise themselves.

When I set the agent off, I usually watch it for a minute to see if it has any questions or is confident enough to do the task. I love Devin's confidence rating—when I see that green circle, I know it's safe to leave it to complete the task.

While the autonomous coding agent is working away, I do my best to keep it out of my mind and focus on my task. I want to avoid expensive context switching.

When I've finished my task, I'll review and test an autonomous coding agent's task. Usually, I'll be creating and merging the PR. Occasionally, I will make some minor adjustments. I rarely abandon the PR. Code changes or abandonment obviously reduce throughput.

I'm finding I'm using 2 or 3 autonomous coding agents in parallel. This allows me time to carry out a complex task or some research. You can probably have more parallel tasks if all the coding tasks are straightforward without any research needed—you'll then be spending all your time defining, reviewing, and testing tasks.

Why Aren't More Developers Using Autonomous Coding Agents?

Devin's been around for a while, but it was expensive. I was lucky to use it at work. Devin's also built by Cognition, a startup rather than a household name. I'm not sure about their marketing as well—to me, the tool comes across as a developer replacement, which obviously won't appeal to many developers!

OpenAI Codex, Google Jules are newer, and Cursor's background agent is even newer. So, I don't think autonomous coding agents have had time to really catch on yet.

Lastly, developers may misunderstand the value of autonomous agents like I initially did, missing the key point about getting work done in parallel.

Which One Should I Use?

I've had a lot of success with Codex and Devin. Cursor's background agent seems good as well, but I've not used it as much because it hasn't been around long.

The only one that didn't work well was Google Jules, but that was a couple of months ago, and I've not tried it recently. You can't argue with free, though!

Speaking of pricing, they're all currently pretty affordable. At the time of writing this post:

If you're on Chat GPT Plus ($20 PM), you get access to Codex.
Devin now starts at $20, and you can get $75 of credits free to celebrate the Windsurf acquisition.
Cursor's background agent is included in Cursor Pro ($20 PM). You'll need to keep within the usage allowance, though.
Google Jules is free as it's still in beta.

I'd encourage you to give some of these a try and see if they make you more productive.

Writing Better Instructions for Cursor

Carl — Tue, 01 Jul 2025 03:53:28 +0000

One of the most important things when using AI to generate code is the prompt you give it. A bad prompt can lead to the wrong code being generated and hours spent reprompting or manually investigating and fixing code. A good prompt leads to the correct code being generated with you only needing to review and test.

I've been using Ryan Carson's Cursor rules to help create a clear task list for the features I work on. That task list then forms a series of well-structured prompts you can give to AI to gradually implement the feature step by step. You're front-loading the work and slowing down the start of the development process to be much faster at the end.

This process works particularly well on large, complex, or unique features that AI will struggle to "one-shot". It adds structure to the process, allowing you to manually review and test code at appropriate times. The process adds reliability for large features because it's broken down into small chunks that AI has a good chance of getting right.

An example

I recently used this process to create a person card web component like this:

I did try to "one-shot" this including the UI mockups as images, but it didn't get close. It struggled particularly around keyboard accessibility in the menu. Reprompting made things worse - I ended up spending lots of time without getting very far. I needed a more structured approach.

Adding the Cursor rules

To add Ryan Carson's Cursor rules to a project, create a .cursor folder in the project root and copy and paste the 3 rules (.mdc files) from the GitHub repository into it. I have the Rule Type set to Manual so that I explicitly need to mention it in a prompt to use it.

Creating the PRD

A PRD is a Product Requirements Document that outlines the functional and non-functional requirements for the person card web component in this case. Creating the PRD is the first step in the process.

You don't have to write the PRD yourself. AI can do the heavy lifting - you just need to provide a couple of sentences to kick things off using the create-prd Cursor rule. This was my prompt to start the PRD creation process:

using @create-prd.mdc create a PRD for a reusble person card web component.
There are UX mocks of the card in the @ux-mocks folder.

You don't have to be very specific because AI will ask you questions to firm up the requirements:

You can reference the question numbers in the reply - here was mine:

1. Name, role, status, email, when joined, location. Card is interactive - view profile button + actions on a menu
2. Some of the uses cases are as you suggest. For internal staff
3. Vanilla web component. All major browsers. Not themable. Fixed size
4. Menu should be triggered using click/Enter and arrow keys should move through menu items. Should be positioned in the card at the top right. Menu should close when click outside or ESC
5. Aria labels, keyboard support, screen reader support
6. Use plain css for styling. No variants. Use shadow dom to isolate styles

AI goes off and creates the PRD in markdown format in the tasks folder.

You can then manually tweak the PRD if necessary or even reprompt AI to make changes. It's important that the PRD is very clear on what you want done.

I was satisfied with what it generated and ready to move on to the task list generation.

Generating the task list

You then get AI to generate a task list using the generate-tasks Cursor rule.

I did this in a new chat thread. This was my prompt:

Generate tasks for @prd-person-card-component.md using @generate-tasks

AI generates tasks and asks whether to generate subtasks. I just typed "go" and it completed the task list, creating a new markdown file in the tasks folder.

You can tweak the task list or ask AI to make changes. I removed tasks around documentation and a showcase page which I didn't require at this stage. I also wanted to be specific about using Vitest and DOM Testing Library for unit tests.

You can see my task list in the GitHub repository at: https://github.com/carlrip/card-with-menu/blob/main/tasks/tasks-prd-person-card-component.md.

I like having the checkboxes and the task list in the source code so it can be used to track progress. Obviously when the feature is done the task file and PRD can be deleted, but it's useful to keep them to refer to if there are any future questions.

With a clear task list in place, I was now ready for AI to help me write the code.

Processing tasks

The process-task-list Cursor rule helps implement the code for each task. The rule also tells AI mark complete and move to task next after confirmation from you. Here was my prompt:

Using @process-task-list, start processing tasks-prd-person-card-component.md.
Do only the first subtask and wait for me to review before continuing.

Even though the Cursor rule says "One subtask at a time" I find I need to remind AI of this - hence the second sentence in the prompt. You can also just hit the Stop option in Cursor if you see it doing more than it should be doing.

I find it important to review and test the code after each subtask. The code can be tested before the change is accepted. The code can also be tweaked if necessary - manually or via an AI prompt.

Taking the time to review and test the code after each subtask may seem overkill but it helps catch AI going a little off track and enables you to understand the generated code. There's an urge to just move on to the next subtask, but resisting this will likely mean you complete the feature more efficiently.

Here are a couple of prompts for changes in the early tasks:

- Use proper private members instead of TS ones
- Use arrow functions to avoid the "this" problem in the WC class
- Use :focus-visible rather than :focus for focus indicators

It's worth noting that these code preferences can be added to Cursor rules. I don't write many web components, so I didn't have anything in place.

Sometimes AI doesn't mark the subtask as complete but a quick "Mark 1.1 as complete" prompts it to do so.

When I'm ready to move to the next subtask, I prompt "Move to the next subtask" in the same thread, even if you've prompted for code changes after the previous subtask.

I generally complete all the subtasks in a single thread and start a new thread for a new task. Here was my prompt to start the 2nd task:

Using @process-task-list, carry on processing tasks-prd-person-card-component.md on task 2 subtask 2.1.
Allow me to review before continuing.

As I move through the tasks, you may find some that are already partially or fully complete. I found this with "Task 2.4 Implement menu item actions by dispatching custom events". AI reworked the code to use an event handler for each menu item rather than a single one. So, I prompted:

The previous implementation is fine - a single event with the option name in the event data

AI agreed and gave the reason (simpler code, consistent API, flexible). This gave me confidence in my judgement.

So, it's even more important to thoroughly review and test the code through the final steps to avoid unnecessary code being added.

Towards the end of the task list I adjust my task kickoff prompt to the following to get AI to think about the possibility of the task already being completed:

Using @process-task-list, carry on processing tasks-prd-person-card-component.md on task X subtask X.1.
Allow me to review before continuing.
You may find a subtask is already completed, so only make changes if necessary and can make improvements.

AI did make some useful improvements to subtasks that were already partially complete. For example:

Smooth transitions for focus/hover states
Using more semantic HTML
High contrast mode support
Addition of a component initialised event

Wrap up

Overall, it took me a couple of hours to build the person card component using this approach. The process wasn't perfect - it did go off track a few times. However, getting it back on track was quick because the iterations are small and very focused.

I'm going to continue to use this process for work that won't "one-shot". I'd encourage you to give it a try. Maybe this kind of flow will be a feature built into Cursor one day?

Here's the link to the GitHub repository containing the generated person card: https://github.com/carlrip/card-with-menu.

When to use AI to generate code

Carl — Wed, 18 Jun 2025 16:58:00 +0000

Originally published at carlrippon.com

The rise of AI coding tools has fundamentally changed how I approach software development. I've been thinking a lot about when I should and shouldn't use AI to generate code. Here's what I've figured out so far...

Three key questions

Before reaching for AI to generate code, I ask myself: will it save me time? When AI generates code, I still need to review it and tweak it if something's wrong. I also need to test it, debug it, and fix any issues that come up. Plus, there's the ongoing maintenance to consider. All of this factors into the time equation.

Do I think AI will nail the task (or get close)? If not, I might spend a lot of time debugging and adjusting the code. While AI can often make adjustments itself when given the problem information, sometimes it goes in circles and never quite gets there.

What's the risk profile for the code? What could happen if the generated code has security vulnerabilities, performance issues, or bugs in mission-critical areas?

Where AI code generation seems to work well

From my experience, AI code generation has been pretty reliable for these types of tasks:

Boilerplate / repetitive code - like managing field values and errors in a form
Refactoring code - such as extracting code from large files
Implementing tests - generating test cases with mock data
Documentation - like Docusaurus or Storybook docs for React components. AI seems particularly good at explaining components and their props
Comments - especially JSDoc comments for reusable React components & hooks

When starting to write boilerplate/repetitive code, I'm finding Cursor reads my mind and offers autocomplete. I still find this freaky!

Using AI for features I'm confident about implementing

This might sound counterintuitive, but I've found a sweet spot in using AI to generate code I'm very confident about writing myself. This works well because I can write a solid prompt that includes what to include and what to avoid. I'm also confident that I can quickly review the generated code since I already have it visualized in my head. AI can generate the code much faster than I can type it.

Using AI for features I don't know how to implement

Let's face it - I don't know everything! Sometimes I'm uncertain about how to implement a feature, or I'm not sure where to start.

I use AI to help remove that uncertainty. It's become an efficient way for me to learn new things.

If I'm still uncertain, I'll ask a human. I won't implement a feature without being certain about the implementation - whether it's AI-generated or not.

Once I've removed the uncertainty about the implementation, I'll use AI to generate the code.

Using AI with extra care

These days I use AI heavily, even in sensitive areas. However, I've developed some additional safeguards and validation processes.

Security-critical code

For non-trivial features, I usually create a task list that I'll eventually give to an AI tool. When security is critical, I ask AI about security concerns and best practices for the feature and include these in the task list. I take the time to understand what needs to be done from a security perspective, asking AI more questions if needed. I also ask a security expert to review the tasks to spot any flaws or suggest better approaches.

With a comprehensive task list, I let AI generate the code, task by task.

As usual, I review the code and manually test it. I also get a security expert to review and test it. We still do penetration testing as well.

Other critical code

Code can be critical in other ways. For example, a feature's performance might be critical, or it might be a mission-critical feature in a complex part of an app.

I follow the same process as for security-critical code:

Use AI to form a comprehensive task list that I understand
Let AI generate the code, task by task
Thoroughly review and test the code, bringing in an expert for additional review and tests

When AI generates code I don't understand

When reviewing AI-generated code, sometimes I don't fully understand it. In these cases, I ask AI to explain the code (often it does anyway). I keep asking questions until I fully understand - it's a great learning opportunity.

When I disagree with the implementation, I ask AI "What about X? Do you think Y would be better?" This often triggers AI to suggest a slightly different implementation, or it might reveal a misunderstanding on my part. Either way, I need to be comfortable with the implementation.

AI struggles with using new frameworks and libraries

I've noticed that AI tools currently struggle with Tailwind 4. They seem to default to using Tailwind 3, and even if you include v4 in the prompt, they sometimes get confused and generate a mixture of v3 and v4 code. I often need to step in, which slows down the development process. I am, of course, adding rules/knowledge into the AI tools to mitigate this, but I'm finding I'm also avoiding upgrading to the latest framework & library major versions immediately and waiting a few months for AI to gain the necessary knowledge.

I'm also leaning toward popular frameworks rather than new ones, even if I think they might be technically better - for example, I'm choosing Next.js over TanStack Start until TanStack Start gets more traction (TanStack Start is great, by the way!). The popularity of a library/framework has always been important to me, but it's even more crucial now.

Skill & experience considerations

As an experienced engineer, I use AI a lot to generate code. However, I think it's great for more inexperienced engineers too - as long as they take the time to ask AI questions about the generated code to understand it and ultimately own it. It's a really efficient way to learn. The learning process means inexperienced engineers will be slower than experienced ones, but they'll level up quickly.

I think it's trickier for non-professional engineers who aren't motivated to understand the code. The "risk" question is really important here. Personally, I wouldn't want to build apps for other people to use if there are security issues that could negatively impact them.

The bottom line

AI does write most of my code now, with well thought through tasks and guard rails applied for riskier code. I think the key is knowing when to slow down and apply those guard rails.

I'm surprised by how much I'm enjoying this approach, given that I've loved coding from a young age. I'm finding it frees me up to focus on the creative, complex, and critical aspects of software development that require human expertise.

Also, things will probably continue to change rapidly - my thoughts and approach might be completely different next week!

React Context with TypeScript: Part 4 - Creating a context with no default and no undefined check

Carl — Wed, 11 Mar 2020 04:59:45 +0000

This is the final post in a series of posts on React context with TypeScript. In the previous post, we consumed a context in a class component. In this post, we will learn how to create a context without having to pass a default and then do any undefined checks when consuming it.

Part 1 - Simple context with function components
Part 2 - Complex context with function components
Part 3 - Context with class components
Part 4 - Creating a context with no default and no undefined check (this post)

The problem

The type for createContext requires a default value to be passed into it, but often it doesn't make sense to pass a default. So, we end up passing undefined as the default:

const ThemeContext = React.createContext<
  ThemeContextType | undefined
>(undefined);

... and then checking for undefined everywhere we consume it:

const { theme, setTheme } = useTheme()!;

Creating a wrapper for creating a context

A solution is to create a wrapper around createContext that deals with the default and the undefined check:

export function createCtx<ContextType>() {
  const ctx = React.createContext<
    ContextType | undefined
  >(undefined);
  function useCtx() {
    const c = React.useContext(ctx);
    if (!c)
      throw new Error(
        "useCtx must be inside a Provider with a value"
      );
    return c;
  }
  return [useCtx, ctx.Provider] as const;
}

This function first creates the context with the generic type passed into it with undefined as its default value.

A nested function is then defined, which wraps the useContext hook. A variable c is assigned to the return value of the useContext hook which is the generic type passed in or undefined:

We then throw an error if c is falsy, which deals with the undefined check. This means that when c is returned from the nested function, it can't undefined and is only the generic type we passed in:

Notice also we use a const assertion (as const) on the last line to ensure TypeScript infers a tuple type rather than an array of union types.

Creating a context

We can now use our createCtx function to create a context rather than React's createContext:

const [useTheme, CtxProvider] = createCtx<
  ThemeContextType
>();

Creating a provider

Our createCtx function returns a tuple, which contains a provider component in the second element (CtxProvider). We can the create our specific provider component containing our required state:

export const ThemeProvider = ({
  children
}: Props) => {
  const [theme, setTheme] = React.useState(
    "white"
  );
  ...
  return (
    <CtxProvider value={{ theme, setTheme }}>
      {children}
    </CtxProvider>
  );
};

This can then be placed at the appropriate position in the component tree:

export const App = () => (
  <ThemeProvider>
    <Header />
  </ThemeProvider>
);

Consuming the context

Our createCtx also returns a hook (useTheme) in the tuples first element. We can use this without having to do any undefined checks:

const Header = () => {
  const { theme, setTheme } = useTheme();
  return (
    <div style={{ backgroundColor: theme }}>
      <select
        value={theme}
        onChange={e =>
          setTheme(e.currentTarget.value)
        }
      >
        <option value="white">White</option>
        <option value="lightblue">Blue</option>
        <option value="lightgreen">Green</option>
      </select>
      <span>Hello!</span>
    </div>
  );
};

Neat!

A full working implementation is available by clicking the link below. Give it a try and change the theme value and see the background change color.

Open full implementation

Wrap up

The createCtx function is a generic function that can be used to create contexts for many situations. It simplifies consuming code because checks for undefined are not necessary.

That concludes this series of posts on React context with TypeScript. I hope you enjoyed it!

Originally published at https://www.carlrippon.com/react-context-with-typescript-p4/ on Mar 10, 2020.

React Context with TypeScript: Part 3 - Context with class components

Carl — Wed, 04 Mar 2020 04:21:21 +0000

This is another post in a series of posts on React context with TypeScript. In the previous post, we created a complex context and consumed it in a function component.

Part 1 - Simple context with function components
Part 2 - Complex context with function components
Part 3 - Context with class components (this post)
Part 4 - Creating a context with no default and no undefined check (coming soon ...)

In this post, we will learn about using React context with class components.

Trying to use the context hook in a class component

We are going to continue using the context we created in the last post that allows consumers to share and set a theme. Let's update the Header component to be a class component:

class Header extends React.Component {
  render() {
    const { theme, setTheme } = useTheme()!;

    return (
      <div style={{ backgroundColor: theme }}>
        <select
          value={theme}
          onChange={e => setTheme(e.currentTarget.value)}
        >
          <option value="white">White</option>
          <option value="lightblue">Blue</option>
          <option value="lightgreen">Green</option>
        </select>
        <span>Hello!</span>
      </div>
    );
  }
}

There is a problem with this implementation, though:

Hooks can only be called inside function components, so, the above code will error on the following line:

const { theme, setTheme } = useTheme()!;

Using the `context` property

React class components have a context property that we can use to consume a context. First, we need to tell the class what context it should use with a static contextType property, and then we can access the context property:

class Header extends React.Component {
  static contextType = ThemeContext;

  render() {
    const { theme, setTheme } = this.context!;

    return (
      ...
    );
  }
}

Notice that we put an exclamation mark(!) after the context property to tell the TypeScript compiler that it isn't undefined.

Let's see what types theme and setTheme been inferred as:

Both theme and setTheme has been inferred to have the any type.

Explicitly setting the type for the `context` property

At the moment, the consumed context isn't strongly-typed. We can explicitly define the classes context property with a type annotation to make it strongly-typed:

class Header extends React.Component {
  static contextType = ThemeContext;
  context: React.ContextType<typeof ThemeContext>;

  render() {
    const { theme, setTheme } = this.context!;

    return (
      ...
    );
  }
}

Notice that we don't use React.ContextType<ThemeContextType> as the type annotation for the context property because we get a type error if we do so.

A full working implementation is available by clicking the link below. Give it a try and change the theme value and see the background change color.

Open full implementation

Using the `Consumer` component

There is an alternative approach to consuming a context in a class component if we just need access to it in the JSX. This method is to use the contexts Consumer component:

class Header extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {value => (
          <div style={{ backgroundColor: value!.theme }}>
            <select
              value={value!.theme}
              onChange={e => value!.setTheme(e.currentTarget.value)}
            >
              <option value="white">White</option>
              <option value="lightblue">Blue</option>
              <option value="lightgreen">Green</option>
            </select>
            <span>Hello!</span>
          </div>
        )}
      </ThemeContext.Consumer>
    );
  }
}

The child of the Consumer component is a function that has the value of the context passed into it and returns the JSX we want to render. Notice that we have put an exclamation mark (!) after we reference value to tell the TypeScript compiler that this isn't undefined.

The benefit of this approach is that the contextType static property doesn't need to be implemented. We don't need to declare the context property with its type annotation as well.

Let's check the inferred type of the value parameter in the Consumer components child function:

The type of the value parameter is ThemeContextType | undefined

Wrap up

We can use Reacts context in class components, but we can't use the useContext hook.

Using the Consumer component is a neat way of getting access to the context in the render method, which has its type inferred correctly.

The context property can be used in other lifecycle methods to get access to the context. We need to explicitly define a type annotation for the context property and specify the specific context in a contextType static property.

In the next post, we'll learn about an approach to creating a context without having to pass a default and then do any undefined checks when consuming it.

Originally published at https://www.carlrippon.com/react-context-with-typescript-p3/ on Mar 03, 2020.

React Context with TypeScript: Part 2 - Complex context with function components

Carl — Tue, 25 Feb 2020 20:45:21 +0000

This is the second post in a series of posts on React context with TypeScript. In the last post, we created a simple context where TypeScript was able to infer its type.

Part 1 - Simple context with function components
Part 2 - Complex context with function components (this post)
Part 3 - Context with class components (coming soon ...)
Part 4 - Creating a context with no default and no undefined check (coming soon ...)

In this post, we will implement a more complex context where we need to specify the context type explicitly.

Explicitly setting the context type

We are going to enhance the context from the last post so that the theme can be updated by consumers.

In the last post, the type for the context was inferred from the default value, which was a simple string. The type for our enhanced context is going to be a little more complex:

type ThemeContextType = {
  theme: string;
  setTheme: (value: string) => void;
};

So, there will be a theme property containing the current value for the theme and a setTheme method to update the current theme.

Reacts createContext function expects us to supply an argument for initial context value. We can supply a default value for the theme property, but it doesn't make sense to provide a default implementation for the setTheme method. So, a simple approach is to pass in undefined as the initial value:

const ThemeContext = React.createContext(
  undefined
);

Let's see what the inferred type is for the context value:

The type of the context value is inferred to be undefined if in strict mode or any if not.

So, ThemeContext isn't typed as we require at the moment. How can we explicitly specify the type for the context when using createContext? Well, createContext is a generic function. So, we can pass in the type for the context value as a generic parameter:

const context = React.createContext<ContextType>(...)

Therefore, we can type our context is as follows:

const ThemeContext = React.createContext<
  ThemeContextType | undefined
>(undefined);

Using the enhanced context in the provider

The modification to the context provider, from the last post, is to the value we provide from it. Instead of a simple string, it is now an object containing the theme property and the setTheme method:

export const ThemeProvider = ({
  children
}: Props) => {
  ...

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Adding an option to change the theme in the `Header` component

The useTheme custom hook remains the same as in the last post. The App component remains the same as well.

We are going to change the Header component though so that the user can change the theme:

const Header = () => {
  const { theme, setTheme } = useTheme()!;
  return (
    <div style={{ backgroundColor: theme }}>
      <select value={theme} onChange={e => setTheme(e.currentTarget.value)}>
        <option value="white">White</option>
        <option value="lightblue">Blue</option>
        <option value="lightgreen">Green</option>
      </select>
      <span>Hello!</span>
    </div>
  );
};

We destructure the current theme value as well as the setTheme method from the useTheme hook. Notice that we have put an exclamation mark (!) after the call to the useTheme hook to tell the TypeScript compiler that its return value won't be undefined.

We have also added a drop down that has options to change the theme to White, Blue, and Green. The value of the drop down is set to the current theme value, and when this is changed, it calls the contexts setTheme method to update this in the shared state.

The full implementation of the context is available by clicking the link below. Give it a try and change the theme value and see the background change color.

Open full implementation

Wrap up

Generally, we will need to create a type for a context and explicitly define the type when the context is created. Often the initial value for the context is undefined, so the context type is usually a union type that contains undefined. We need to use the non-null assertion operator (!) when referencing the context to tell TypeScript that it does have a value.

In the 4th post in this series, we will cover a way of not having to pass a default value to the context and not having to deal with it possibly being undefined. Before this, in the next post, we will learn how to consume a strongly-typed context with class components.

Originally published at https://www.carlrippon.com/react-context-with-typescript-p2/ on Feb 25, 2020.

React Context with TypeScript: Part 1 - Simple context with function components

Carl — Wed, 19 Feb 2020 04:06:55 +0000

React context allows several components in a tree to share some data. It's more convenient than passing the data via props down the component tree. How can we use TypeScript to create a strongly-typed context? Is it possible to do this for use with function components as well as class components? This is the first of four blog posts that go through this topic.

Part 1 - Simple context with function components (this post)
Part 2 - Complex context with function components (coming soon ...)
Part 3 - Context with class components (coming soon ...)
Part 4 - Creating a context with no default and no undefined check (coming soon ...)

In this post, we will create a strongly-typed React context and consume it in a function component that doesn't doesn't change the context.

Creating a context

A common use case for using context is to provide theme information to components in an app. We are going to provide a color value in a context that components can use.

Let's start by creating our theme using Reacts createContext function:

const defaultTheme = "white";
const ThemeContext = React.createContext(
  defaultTheme
);

We are required to provide a default value for the context, which in our case is "white".

The type of the context is inferred to be React.Context<string>:

Nice - exactly as we require!

Creating a Context provider

Next, we are going to create the provider component:

type Props = {
  children: React.ReactNode
};
export const ThemeProvider = ({
  children
}: Props) => {
  const [theme, setTheme] = React.useState(
    defaultTheme
  );

  React.useEffect(() => {
    // We'd get the theme from a web API / local storage in a real app
    // We've hardcoded the theme in our example
    const currentTheme = "lightblue";
    setTheme(currentTheme);
  }, []);

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

We hold the theme value in the state. This means that when it changes, React will automatically re-render the provider's children with the new theme.

We get the current theme value using Reacts useEffect hook and update the theme state value.

Out theme provider component returns the Provider component within the context with our theme value. The provider is wrapped around all the children in the component tree.

Creating a custom hook for consuming the context

We can create a custom hook that will allow function components to consume our context:

export const useTheme = () =>
  React.useContext(ThemeContext);

Let's check what the return type of useTheme has been inferred as:

The return type of useTheme is string because this is the type of the context value.

Adding the provider to the component tree

The ThemeProvider component can now be placed in an appropriate position in the component tree.

const App = () => (
  <ThemeProvider>
    <Header />
  </ThemeProvider>
);

Components below it will have access to the context, but components above it won't. So, the Header component will have access to the context.

Consuming the context

The Header component can access the context by using the useTheme hook we created. This allows the header component to render an element that has its background color set to the theme color:

const Header = () => {
  const theme = useTheme();
  return (
    <div style={{ backgroundColor: theme }}>
      Hello!
    </div>
  );
};

A working version of ThemeContext is available by clicking the link below. When the app is run, Hello will appear with a light blue background.

Open working version

Wrap up

The type for the context is inferred correctly if a sensible default is provided when it is created. If the context is providing values that consumers don't change, then this is fine. However, what if we want the user to change the theme? In this case, our context would need to provide a function for updating the theme, and this can't be provided as a default value. In the next post, we will extend our theme context so that consumers can update the value.

Originally published at https://www.carlrippon.com/react-context-with-typescript-p1/ on Feb 18, 2020.

Nullish coalescing with React and TypeScript

Carl — Wed, 12 Feb 2020 04:26:15 +0000

The last post went through how we can use optional chaining in React and TypeScript apps to shorten our code. Nullish coalescing is another excellent new JavaScript feature that helps us improve our React and TypeScript apps. Let's find out what this feature is and how it's useful in React and TypeScript apps.

A simple component

Let's start with a simple component:

type Person = {
  name: string,
  subscription?: Subscription
};
type Subscription = {
  amount: number
};
type Props = {
  person: Person
};
const PersonCard: React.FC<Props> = ({
  person
}) => {
  return (
    <div>
      <div>
        <span>Name: </span>
        <span>{person.name}</span>
      </div>
      <div>
        <span>Subscription amount: </span>
        <span>
          {person.subscription?.amount}
        </span>
      </div>
    </div>
  );
};

We are using optional chaining so that we don't get an error when rendering the subscription amount. However, let's say we want to render "No subscription" if the person has no subscription. We may use something like this:

<span>
  {person.subscription?.amount ||
    "No subscription"}
</span>

However, what if the person has a subscription, but it is free? - i.e. person.subscription.amount is 0. In this case, "No subscription" would be rendered because 0 is a falsy value.

Using nullish coalescing

A nullish coalescing approach looks very similar:

<span>
  {person.subscription?.amount ??
    "No subscription"}
</span>

Notice the nullish coalescing operator (??). This renders the right-hand operand if the left-hand operand is null or undefined. So, it's more precise than || and does precisely want we want in our case, resolving the free subscription bug.

Can I use nullish coalescing now?

Yes, if you are running recent versions of React and TypeScript:

TypeScript 3.7 supports nullish coalescing
Babel 7.8.0 supports nullish coalescing
Projects created with create react app 3.3.0 supports nullish coalescing as well!

Originally published at https://www.carlrippon.com/nullish-coalescing-with-react-and-typescript on Feb 11, 2020.

Optional chaining with React and TypeScript

Carl — Wed, 05 Feb 2020 04:18:44 +0000

Optional chaining is a cracking new JavaScript feature that we can use today in React and TypeScript apps. What is this feature, and how is it useful to React and TypeScript apps? Let's find out.

A simple component

Let's start with a simple component:

type Person = {
  name: string,
  subscription?: Subscription
};
type Subscription = {
  amount: number,
  lastPayment?: Payment
};
type Payment = {
  amount: number,
  date: Date
};
type Props = {
  person: Person
};
const PersonCard: React.FC<Props> = ({
  person
}) => {
  return (
    <div>
      <div>
        <span>Name: </span>
        <span>{person.name}</span>
      </div>
      <div>
        <span>Subscription amount: </span>
        <span>{person.subscription.amount}</span> {// 💥}
      </div>
      <div>
        <span>Last payment date: </span>
        <span>
          {person.subscription.lastPayment.date} {// 💥}
        </span>
      </div>
    </div>
  );
};

This raises type errors, Object is possibly 'undefined', because the subscription property is optional and, therefore, could be undefined. The same goes for the lastPayment property inside the subscription object:

We want to render nothing for the amount when there is no subscription. We also want to render nothing for the last payment date when there is no last payment. So, we'd usually use short-circuit evaluation:

<div>
  <span>Subscription amount: </span>
  <span>{person.subscription && person.subscription.amount}</span>
</div>
<div>
  <span>Last payment date: </span>
  <span>
    {person.subscription &&
      person.subscription.lastPayment &&
      person.subscription.lastPayment.date}
  </span>
</div>

Using optional chaining on optional props

Optional chaining gives us a much simpler and shorter solution:

<div>
  <span>Subscription amount: </span>
  <span>{person.subscription?.amount}</span>
</div>
<div>
  <span>Last payment date: </span>
  <span>{person.subscription?.lastPayment?.date}</span>
</div>

Notice the ? after the subscription and lastPayment properties. This is the optional chaining operator which means if the property before it is null or undefined an error won't occur if its members are accessed. Instead, the expression will be automatically short-circuited, and undefined returned. Neat!

Using optional chaining on optional function props

Let's look at a different component:

type Props = {
  value?: string,
  onValueChange?: (value: string) => void
};
const Textbox: React.FC<Props> = ({
  value,
  onValueChange
}) => {
  return (
    <input
      type="text"
      value={value}
      onChange={e => onValueChange(e.currentTarget.value) //💥}
    />
  );
};

We get a type error because onValueChange is optional and could be undefined.

We can use optional chaining to resolve the error:

<input
  type="text"
  value={value}
  onChange={e =>
    onValueChange?.(e.currentTarget.value)
  }
/>

Notice that we need a . after the optional chaining operator (?); otherwise, we get a parsing error.

Can I use optional chaining now?

Yes, if you are running recent versions of React and TypeScript:

TypeScript 3.7 supports optional chaining
Babel 7.8.0 supports optional chaining
Projects created with create react app 3.3.0 supports optional chaining as well!

Originally published at https://www.carlrippon.com/optional-chaining-with-react-and-typescript on Feb 04, 2020.

Dropdown data binding with React hooks

Carl — Wed, 29 Jan 2020 04:16:39 +0000

Dropdown data binding is always interesting in different UI technologies. We often want to feed the dropdown a list of dynamic data values from a web API. Usually, we want to stop the user from interacting with the dropdown while the items are being loaded. We may wish to select a particular dropdown item after they have loaded as well. So, how do we do all this with React hooks? Let's find out.

Creating the dropdown component

Our dropdown is going to consist of character names from Star Wars. Let's make a start on the React component.

function CharacterDropDown() {
  return (
    <select>
      <option value="Luke Skywalker">
        Luke Skywalker
      </option>
      <option value="C-3PO">C-3PO</option>
      <option value="R2-D2">R2-D2</option>
    </select>
  );
}

This is a functional React component containing 3 hardcoded characters. Although the item labels are the same as the item values in our example, we've explicitly specified them both because often they are different in other scenarios.

A nice and simple start but there is still a lot of work to do!

Using state to render dropdown items

Our dropdown contains hardcoded items at the moment. What if items need to be dynamic and loaded from an external source like a web API? Well, the first thing we need to do to make the item's dynamic is to put the items in state. We can then have the dropdown reference this state when rendering its items:

function CharacterDropDown() {
  const [items] = React.useState([
    {
      label: "Luke Skywalker",
      value: "Luke Skywalker"
    },
    { label: "C-3PO", value: "C-3PO" },
    { label: "R2-D2", value: "R2-D2" }
  ]);
  return (
    <select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

We use the useState hook to create some state with our characters in. The parameter for useState is the initial value of the state. The useState hook returns the current value of the state in the first element of an array - we've destructured this into an items variable.

So, we have an items variable which is an array containing our Star Wars characters. In the return statement, we use the items array map function to iterate through the characters and render the relevant option element. Notice that we set the key attribute on the option element to help React make any future changes to these elements.

We can arguably make the JSX a little cleaner by destructuring the label and value properties from the item that is being mapped over and then referencing them directly:

<select>
  {items.map(({ label, value }) => (
    <option key={value} value={value}>
      {label}
    </option>
  ))}
</select>

Fetching data from a web API

We are going to populate a dropdown with characters from the fantastic Star Wars API. So, instead of putting 3 hardcoded characters in the state, we need to put data from https://swapi.co/api/people into it. We can do this with the useEffect hook:

function CharacterDropDown() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    async function getCharacters() {
      const response = await fetch("https://swapi.co/api/people");
      const body = await response.json();
      setItems(body.results.map(({ name }) => ({ label: name, value: name })));
    }
    getCharacters();
  }, []);

  return (
    ...
  );
}

Let's examine the useEffect hook:

Its first parameter is a function to execute when the side effect runs
The second parameter determines when the side effect runs. In our case this is just after the component first renders because we have specified an empty array
Our side effect function in the useEffect hook needs to be asynchronous because of the web API call, but this isn't directly allowed in the useEffect. This is why we have an asynchronous nested getCharacters function that is called
Inside the getCharacters function we use the native fetch function to make the web API request. We then map the response body to the data structure that our items state expects

Let's turn our attention to the useState hook again:

Notice that we now default the items state to an empty array
Notice also that we have destructured the 2nd parameter from the useState hook. This is a function called setItems, which we can use to set a new value for the items state.
We use the setItems function to set the items state in the getCharacters function after we have mapped the data appropriately from the web API. This call to setItems will cause our component to re-render and show the dropdown items.

Stopping the user interact with the dropdown while items are loading

We probably want to stop the user from interacting with the dropdown while the data is being loaded. We can do this by disabling the dropdown whist the web API request is being made:

function CharacterDropDown() {
  const [loading, setLoading] = React.useState(true);
  const [items, setItems] = React.useState([
    { label: "Loading ...", value: "" }
  ]);
  React.useEffect(() => {
    async function getCharacters() {
      ...
      setItems(body.results.map(({ name }) => ({ label: name, value: name })));
      setLoading(false);
    }
    getCharacters();
  }, []);
  return (
    <select disabled={loading}>
      ...
    </select>
  );
}

We've added a new piece of state called loading to indicate whether items are being loaded. We initialise this to true and set it to false after the items have been fetched from the web API and set in the items state.

We then reference the loading state on the select elements disabled property in the JSX. This will disable the select element while its items are being loaded.

Notice that we've defaulted the items state to an array with a single item containing a "Loading .." label. This is a nice touch that makes it clear to the user what is happening.

Aborting loading items when the component is unmounted

What happens if the user navigates to a different page, and CharacterDropDown is unmounted while the items are still being fetched? React won't be happy when the response is returned, and state is attempted to be set with the setItems and setLoading functions. This is because this state no longer exists. We can resolve this by using an unmounted flag:

React.useEffect(() => {
  let unmounted = false;
  async function getCharacters() {
    const response = await fetch(
      "https://swapi.co/api/people"
    );
    const body = await response.json();
    if (!unmounted) {
      setItems(
        body.results.map(({ name }) => ({
          label: name,
          value: name
        }))
      );
      setLoading(false);
    }
  }
  getCharacters();
  return () => {
    unmounted = true;
  };
}, []);

So, we initialise unmounted to false and check that it is still false before the state is set.

The side effect function in the useEffect hook can return another function that is executed when the component is unmounted. So, we return a function that sets our unmounted to true.

Our dropdown is nice and robust now.

Controlling the dropdown value with state

A common pattern when building a form is to control the field values in state, so, let's now control the dropdown value with state:

function CharacterDropDown() {
  const [loading, setLoading] = React.useState(true);
  const [items, setItems] = React.useState(...);
  const [value, setValue] = React.useState();
  React.useEffect(...);
  return (
    <select
      disabled={loading}
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
    >
      ...
    </select>
  );
}

We've added a new piece of state called value and bound that to the value prop on the select element in the JSX. We also update this state in a change event listener with the onChange prop.

Setting the initial value

We may want to select an initial value of the dropdown. Now that the value is controlled by state, this is a simple matter of setting the default value of the state:

const [value, setValue] = React.useState(
  "R2-D2"
);

Wrap up

We use the useEffect hook to load drop down items from a web API. The side effect function needs to contain a nested function that does the web API call
We use the useState hook for a loading flag that is set while drop down items are loading which can be used to disable the drop down during this process
We use the useState hook to hold drop down items in state. This is set after the data has been fetched from the web API
We also use the useState hook to control the selected drop down value in state. We can then set the initial selected value for the drop down by setting the initial value for the state

Originally published at https://www.carlrippon.com/drop-down-data-binding-with-react-hooks on Jan 28, 2020.

Upgrading npm dependencies

Carl — Wed, 22 Jan 2020 04:29:01 +0000

How can we safely upgrade the npm dependencies in our project? What do the funny ^ and ~ characters mean in front of the dependency package versions? How can we do a major version upgrade on an npm dependency in our project? We'll find out in this post.

Version parts

npm package versioning follows semantic versioning. So, a package version has 3 parts - Major.Minor.Patch

Patch. This is incremented when a bug fix is made that won't break consuming code
Minor. This is incremented when features are added that won't break consuming code
Major. This is incremented when breaking changes are made

What does the `^` and `~` mean?

A version often has a ^ in front of it (e.g. ^16.8.6). This means that the latest minor version can be safely installed. So in this example, ^16.12.1 can be safely installed if this was the newest version in 16.x.

Sometimes a version has a ~ in front of it (e.g. ~16.8.6). This means that only the latest patch version can be safely installed. So in this example, ^16.8.12 can be safely installed if this was the newest version in 16.8.x.

So, `npm install` installs the latest safe version of the dependencies?

Yes and no!

If the packages have already been installed into the node_modules folder, then npm install won't update any packages.

If the packages haven't been installed and a package-lock.json file exists, then npm install will install the exact dependency versions specified in package-lock.json.

npm install will install the latest safe version of the dependencies if they don't exist in the node_modules folder, and there is no package-lock.json file. However, you may think the latest safe version hasn't been installed because package.json is unchanged, but if you check the packages in the node_modules folder, the latest safe version will have been installed.

So, how do I safely update all the dependencies?

Firstly, the dependencies that are out of date can be discovered by running the following command:

npm outdated

The dependencies will be listed out:

The wanted version is the latest safe version that can be taken (according to the semantic version and the ^ or ~ prefix). The latest version is the latest version available in the npm registry.

All the dependencies can be safely updated to the wanted version by using the following command:

npm update

As well as updating the packages in the node_modules folder, the package.json and package-lock.json files will be updated.

If we don't want to update all of the packages, then the package names can be specified at the end of the command:

npm update "react" "react-dom"

React is updated in the above example.

Updating all dependencies with major changes

So, how do we upgrade dependencies when there has been a major version change?

Perhaps the safest way is as follows:

Check the changelog of the dependent package for breaking changes that could affect our app
If we think we are safe to do the upgrade, run the following command:

npm install <packagename>@latest

If multiple packages go together, you can list them all out. The example below will update React to the latest version:

npm install react@latest react-dom@latest

Verify the app isn't broken by doing some tests
Repeat the process for other packages where there is a major version change

Is there a quicker way of just updating all the dependencies, including major version changes? So, like npm update but for major version updates as well?

Yes, there is a tool called npm-check-updates that will do this. Just run the following command:

npx npm-check-updates -u

This will update the dependencies to the latest versions (including major version changes) in the package.json file. If we are happy to go ahead with the upgrades we need to run the following command:

npm install

This will then upgrade the packages in the node_modules folder, and the package-lock.json file will be updated as well.

Wrap up

Use npm outdated to discover dependencies that are out of date
Use npm update to perform safe dependency upgrades
Use npm install <packagename>@latest to upgrade to the latest major version of a package
Use npx npm-check-updates -u and npm install to upgrade all dependencies to their latest major versions

Originally published at https://www.carlrippon.com/upgrading-npm-dependencies on Jan 21, 2020.

Forem: Carl

Creating a Review Analyser Using the Vercel AI SDK and React 19

What we'll build

What you'll learn

Project Setup

Environment Configuration

Building the Server Function

Implementing the Server Function

Validating Review Content

Making the AI Call

Creating the Review Analyser Form Component

Using the useActionState Hook

Rendering the Form

Displaying Review Analysis

Main Page Component

Running the Review Analyser

Conclusion

Autonomous AI Coding Agents - Boosting Developer Productivity

What Are Autonomous Coding Agents?

Initial Skepticism

How Autonomous Coding Agents Increase Productivity

What Types of Tasks to Give to Autonomous Coding Agents

What Not to Give Autonomous Coding Agents

Maximising Throughput

Why Aren't More Developers Using Autonomous Coding Agents?

Which One Should I Use?

Writing Better Instructions for Cursor

An example

Adding the Cursor rules

Creating the PRD

Generating the task list

Processing tasks

Wrap up

When to use AI to generate code

Three key questions

Where AI code generation seems to work well

Using AI for features I'm confident about implementing

Using AI for features I don't know how to implement

Using AI with extra care

Security-critical code

Other critical code

When AI generates code I don't understand

AI struggles with using new frameworks and libraries

Skill & experience considerations

The bottom line

React Context with TypeScript: Part 4 - Creating a context with no default and no undefined check

The problem

Creating a wrapper for creating a context

Creating a context

Creating a provider

Consuming the context

Wrap up

React Context with TypeScript: Part 3 - Context with class components

Trying to use the context hook in a class component

Using the context property

Explicitly setting the type for the context property

Using the Consumer component

Wrap up

React Context with TypeScript: Part 2 - Complex context with function components

Explicitly setting the context type

Using the enhanced context in the provider

Adding an option to change the theme in the Header component

Wrap up

React Context with TypeScript: Part 1 - Simple context with function components

Creating a context

Creating a Context provider

Creating a custom hook for consuming the context

Adding the provider to the component tree

Consuming the context

Wrap up

Nullish coalescing with React and TypeScript

A simple component

Using nullish coalescing

Can I use nullish coalescing now?

Optional chaining with React and TypeScript

A simple component

Using optional chaining on optional props

Using optional chaining on optional function props

Can I use optional chaining now?

Dropdown data binding with React hooks

Using the `useActionState` Hook

Using the `context` property

Explicitly setting the type for the `context` property

Using the `Consumer` component

Adding an option to change the theme in the `Header` component

What does the `^` and `~` mean?

So, `npm install` installs the latest safe version of the dependencies?