DEV Community: Michael

How to use Yup validation with React Hook Form

Michael — Mon, 14 Apr 2025 15:49:05 +0000

Have you ever built a form in React, only to realise you have to spend time writing endless validation logic, handling errors manually, and dealing with inconsistent user input? it's quite frustrating because a simple mistake in a field can break an entire submission. That's where Yup comes in.

Yup is a powerful schema validation library that helps you to enforce rules on form fields effortlessly, combined with React hook form, it allows you to build highly efficient forms with minimal boilerplate code, giving your users instant feedback if a form field is filled out incorrectly.

This guide will explain what yup validation is, how to integrate with React hook form and some practical examples to get you started.

What is Yup?

Definition and Origin

Yup is a schema builder for JavaScript applications, it allows you to validate data against a schema and transform data in your applications easily. It was originally inspired by Joi, a popular validation library, but Yup is optimized for client-side use, making it perfect for form validation with React.

While Zod is another popular alternative, especially favored for its TypeScript support, Yup remains a widely used choice due to its flexibility and seamless integration with React applications.

Why use Yup for validation?

By using Yup, you can simplify form validation while keeping your codebase clean and scalable.

It has a declarative validations schema allowing you to define complex validation rules in a clean and readable format.
It encourages you to centralize validation logic for multiple forms making it reusable and maintainable.
It's lightweight and performant with minimal overhead making it perfect for client side use.

Features of Yup

Yup provides you with a declarative way to validate form data in JavaScript apps. It has a set of features which make it a flexible and efficient choice for handling validation in React, React hook form, and other frameworks.

Type checking

Type checking reduces validation errors by making sure that form inputs have the correct data type. For example, forcing a field to accept a certain data type like numbers.

const schema = yup.object({
  age: yup.number(), // Ensures the value is a number
});

Chaining validators

Yup allows you yo chain multiple validation rules for a single field, so you can create flexible and custom validation logic.

const schema = yup.object({
  username: yup.string().min(3).max(15).required()
});

Conditional validation

Yup also supports dynamic validation rules that depend on other field values, this can be useful for multi-step forms or complex business logic.

const schema = yup.object({
  password: yup.string().required(),
  confirmPassword: yup.string().oneOf([yup.ref("password")], "Passwords must match"),
});

Custom error messages

Yup allows you to provide user friendly error messages instead of generic system errors, which improves form usability.

const schema = yup.object({
  email: yup.string().email("Enter a valid email address").required("Email is required"),
});

Data transformations

You can also modify input values before validation, for example you can trim whitespace, convert strings to lowercase, or format dates.

const schema = yup.object({
  username: yup.string().trim().lowercase(),
});

Here are some of the most commonly used built in validation methods that yup offers at a glance:

Method	Functionality
`.required()`	Ensures a field is not empty
`.email()`	Validates email format
`.min()`	Sets a minimum value or length
`.max()`	Sets a maximum value or length
`.matches()`	Validates against custom regex patterns

Yup schema

A Yup schema is a structured blueprint that defines the rules and constraints for form validation. It allows you to declare what your expected data types, required fields, and validation conditions are in a clean and reusable way.

When using Yup, instead of manually writing out all of your validation logic, you define a schema that will enforce those rules automatically.

Basic Yup schema syntax

Yup schemas are normally created using yup.object(), and consists of fields with their respective validation rules.

For instance here's a basic schema validating a user registration form:

import * as yup from "yup";

const userSchema = yup.object({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email").required("Email is required"),
  age: yup.number().min(18, "Must be at least 18").required("Age is required"),
});

In the above code, each field in the schema represents a form input, validation rules like .required() are chained with other methods to define constraints, this schema can be used to validate form data before submission.

Common use cases of Yup schemas

Yup supports nested objects, allowing you to validate structured data (an address inside a user profile object):

const userSchema = yup.object({
  name: yup.string().required(),
  address: yup.object({
    street: yup.string().required(),
    city: yup.string().required(),
    zip: yup.string().matches(/^\d{5}$/, "Invalid ZIP code"),
  }),
});

This helps to validate complex form structures, it also ensures all nested fields meet validation criteria.

Yup also allows validation of arrays of objects, this makes it very useful for forms which may have repeating fields (like a list of phone numbers):

const userSchema = yup.object({
  contacts: yup.array().of(
    yup.object({
      type: yup.string().oneOf(["home", "work", "mobile"]),
      number: yup.string().matches(/^\d+$/, "Must be a valid number"),
    })
  ),
});

This is great for multi-step forms or dynamically added fields, and it ensures each item in an array follows the expected structure.

Lastly instead of duplicating validation logic across multiple forms, you can define reusable Yup schemas:

const emailSchema = yup.string().email("Invalid email").required();
const passwordSchema = yup.string().min(8, "Must be at least 8 characters");

const loginSchema = yup.object({
  email: emailSchema,
  password: passwordSchema,
});

const registerSchema = yup.object({
  email: emailSchema,
  password: passwordSchema,
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password")], "Passwords must match"),
});

This promotes code reuse and maintainability as well as making sure you have consistent validation rules across different forms in your application.

Yup validation with schema

Once you have defined all of your Yup schemas, you can use them to validate data. Yup provides you with both synchronous and asynchronous validation methods, as well as support for custom validation logic.

Synchronous validation

Synchronous validation runs instantly without returning a promise, making it useful for when validation does not involve asynchronous operations (simple field checks)

The method .validateSync() validates data synchronously, throwing an error if validation fails.

import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required(),
  age: yup.number().min(18).required(),
});

try {
  schema.validateSync({ name: "John", age: 17 }); // Throws validation error
} catch (error) {
  console.log(error.message); // "age must be at least 18"
}

Asynchronous validation

In real world applications, validation will at some point require asynchronous checks-such as verifying a username's availability in a database or checking external APIs for information.

The .validate() method returns a promise, making it suitable for async operations.

const schema = yup.object({
  username: yup.string().required(),
});

const validateData = async () => {
  try {
    const data = await schema.validate({ username: "" });
    console.log("Valid!", data);
  } catch (error) {
    console.log("Validation failed:", error.message);
  }
};

Custom validation logic

Yup allows you to make custom validation rules using the .test() method. This is useful when built-in validation methods don't meet your specific needs.

For example the following validation makes sure that a password contains at least one number:

const passwordSchema = yup.string()
  .min(8, "Password must be at least 8 characters")
  .test("contains-number", "Password must include a number", (value) => {
    return /\d/.test(value); // Ensures at least one number exists
  });

passwordSchema
  .validate("password") // No number, so this fails
  .catch((error) => console.log(error.message)); // "Password must include a number"

You can also use .test() for more complex validations, for instance maybe you want to validate a field based on another fields value (password confirmation):

const schema = yup.object({
  password: yup.string().required(),
  confirmPassword: yup.string().test(
    "match-password",
    "Passwords must match",
    function (value) {
      return value === this.parent.password;
    }
  ),
});

schema
  .validate({ password: "123456", confirmPassword: "123" })
  .catch((error) => console.log(error.message)); // "Passwords must match"

The above Yup schema checks if the confirmPassword field matches the password field all in one .test() method.

How to validate forms with Yup

Before introducing React Hook Form, the following example will show how Yup works independently in a basic form validation scenario.

First define a Yup schema, you can create a simple schema that ensures that the object has:

A name field which is required
An email field which must be a valid email
An age field that must be at least 18 years old

import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email format").required("Email is required"),
  age: yup.number().min(18, "You must be at least 18").required("Age is required"),
});

Now you can use the .validate() method to validate a sample form submission.

const formData = { name: "", email: "invalid-email", age: 15 };

schema.validate(formData, { abortEarly: false })
  .then(() => console.log("Validation passed!"))
  .catch((error) => console.log(error.errors));

When validation fails, Yup will return an array of error messages:

["Name is required", "Invalid email format", "You must be at least 18"]

Right now, you have to manually check for errors and display them in the UI, which is repetitive and inefficient, this is where React Hook Form excels. Let's see how React Hook Form can simplify the validation process.

Yup validation with React hook form

Instead of manually checking for validation errors and then having to display them, you can use React Hook Form to make your form handling more efficient (minimal re-renders), easier to manage (auto triggers validation) and easier to integrate with Yup in general.

Step 1: Create project and Install dependencies

First create a folder to host your new project in:

mkdir yup-example

Create the frontend for the project:

npm create vite@latest yup-frontend --template react

Change into the yup-frontend directory and run the following command to install react-hook-form and Yup's resolver package:

npm install react-hook-form @hookform/resolvers yup

Step 2: Create the form component

Now, create a form component called SignupForm in the root directory with the following code:

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// Define Yup Schema
const schema = yup.object({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email").required("Email is required"),
  age: yup.number().min(18, "You must be at least 18").required("Age is required"),
});

const SignupForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    console.log("Form Submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register("name")} />
        <p>{errors.name?.message}</p>
      </div>

      <div>
        <label>Email:</label>
        <input {...register("email")} />
        <p>{errors.email?.message}</p>
      </div>

      <div>
        <label>Age:</label>
        <input type="number" {...register("age")} />
        <p>{errors.age?.message}</p>
      </div>

      <button type="submit">Register</button>
    </form>
  );
};

export default SignupForm;

In the above code the register() function binds the inputs to React Hook Form, the resolver: yupResolver(schema) automatically validates data with Yup, and errors.name?.message displays validation errors.

Now replace the code in App.jsx with the following:

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import SignupForm from "./SignupForm";

function App() {
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Form Example</h1>
      <SignupForm />
    </>
  );
}

export default App;

The above code is just importing and then displaying the SignupForm in the App component.
Start the app with npm run dev and navigate to http://localhost:5173/ in your browser, the form should appear, try entering some numbers for the name and pressing the button to register.

As you can see entering a number for the name field and leaving email blank shows validation errors.

Set up a Strapi Backend

Now that you have form validation in place, let's extend the form to submit user data to a Strapi backend.

Strapi is a headless CMS that lets you easily store and manage form data, with Strapi you can:

Spin up a backend effortlessly.
Save form submissions in a database.
Send form data via API without having to set up a full backend.
Get an admin panel to view all submitted data.

Step 1: Set up Strapi locally

In your terminal, open another tab and navigate back to yup-example and then run the following command:

npx create-strapi@latest strapi-backend --quickstart

This should auto start and bring you to the admin panel, create a new admin user and proceed.

Step 2: Create a "YupUser" collection in Strapi

Now under content-type-builder create a new collection (which are entities where we can store data) called - YupUser by clicking on Create new collection type and add the name, email, and age fields respectively:

Now save it by clicking on save in the top right hand corner.

You will also need to enable public API access so the form can send data, you find this under the settings -> Roles -> Public -> Permissions:

Click to select all and then save in the top right hand corner.

Step 3: Modify the form to submit data to Strapi

Now we want to modify the frontend code so that when the form is submitted it sends a POST request to the Strapi backend, if the request is successful we want to log a success message, if something goes wrong, we catch the error and display it.

So change the onSubmit function in the SignupForm component to the following:

const onSubmit = async (data) => {
  try {
    const response = await fetch("http://localhost:1337/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ data }),
    });

    if (!response.ok) throw new Error("Failed to submit form");

    console.log("Form submitted successfully!");
  } catch (error) {
    console.error("Error:", error);
  }
};

Now try navigating to the app and entering a user.

Provided you enter valid data to the form and submit you will see a new user appear in the Strapi dashboard, saved to the database, If you enter incorrect information our validation will stop it before it has a chance to be sent to the database.

Why use Strapi as a Backend for your React apps?

Strapi is a powerful headless CMS that simplifies backend development, it allows you to quickly set up APIs and manage content without having to write complex backend logic.

What's new in Strapi v5?

We have recently released a new version of our platform and here are just a few of its benefits:

Improved API performance: Faster response times for real-time apps.
Better role management: More granular access controls.
Plugin system enhancements: Extend Strapi with custom plugins and community add-ons.

By using Strapi with a frontend library like React, you get a flexible, efficient, and maintainable backend without the usual time constraint and complexity, allowing you to focus on building great frontends and complex business logic.

Github Source Code

You can find the full code example repository here.

Conclusion

Integrating Yup with React Hook Form provides a powerful, efficient, and scalable approach to form validation in React applications. By leveraging schema-based validation, you can ensure consistent, reusable, and maintainable form logic while reducing boilerplate code.

Key Takeaways

Yup simplifies validation logic with declarative schemas, reducing manual error handling.
React Hook Form enhances performance with minimal re-renders and automatic validation.
Combining both tools streamlines form development, ensuring a better user experience and cleaner codebase.
Extending this setup with Strapi as a backend enables seamless data storage, API integration, and better form data management.

By following this guide, you now have a fully functional validation system that can handle everything from basic field checks to complex, conditional validations. Whether you're working on authentication forms, registration pages, or multi-step wizards, this combination ensures your forms are fast, reliable, and user-friendly.

Developers beware of fake recruiters on linkedIn or The Legend of John (Jack) Hemm

Michael — Mon, 06 Jan 2025 14:22:07 +0000

The Approach...enchanté

The moment I received a message from John (Jack) Hemm, I knew something wasn't quite right. He claimed to be CEO of a self-employed company, which, as far as I know, is impossible because a company is a separate legal entity. Unless, of course, this company somehow gained sentience, declared independence, started organising coffee shop meetings, and began networking on LinkedIn.

The profile picture also looked a little off, sort of like Colonel Sanders as a weird magician (or maybe the bad guy in some weird 80's kung fu movie) but AI-generated? not to mention the fact that he claimed to be a public defender while simultaneously the CEO of a self-employed company developing a chatbot app using OpenAI. To add to the confusion, his typing was so sloppy it made me wonder if he was illiterate or perhaps fiddling with a Paul Daniels magic set frantically whilst trying to scam me.

Can you see the look of concealed trickery, the pure deviousness?

Here's the first message:

Hi Michael,

I'm John and CEO of a Self-Employed company.

Currently, we are going to update our AI chatbot application UI.

I would like to with you as I have reviewed your profile and believe that you would be a good fit for this position.

The collaboration period is currently 3 months and we are willing to pay $80~100 per hour.

If you are looking for a new opportunity, let's discuss more.

Best regards,

John.

What would he like to do with me? I think he started with "scam" in mind, then shifted to "work", but then some moral glitch in his brain caused him to lose the word entirely. I was intrigued, so I decided to play along just to see if I could untangle this mystery.

The plot thickens

I replied to express my interest, and he offered me access to their repository to run the code and check the project's progress. He also sent me a Calendly link to book a call.

Investigating the code

At this point I was just interested to see if I could identify the malicious code, and what I ended up finding was quite intriguing.

It didn't take me long to quickly go over some of the main files and, in particular, the entry points to the application when I found this:

The start script was used with the pipe operator, which seems unusual. The pipe operator typically directs the output of one command to another, but this doesn’t make sense here, as the test command generates output that isn’t usable by the start script. This suggests that something specific is happening in the test script that they want to trigger during the start process. Additionally, the inclusion of --openssl-legacy-provider could indicate an attempt to bypass stricter cryptographic policies, which might also be exploited to weaken security or introduce vulnerabilities.

So on gitHub I took a look at the test file and saw this:

At first glance there's nothing happening here just a render function which logs something to the console, but an absence of tests...so why is it so important to run this on start?

hmmm something doesn't seem quite right so I clicked on view raw code and then I saw this:

loooooooooooooooool
Bingo a bunch of obfuscated code, the file must contain some javaScript which modifies what you see when viewing it in GitHubs UI.

I threw it into a Deobfuscator like so:

And then I saw the malicious code, which is an absolute headache to read so I just chucked it into chatGPT to decipher and this is what it found:

Key Observations:

Obfuscation:
- The code uses heavily obfuscated variable names and logic, making it difficult to read directly.
- Functions like _0x40b9, _0x37be, and _0x3f8d69 are likely designed to decode or remap other parts of the script.
Behavior:
- The script collects sensitive data from the host machine, such as:
- Browser data: It scans directories related to Chrome, Brave, and other browsers for profiles and login data.
- System information: Reads hostnames, platforms, home directories, temporary directories, and system keychains.
- Files are uploaded to a remote server at http://185.153.182.241:1224.
Potential Malicious Intent:
- The script accesses sensitive directories (~/AppData, ~/.config, ~/Library, etc.).
- Attempts to read and send browser extensions and stored data to a remote endpoint.
- Fetches and executes code from a remote server (/client/106/314 and /pdown).
Indicators of Compromise:
- Creates and executes files in directories such as /.pyp/, /.sysinfo, and .config/solana/id.json.
- Continuously retries actions via loops and intervals (e.g., setInterval every 20 seconds and 300 seconds).
Execution:
- Spawns subprocesses via child_process.exec, such as extracting files or executing Python scripts.

This script is almost certainly malware designed to steal sensitive data and execute additional malicious payloads. It targets multiple platforms (Windows, Linux, and macOS) and browsers, exfiltrating data to a remote server.

The Risks

Here's the worst of what could happen if you run a script like this -

Data Theft:
- Theft of sensitive files like browser credentials, cryptocurrency wallet data, and system configuration files.
System Compromise:
- Remote execution of additional malicious payloads (e.g., ransomware, spyware, or backdoors), giving the attacker further control of your system.
Financial Loss:
- Unauthorized access to cryptocurrency wallets or stored financial credentials could result in stolen funds.
Identity Theft:
- Personal data exfiltrated from your system could be used for identity theft or sold on the dark web.
System Instability and Malfunction:
- The malware's persistence mechanisms and modifications to files or system settings could cause instability, slowdowns, or crashes.

The Rude goodbye...and paranoid residue

After catching him red handed I sent the following message on linkedin:

Hey John,

I ran the code you sent me. Immediately, my screen filled with what looked like hieroglyphs, and now my Wi-Fi network is named 'Capybara Uprising HQ.'

Moments later, a gang of capybaras showed up at my door wearing little vests and hats, demanding I appoint one as my 'Chief Snacks Officer.' They’ve since taken over my living room and turned it into a tiny command station. How do I proceed with the next steps?

At which point I received a question mark, and his account seemed to self-terminate, he blocked me, and I reported them on both LinkedIn and GitHub.

I did some digging, and it turns out the lawyer is real. Either someone is impersonating him, they’ve set up this site to appear legitimate, or John—or Jack, or whatever his name is—is channelling some Better Call Saul-style downfall and dabbling in nefarious activities.

Shout out if you need a public defender.
https://www.dunganattorney.com/attorney/hemm-john-e-jack/
(unaffiliated link)

Anyway the moral of the story is...

If you say John Jack Hemm 20 times in the mirror in the dark, apparently he spawns behind you with a little Paul Daniels head growing out of his neck like some monster from the thing (he's jacked af too, so you can't escape) he tries doing some weird magic trick which fails and then plugs github into your brain and downloads every single repository.....Nah.

No, seriously, there are a lot of scammers out there, especially on LinkedIn, and I guess some of them will be a lot more sophisticated than this one, so be careful.

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 3

Michael — Sat, 07 Sep 2024 11:10:41 +0000

Welcome to the third and final installment in this series. In Part 2, we created and connected the backend with Strapi to help save our meetings and transcriptions. In this part of the series, we will use ChatGPT with Strapi to gain insights about the transcribed text at the click of a button. We will also look at some testing and how to deploy the application to Strapi cloud.

Outline

You can find the outline for this series below:

Part 1: Implement Audio Recording and User Interface
Part 2: Incorporate Strapi CMS and Save Transcriptions
Part 3: Implement connection to chatGPT and deploy to Strapi cloud

Create Custom API Endpoints in Strapi

We will need our custom endpoints in Strapi CMS to connect with ChatGPT, so navigate to the terminal, change the directory to strapi-transcribe-api, and run the below command:

yarn strapi generate

Doing this will begin the process of generating our custom API. Choose the API option, give it the name transcribe-insight-gpt, and select "no" when it asks us if this is for a plugin.

Make Strapi API Public

Inside the src directory, If we check the api directory in our code editor, we should see the newly created API for transcribe-insight-gpt with it's routes, controllers, and services directories.

Let's check if it works by uncommenting the code in each file, restarting the server, and navigating to the admin dashboard. We will want to make access to this route public, so click Settings > Users & permissions plugin > Roles > Public, then scroll down to Select all on the transcribe-insight-gpt API to make the permissions public, and click save in the top right.

If we enter the following into our browser and click enter, we should get an "ok" message.

http://localhost:1337/api/transcribe-insight-gpt

Using ChatGPT with Strapi

We have confirmed the API endpoint is working, let's connect it to OpenAI first, install the OpenAI package, navigate to the route directory, and run the below command in the terminal

yarn add openai

Then, in the .env file, add the API key to the OPENAI environment variable:

OPENAI=<OpenAI api key here>

Now, under the transcribe-insight-gpt directory, change the code in the routes directory to the following:

module.exports = {
  routes: [
    {
      method: "POST",
      path: "/transcribe-insight-gpt/exampleAction",
      handler: "transcribe-insight-gpt.exampleAction",
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Change the code in the controller directory to the following:

"use strict";

module.exports = {
  exampleAction: async (ctx) => {
    try {
      const response = await strapi
        .service("api::transcribe-insight-gpt.transcribe-insight-gpt")
        .insightService(ctx);

      ctx.body = { data: response };
    } catch (err) {
      console.log(err.message);
      throw new Error(err.message);
    }
  },
};

And the code in the services directory to the following:

"use strict";
const { OpenAI } = require("openai");
const openai = new OpenAI({
  apiKey: process.env.OPENAI,
});

/**
 * transcribe-insight-gpt service
 */

module.exports = ({ strapi }) => ({
  insightService: async (ctx) => {
    try {
      const input = ctx.request.body.data?.input;
      const operation = ctx.request.body.data?.operation;

      if (operation === "analysis") {
        const analysisResult = await gptAnalysis(input);

        return {
          message: analysisResult,
        };
      } else if (operation === "answer") {
        const answerResult = await gptAnswer(input);

        return {
          message: answerResult,
        };
      } else {
        return { error: "Invalid operation specified" };
      }
    } catch (err) {
      ctx.body = err;
    }
  },
});

async function gptAnalysis(input) {
  const analysisPrompt =
    "Analyse the following text and give me a brief overview of what it means:";
  const completion = await openai.chat.completions.create({
    messages: [{ role: "user", content: `${analysisPrompt} ${input}` }],
    model: "gpt-3.5-turbo",
  });

  const analysis = completion.choices[0].message.content;

  return analysis;
}

async function gptAnswer(input) {
  const answerPrompt =
    "Analyse the following text and give me an answer to the question posed: ";
  const completion = await openai.chat.completions.create({
    messages: [{ role: "user", content: `${answerPrompt} ${input}` }],
    model: "gpt-3.5-turbo",
  });

  const answer = completion.choices[0].message.content;

  return answer;
}

Here, we pass two parameters to our API: the input text, which will be our transcriptions, and the operation, which will be either analysis or answer depending on what operation we want it to perform. Each operation will have a different prompt for ChatGPT.

Confirm That ChatGPT Works

We can check the connection to our POST route by pasting the below code in our terminal:

curl -X POST \
  http://localhost:1337/api/transcribe-insight-gpt/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "Comparatively, four-dimensional space has an extra coordinate axis, orthogonal to the other three, which is usually labeled w. To describe the two additional cardinal directions",
        "operation": "analysis"
    }
}'

And to check the answer operation, you can use the below command:

curl -X POST \
  http://localhost:1337/api/transcribe-insight-gpt/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "I speak without a mouth and hear without ears. I have no body, but I come alive with the wind. What am I?",
        "operation": "answer"
    }
}'

That's great. Now that we have our analysis and answer capabilities within a Strapi API route, we need to connect this to our front-end code and ensure we can save this information for our meetings and transcriptions.

Connect Custom API for Anaylysis in Next.js

To maintain a clear separation of concerns, let's create a separate API file for our app's analysis functionality.

Get Analysis from ChatGPT

In transcribe-frontend under the api directory, create a new file called analysis.js and paste in the following code:

const baseUrl = 'http://localhost:1337';
const url = `${baseUrl}/api/transcribe-insight-gpt/exampleAction`;

export async function callInsightGpt(operation, input) {
  console.log('operation - ', operation);
  const payload = {
    data: {
      input: input,
      operation: operation,
    },
  };
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

The code above is a POST request to call the insight API and get the analysis back from ChatGPT.

Update Transcriptions with Analysis and Answers

Let's add a way to update our transcriptions with analysis and answers. Paste the following code into the transcriptions.js file.

export async function updateTranscription(
  updatedTranscription,
  transcriptionId
) {
  const updateURL = `${url}/${transcriptionId}`;
  const payload = {
    data: updatedTranscription,
  };

  try {
    const res = await fetch(updateURL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    return await res.json();
  } catch (error) {
    console.error('Error updating meeting:', error);
    throw error;
  }
}

The code above is a PUT request to handle an update of the analysis or answer field on each transcription.

Create a Custom Hook to Handle the Overview and Analysis of Transcriptions

Now, let's create a hook where we can use this method. Create a file named useInsightGpt under the hooks directory and paste in the following code:

import { useState } from 'react';
import { callInsightGpt } from '../api/analysis';
import { updateMeeting } from '../api/meetings';
import { updateTranscription } from '../api/transcriptions';

export const useInsightGpt = () => {
  const [loadingAnalysis, setLoading] = useState(false);
  const [transcriptionIdLoading, setTranscriptionIdLoading] = useState('');
  const [analysisError, setError] = useState(null);

  const getAndSaveTranscriptionAnalysis = async (
    operation,
    input,
    transcriptionId
  ) => {
    try {
      setTranscriptionIdLoading(transcriptionId);
      // Get insight analysis / answer
      const { data } = await callInsightGpt(operation, input);
      // Use transcriptionId to save it to the transcription
      const updateTranscriptionDetails =
        operation === 'analysis'
          ? { analysis: data.message }
          : { answer: data.message };
      await updateTranscription(updateTranscriptionDetails, transcriptionId);
      setTranscriptionIdLoading('');
    } catch (e) {
      setTranscriptionIdLoading('');
      setError('Error getting analysis', e);
    }
  };

  const getAndSaveOverviewAnalysis = async (operation, input, meetingId) => {
    try {
      setLoading(true);
      // Get overview insight
      const {
        data: { message },
      } = await callInsightGpt(operation, input);
      // Use meetingId to save it to the meeting
      const updateMeetingDetails = { overview: message };
      await updateMeeting(updateMeetingDetails, meetingId);
      setLoading(false);
    } catch (e) {
      setLoading(false);
      setError('Error getting overview', e);
    }
  };

  return {
    loadingAnalysis,
    transcriptionIdLoading,
    analysisError,
    getAndSaveTranscriptionAnalysis,
    getAndSaveOverviewAnalysis,
  };
};

This hook handles the logic to get and save the overview for our meeting when it has ended. It also handles getting the analysis or answers to our transcriptions and saving them, too. It keeps track of which transcription we are requesting analysis for so we can show specific loading states.

Display Analysis of a Transcription

Import the functionality above into the TranscribeContainer and use it. Paste the following updated code into TranscribeContainer.jsx

import React, { useState, useEffect } from "react";
import styles from "../styles/Transcribe.module.css";
import { useAudioRecorder } from "../hooks/useAudioRecorder";
import RecordingControls from "../components/transcription/RecordingControls";
import TranscribedText from "../components/transcription/TranscribedText";
import { useRouter } from "next/router";
import { useMeetings } from "../hooks/useMeetings";
import { useInsightGpt } from "../hooks/useInsightGpt";
import { createNewTranscription } from "../api/transcriptions";

const TranscribeContainer = ({ streaming = true, timeSlice = 1000 }) => {
  const router = useRouter();
  const [meetingId, setMeetingId] = useState(null);
  const [meetingTitle, setMeetingTitle] = useState("");
  const {
    getMeetingDetails,
    saveTranscriptionToMeeting,
    updateMeetingDetails,
    loading,
    error,
    meetingDetails,
  } = useMeetings();
  const {
    loadingAnalysis,
    transcriptionIdLoading,
    analysisError,
    getAndSaveTranscriptionAnalysis,
    getAndSaveOverviewAnalysis,
  } = useInsightGpt();
  const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
  const whisperApiEndpoint = "https://api.openai.com/v1/audio/";
  const {
    recording,
    transcribed,
    handleStartRecording,
    handleStopRecording,
    setTranscribed,
  } = useAudioRecorder(streaming, timeSlice, apiKey, whisperApiEndpoint);

  const { ended } = meetingDetails;
  const transcribedHistory = meetingDetails?.transcribed_chunks?.data;

  useEffect(() => {
    const fetchDetails = async () => {
      if (router.isReady) {
        const { meetingId } = router.query;
        if (meetingId) {
          try {
            await getMeetingDetails(meetingId);
            setMeetingId(meetingId);
          } catch (err) {
            console.log("Error getting meeting details - ", err);
          }
        }
      }
    };

    fetchDetails();
  }, [router.isReady, router.query]);

  useEffect(() => {
    setMeetingTitle(meetingDetails.title);
  }, [meetingDetails]);

  const handleGetAnalysis = async (input, transcriptionId) => {
    await getAndSaveTranscriptionAnalysis("analysis", input, transcriptionId);
    // re-fetch meeting details
    await getMeetingDetails(meetingId);
  };

  const handleGetAnswer = async (input, transcriptionId) => {
    await getAndSaveTranscriptionAnalysis("answer", input, transcriptionId);
    // re-fetch meeting details
    await getMeetingDetails(meetingId);
  };

  const handleStopMeeting = async () => {
    // provide meeting overview and save it
    // getMeetingOverview(transcribed_chunks)
    await updateMeetingDetails(
      {
        title: meetingTitle,
        ended: true,
      },
      meetingId,
    );

    // re-fetch meeting details
    await getMeetingDetails(meetingId);
    setTranscribed("");
  };

  const stopAndSaveTranscription = async () => {
    // save transcription first
    let {
      data: { id: transcriptionId },
    } = await createNewTranscription(transcribed);

    // make a call to save the transcription chunk here
    await saveTranscriptionToMeeting(meetingId, meetingTitle, transcriptionId);
    // re-fetch current meeting which should have updated transcriptions
    await getMeetingDetails(meetingId);
    // Stop and clear the current transcription as it's now saved
    await handleStopRecording();
  };

  const handleGoBack = () => {
    router.back();
  };

  if (loading) return <p>Loading...</p>;

  return (
    <div style={{ margin: "20px" }}>
      {ended && (
        <button onClick={handleGoBack} className={styles.goBackButton}>
          Go Back
        </button>
      )}
      {!ended && (
        <button
          className={styles["end-meeting-button"]}
          onClick={handleStopMeeting}
        >
          End Meeting
        </button>
      )}
      {ended ? (
        <p className={styles.title}>{meetingTitle}</p>
      ) : (
        <input
          onChange={(e) => setMeetingTitle(e.target.value)}
          value={meetingTitle}
          type="text"
          placeholder="Meeting title here..."
          className={styles["custom-input"]}
        />
      )}
      <div>
        {!ended && (
          <div>
            <RecordingControls
              handleStartRecording={handleStartRecording}
              handleStopRecording={stopAndSaveTranscription}
            />
            {recording ? (
              <p className={styles["primary-text"]}>Recording</p>
            ) : (
              <p>Not recording</p>
            )}
          </div>
        )}

        {/*Current transcription*/}
        {transcribed && <h1>Current transcription</h1>}
        <TranscribedText transcribed={transcribed} current={true} />

        {/*Transcribed history*/}
        <h1>History</h1>
        {transcribedHistory
          ?.slice()
          .reverse()
          .map((val, i) => {
            const transcribedChunk = val.attributes;
            const text = transcribedChunk.text;
            const transcriptionId = val.id;
            return (
              <TranscribedText
                key={transcriptionId}
                transcribed={text}
                answer={transcribedChunk.answer}
                analysis={transcribedChunk.analysis}
                handleGetAnalysis={() =>
                  handleGetAnalysis(text, transcriptionId)
                }
                handleGetAnswer={() => handleGetAnswer(text, transcriptionId)}
                loading={transcriptionIdLoading === transcriptionId}
              />
            );
          })}
      </div>
    </div>
  );
};

export default TranscribeContainer;

Here, depending on your need, we use the useInsightGpt hook to get the analysis or answer. We also display a loading indicator beside the transcribed text.

Display Answers and Analysis of Transcriptions in Real Time

Paste the following code into TranscribedText.jsx to update the UI accordingly.

import styles from '../../styles/Transcribe.module.css';

function TranscribedText({
  transcribed,
  answer,
  analysis,
  handleGetAnalysis,
  handleGetAnswer,
  loading,
  current,
}) {
  return (
    <div className={styles['transcribed-text-container']}>
      <div className={styles['speech-bubble-container']}>
        {transcribed && (
          <div className={styles['speech-bubble']}>
            <div className={styles['speech-pointer']}></div>
            <div className={styles['speech-text-question']}>{transcribed}</div>
            {!current && (
              <div className={styles['button-container']}>
                <button
                  className={styles['primary-button-analysis']}
                  onClick={handleGetAnalysis}
                >
                  Get analysis
                </button>
                <button
                  className={styles['primary-button-answer']}
                  onClick={handleGetAnswer}
                >
                  Get answer
                </button>
              </div>
            )}
          </div>
        )}
      </div>
      <div>
        <div className={styles['speech-bubble-container']}>
          {loading && (
            <div className={styles['analysis-bubble']}>
              <div className={styles['analysis-pointer']}></div>
              <div className={styles['speech-text-answer']}>Loading...</div>
            </div>
          )}
          {analysis && (
            <div className={styles['analysis-bubble']}>
              <div className={styles['analysis-pointer']}></div>
              <p style={{ margin: 0 }}>Analysis</p>
              <div className={styles['speech-text-answer']}>{analysis}</div>
            </div>
          )}
        </div>
        <div className={styles['speech-bubble-container']}>
          {answer && (
            <div className={styles['speech-bubble-right']}>
              <div className={styles['speech-pointer-right']}></div>
              <p style={{ margin: 0 }}>Answer</p>
              <div className={styles['speech-text-answer']}>{answer}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default TranscribedText;

We can now request analysis and get answers to questions in real-time straight after they have been transcribed.

Implement Meeting Overview functionality

When the user ends the meeting, we want to provide an overview of everything discussed. Let's add this functionality to the TranscribeContainer component.

In the function handleStopMeeting we can use the method getAndSaveOverviewAnalysis from the useInsightGpt hook:

const handleStopMeeting = async () => {
    // provide meeting overview and save it
    const transcribedHistoryText = transcribedHistory
      .map((val) => `transcribed_chunk: ${val.attributes.text}`)
      .join(', ');

    await getAndSaveOverviewAnalysis(
      'analysis',
      transcribedHistoryText,
      meetingId
    );

    await updateMeetingDetails(
      {
        title: meetingTitle,
        ended: true,
      },
      meetingId
    );

    // re-fetch meeting details
    await getMeetingDetails(meetingId);
    setTranscribed('');
  };

Here, we are joining all of the transcribed chunks from the meeting and then sending them to our ChatGPT API for analysis, where they will be saved for our meeting.

Now, let's display the overview once it has been loaded. Add the following code above the RecordingControls:

{loadingAnalysis && <p>Loading Overview...</p>}

 {overview && (
    <div>
      <h1>Overview</h1>
      <p>{overview}</p>
    </div>
  )}

Then, destructure the overview from the meeting details by adding the following line below our hook declarations:

const { ended, overview } = meetingDetails;

To summarise, we listen to the loading indicator from useInsightGpt and check if overview is present from the meeting; if it is, we display it.

Error handling in Next.js

We have a couple of errors that could be caused by one of our hooks; let's create a component to handle them.

Create a file called ErrorToast.js under the components directory:

import { useEffect, useState } from 'react';

const ErrorToast = ({ message, duration }) => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
    }, duration);

    return () => clearTimeout(timer);
  }, [duration]);

  if (!visible) return null;

  return <div className="toast">{message}</div>;
};

export default ErrorToast;

And add the following css code to globals.css under the style directory:

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: opacity 0.5s ease-out;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.toast-hide {
  opacity: 0;
}

Now, we can use this error component in TranscribeContainer; whenever we encounter an unexpected error from the API, we will show this error toast briefly to notify the user that something went wrong.

Import the ErrorToast at the top of the file and then paste the following code above the Go Back button in the return statement of our component:

 {error || analysisError ? (
        <ErrorToast message={error || analysisError} duration={5000} />
      ) : null}

Testing with Next.js using Jest

Now, let's add a test to ensure our hooks are working as we expect them to and to alert us to any breaking changes in the code that might be introduced later. First, add the packages below so we can use jest in our project.

yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/react-hooks

Then create a jest.config.js file in the route of the frontend project and add the following code:

const nextJest = require('next/jest');
const createJestConfig = nextJest({
  dir: './',
});
const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};
module.exports = createJestConfig(customJestConfig);

This just sets up Jest ready to be used in Next.js.

Create a test directory and an index.test.js file with the following code:

import { renderHook, act } from '@testing-library/react-hooks';
import { useInsightGpt } from '../hooks/useInsightGpt';
import { callInsightGpt } from '../api/analysis';
import { updateMeeting } from '../api/meetings';
import { updateTranscription } from '../api/transcriptions';

jest.mock('../api/analysis');
jest.mock('../api/meetings');
jest.mock('../api/transcriptions');

describe('useInsightGpt', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('should handle transcription analysis successfully', async () => {
    const mockData = { data: { message: 'Test analysis message' } };
    callInsightGpt.mockResolvedValueOnce(mockData);
    updateTranscription.mockResolvedValueOnce({});

    const { result } = renderHook(() => useInsightGpt());

    await act(async () => {
      await result.current.getAndSaveTranscriptionAnalysis(
        'analysis',
        'input',
        'transcriptionId'
      );
    });

    expect(callInsightGpt).toHaveBeenCalledWith('analysis', 'input');
    expect(updateTranscription).toHaveBeenCalledWith(
      { analysis: 'Test analysis message' },
      'transcriptionId'
    );
    expect(result.current.transcriptionIdLoading).toBe('');
    expect(result.current.analysisError).toBe(null);
  });

  it('should handle overview analysis successfully', async () => {
    const mockData = { data: { message: 'Test overview message' } };
    callInsightGpt.mockResolvedValueOnce(mockData);
    updateMeeting.mockResolvedValueOnce({});

    const { result } = renderHook(() => useInsightGpt());

    await act(async () => {
      await result.current.getAndSaveOverviewAnalysis(
        'overview',
        'input',
        'meetingId'
      );
    });

    expect(callInsightGpt).toHaveBeenCalledWith('overview', 'input');
    expect(updateMeeting).toHaveBeenCalledWith(
      { overview: 'Test overview message' },
      'meetingId'
    );
    expect(result.current.loadingAnalysis).toBe(false);
    expect(result.current.analysisError).toBe(null);
  });

  it('should handle errors in transcription analysis', async () => {
    const mockError = new Error('Test error');
    callInsightGpt.mockRejectedValueOnce(mockError);

    const { result } = renderHook(() => useInsightGpt());

    await act(async () => {
      await result.current.getAndSaveTranscriptionAnalysis(
        'analysis',
        'input',
        'transcriptionId'
      );
    });

    expect(result.current.transcriptionIdLoading).toBe('');
    expect(result.current.analysisError).toBe(
      'Error getting analysis',
      mockError
    );
  });

  it('should handle errors in overview analysis', async () => {
    const mockError = new Error('Test error');
    callInsightGpt.mockRejectedValueOnce(mockError);

    const { result } = renderHook(() => useInsightGpt());

    await act(async () => {
      await result.current.getAndSaveOverviewAnalysis(
        'overview',
        'input',
        'meetingId'
      );
    });

    expect(result.current.loadingAnalysis).toBe(false);
    expect(result.current.analysisError).toBe(
      'Error getting overview',
      mockError
    );
  });
});

Because the hooks use our Strapi API, we need a way to replace the data we're getting back from the API calls. We're using jest.mock to intercept the APIs and send back mock data. This way, we can test our hooks' internal logic without calling the API.

In the first two tests, we mock the API call and return some data, then render our hook and call the correct function. We then check if the correct functions have been called with the correct data from inside the hook. The last two tests just test that errors are handled correctly.

Add the following under scripts in the package.json file:

"test": "jest --watch"

Now open the terminal, navigate to the route directory of the frontend project, and run the following command to check if the tests are passing:

yarn test

You should see a success message like the one below:

As an optional challenge, let's see if you can apply what we did with testing useInsightGpt to testing the other hooks.

Application Demo

Here is what our application looks like.

Deployment with Strapi cloud

Finally, we have the finished application up and running correctly with some tests. The time has come to deploy our project to Strapi cloud.

First, navigate to Strapi and click on "cloud" at the top right.

Connect with GitHub.

From the dashboard, click on Create project.

Choose your GitHub account and the correct repo, fill out the display name, and choose the region.

Now, if you have the same file structure as me, which you should do if you've been following along, then you will just need to add the base directory, so click on Show advanced settings and enter the base directory of /strapi-transcribe-api, then you will need to add all of the environment variables that can be found in the .env file in the route of the strapi project.

Once you have added all of these, click on "create project." This will bring you to a loading screen, and then you will be redirected to the build logs; here, you can just wait for the build to finish.

Once it has finished building, you can click on Overview from the top left. This should direct you to the dashboard, where you will find the details of your deployment and the app URL under Overview on the right.

First, click on your app URL, which will open a new tab and direct you to the welcome page of your Strapi app. Then, create a new admin user, which will log you into the dashboard.

This is a new deployment, and as such, it won't have any of the data we had saved locally; it also won't have carried across the public settings we had on the API, so click on Settings>Users & Permissions Plugin>Roles>Public, expand and select all on Meeting, Transcribe-insight-gpt, and Transcribed-chunk, and then click save in the top right.

Once again, let's just check that our deployment was successful by running the below command in the terminal. Please replace https://yourDeployedUrlHere.com with the URL in the Strapi cloud dashboard.

curl -X POST \
  https://yourDeployedUrlHere.com/api/transcribe-insight-gpt/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "I speak without a mouth and hear without ears. I have no body, but I come alive with the wind. What am I?",
        "operation": "answer"
    }
}'

Deplying Next.js with Vercel

Now we have the API deployed and ready to use, let's deploy our frontend with Vercel.

First, we will need to change the baseUrl in our API files to link to our newly deployed Strapi instance,

Add the following variable to .env.local

NEXT_PUBLIC_STRAPI_URL="your strapi cloud url"

Now go ahead and replace the current value of baseUrl with the following in all three API files:

const baseUrl =
  process.env.NODE_ENV == 'production'
    ? process.env.NEXT_PUBLIC_STRAPI_URL
    : 'http://localhost:1337';

This will just check if the app is running in production. If so, it will use our deployed strap instance. If not, it will revert to localhost. Make sure to push these changes to Github.

Now navigate to Vercel and sign up if you don't already have an account.

Now, let's create a new project by continuing with GitHub.

Once you have verified your account, import the correct GitHub repo

Now we will fill out some configuration details, give the project a name, change the framework preset to Next.js, change the root directory to 'transcribe-frontend', and add the two environment variables from the .env.local file in the Next.js project.

Now click deploy and wait for it to finish. Once deployed, it should redirect you to a success page with a preview of the app.

Now click continue to the dashboard, where you can find information about the app, such as the domain and the deployment logs.

From here, you can click visit to be directed to the app's frontend deployment.

Conclusion

So there you have it! You have now built your transcription app from start to finish. We have gone over how to achieve this with several cutting-edge technologies. We used Strapi for the backend CMS and custom ChatGPT integration, demonstrating how quickly and easily this technology can make building complex web apps. We also covered some architectural patterns with error handling and testing in Next.js, and finally, we deployed the backend to the Strapi cloud. I hope that you have found this series eye-opening and that it will encourage you to bring your ideas to life.

Additional Resources

Github link to the complete code.

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 2

Michael — Sat, 07 Sep 2024 11:07:31 +0000

Introduction

In the first part of this series, we introduced the project's concept, explained the technologies we will use, coded the portion of the frontend that uses Whisper to transcribe recorded audio, and then coded the relevant UI. In this part of the series, we will incorporate Strapi CMS to save data with our own custom API and then show how to hook this up to the frontend code.

Outline

You can find the outline for this series below:

Part 1: Implement Audio Recording and User Interface
Part 2: Incorporate Strapi CMS and Save Transcriptions
Part 3: Implement connection to chatGPT and deploy to Strapi cloud

How to Install Strapi

Let's create a folder containing the source code for our Strapi CMS API. First, open a terminal and navigate to the root directory transcribe-tutorial, and run the command below:

npx create-strapi-app@latest strapi-transcribe-api

We should receive a confirmation once this is complete and it finishes installing the dependencies.

It should automatically direct us to the Strapi dashboard as it starts our project. We must create our administrator here, so fill out the form and click the "Let's start" button.

We should now see the dashboard, which looks like this:

Create Strapi Collection Types and Fields

We will need to create data structures to save data to the Content management system (CMS).

Navigate to the dashboard in your browser, and on the left-hand side menu, select Content-Type Builder, which should bring you to the below screen:

Click on Create new collection type to open a form where you can specify the name and type of the data you wish to store.

Perhaps a word on how the app will be displayed before we describe the shape of the data. It will display chunks of transcribed text alongside an analysis or description of said parts, and we will also display an overview of the meeting at the top. Here is the data structure:

const meeting = {
  title: "",
  overview: "",
  ended: false,
  transcribedChunks: [
    {
      text: "",
      analysis: "",
      answer: ""
    },
    {
      text: "",
      analysis: "",
      answer: ""
    }
  ]
};

Create Strapi Collections for Meetings and Transcriptions

This means we will create two collections: meetings and transcribed chunks. One meeting will have many transcribed chunks, requiring us to set up a one-to-many relationship between these two collections.

Our data structure also has the field ended, allowing us to lock the meeting for further transcriptions once it has finished.

First, let's create the transcribed-chunks collection by typing transcribed-chunk into the display name field and clicking continue:

Create all three of the fields mentioned above:

text
analysis
answer with a type of Long text:

Then click finish; at the top right-hand corner, click save. Clicking this will trigger a server restart; just wait for that to finish.

Now, we will create our meeting collection and the relationship between it and the transcribed chunks. Click on create new collection type again, type meeting for the name of our collection, and then click continue.

Create the following fields:
a text field for the

title (Short Text)
overview (Long Text)
ended (relation:meeting has many transcribed-chunks):

Then click Finish and save in the top right-hand corner. Now that we have the CMS set up, we can save meetings with an overview generated by AI. We also have a boolean field named ended to indicate that the meeting has finished and that it is a record of what was transcribed. Each meeting will have an array of many transcribed chunks that will contain the transcribed text and a mix of answers or analyses depending on what the user has chosen to generate.

Enable API Public Access

By default, Strapi requires authentication to query the API and receive information, but that is outside the scope of this tutorial. Instead, we will make our API publicly accessible. Learn more about Guide on Authenticating Requests with the REST API..

From the left sidebar, click on Settings. Again, on the left panel under USERS & PERMISSIONS PLUGIN, click on Roles, then click on Public from the table on the right. Now scroll down, click on Meeting, and tick Select all. Then click on Transcribed-chunk and do the same. Then save in the top right to allow the user to access information without authentication.

How to connect Strapi with Next.js

Now that the Strapi backend is set up to save and display our transcriptions, let's code the API calls in the frontend and connect between the frontend and backend.

We must create a meeting record every time a user clicks on New meeting on the dashboard. To ensure a record is created in the database, we will first call the API to create a meeting, and once we have confirmation, we will navigate to the transcription page.

Setting Up the API Structure

First, create an api folder in the root directory to manage our API calls. This will help us maintain clean and modular code by keeping all of our API interactions in one place and making them easier to manage.

Inside the api folder, create a file called meetings.js and paste in the following code:

const baseUrl = 'http://localhost:1337';
const url = `${baseUrl}/api/meetings`;

export async function fetchMeetings() {
  try {
    const res = await fetch(url);
    return await res.json();
  } catch (e) {
    console.error('Error fetching meetings:', error);
    throw error;
  }
}

export async function createNewMeeting() {
  // Create new empty meeting
  const payload = {
    data: {
      title: '',
      overview: '',
      ended: false,
      transcribed_chunks: [],
    },
  };

  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    return await res.json();
  } catch (error) {
    console.error('Error creating new meeting:', error);
    throw error;
  }
}

fetchMeetings will call the Strapi API to get all of the meeting records from the database, and createNewMeeting will create a new empty meeting in the database ready to save information.

Create Custom React Hooks for Meetings

Now that we have a place to keep our API calls, let's create a react hook that will look after some of the logic and state surrounding the meeting collection. This way, if our application grows and we need to do anything with the meeting collection in other components, we can just import and re-use this logic. Conveniently, there will be just one place we need to change the code and one place to test it.

Create and Import the `useMeetings` Hook

So in the main directory, create a folder called hooks, and inside, create a file called useMeetings.js and paste the following code:

import { useState } from 'react';
import {
  fetchMeetings,
  createNewMeeting,
} from '../api/meetings';

export const useMeetings = () => {
  const [meetings, setMeetings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getMeetings = async () => {
    try {
      const response = await fetchMeetings();
      const { data } = await response;

      setMeetings(data);
      setLoading(false);
    } catch (error) {
      setError(error);
      setLoading(false);
    }
  };

  const createMeeting = async () => {
    try {
      const response = await createNewMeeting();
      const { data } = await response;

      return data;
    } catch (error) {
      setError(error);
    }
  };


  return {
    meetings,
    createMeeting,
    getMeetings,
    loading,
    error,
  };
};

Now, let's import this logic in to our main MeetingDashboardContainer:

import React, { useEffect } from 'react';
import styles from '../styles/Meeting.module.css';
import MeetingCard from '../components/meeting/MeetingCard';
import { useRouter } from 'next/router';
import { useMeetings } from '../hooks/useMeetings';

const MeetingDashboardContainer = () => {
  const router = useRouter();
  const {
    meetings,
    loading,
    error,
    getMeetings,
    createMeeting,
  } = useMeetings();

  useEffect(() => {
    fetchMeetings();
  }, []);

  const fetchMeetings = async () => {
    await getMeetings();
  };

  const handleNewMeeting = async () => {
    try {
      // Call the API to create a new meeting
      const newMeeting = await createMeeting();

      // Route to transcription page and pass the newly created meeting id
      router.push(`/transcription?meetingId=${newMeeting.id}`);
    } catch (error) {
      console.error('Error creating new meeting:', error);
      alert('Failed to create a new meeting. Please try again.');
    }
  };

  const openMeeting = (meetingId) => {
    router.push(`/transcription?meetingId=${meetingId}`);
  };


  return (
    <div id={styles['meeting-container']}>
      <div className={styles['cs-container']}>
        <div className={styles['cs-content']}>
          <div className={styles['cs-content-flex']}>
            <span className={styles['cs-topper']}>Meeting dashboard</span>
            <h2 className={styles['cs-title']}>Start a new meeting!</h2>
          </div>
          <button
            onClick={handleNewMeeting}
            className={styles['cs-button-solid']}
          >
            New meeting
          </button>
        </div>
        <ul className={styles['cs-card-group']}>
          {loading ? (
            <p>Loading...</p>
          ) : error ? (
            <p>Error loading previous meetings</p>
          ) : (
            meetings?.map((val, i) => {
              const { title, overview } = val.attributes;
              return (
                <MeetingCard
                  key={val.id}
                  title={title}
                  id={val.id}
                  overview={overview}
                  openMeeting={openMeeting}
                />
              );
            })
          )}
        </ul>
      </div>
    </div>
  );
};

export default MeetingDashboardContainer;

In the useEffect lifecycle hook:

We are fetching any previous meetings to display when the component first mounts.
We have a function called handleNewMeeting used when the user clicks the new meeting button.
This creates a new meeting using the function from our hook.
This then routes to the transcription component and passes through the newly created meetingId.

Open Previous Meetings Using the `openMeeting` Function

We also have a function called openMeeting passed to the MeetingCard component. This allows us to open previous meetings by routing to the transcription component and passing through the meetingId.

Update the MeetingCard component like so:

import styles from '../../styles/Meeting.module.css';

const MeetingCard = ({ title, id, overview, openMeeting }) => {
  return (
    <li className={styles['cs-item']}>
      <div className={styles['cs-flex']}>
        <div style={{ display: 'flex', width: '100%' }}>
          <h3 className={styles['cs-h3']}>{title}</h3>
        </div>
        <p className={styles['cs-item-text']}>{overview}</p>
        <p onClick={() => openMeeting(id)} className={styles['cs-link']}>
          Open meeting
          <img
            className={styles['cs-arrow']}
            loading="lazy"
            decoding="async"
            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/event-chevron.svg"
            alt="icon"
            width="20"
            height="20"
            aria-hidden="true"
          />
        </p>
      </div>
    </li>
  );
};

export default MeetingCard;

Fetch Meeting Details Using the `fetchMeetingDetails` Function

Now, because we are passing the meetingId to the transcription container, we will need a way to request the details of a specific meeting using the id; let's add this functionality to the app.

First, let's create another fetch request in our meetings.js API file called fetchMeetingDetails:

export async function fetchMeetingDetails(meetingId) {
  try {
    const response = await fetch(
      `${baseUrl}/api/meetings/${meetingId}?populate=*`
    );

    return await response.json();
  } catch (error) {
    console.error('Error fetching meeting details:', error);
    throw error;
  }
}

This function takes the meetingId and interpolates it into the URL. We also add a parameter ?populate=* to populate any relations. In our case, this will be any transcribed_chunks our meeting has saved.

Let's add this API call to our useMeetings.js hooks file so we can import it in and use it easily in the TranscribeContainer.js

We just need to make sure we import it at the top:

import {
  fetchMeetings,
  fetchMeetingDetails,
  createNewMeeting,
} from '../api/meetings';

Add useState so we can save the details:

const [meetingDetails, setMeetingDetails] = useState({});

Paste this new function in, which just uses the API to get the details with the meetingId:

const getMeetingDetails = async (meetingId) => {
    setLoading(true);
    try {
      const response = await fetchMeetingDetails(meetingId);
      const { data } = await response;

      setLoading(false);
      setMeetingDetails(data.attributes);
    } catch (error) {
      setError(error);
      setLoading(false);
    }
  };

And export the function and state in the return statement:

return {
    meetings,
    getMeetingDetails,
    createMeeting,
    getMeetings,
    loading,
    error,
    meetingDetails,
  };

Now, when we route to the transcription container we can use this hook to fetch the individual meeting details with our new function easily, replace the code in TranscribeContainer with the following:

import React, { useState, useEffect } from 'react';
import styles from '../styles/Transcribe.module.css';
import { useAudioRecorder } from '../hooks/useAudioRecorder';
import RecordingControls from '../components/transcription/RecordingControls';
import TranscribedText from '../components/transcription/TranscribedText';
import { useRouter } from 'next/router';
import { useMeetings } from '../hooks/useMeetings';

const mockAnswer =
  'Example answer to transcription here: Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!';
const mockAnalysis =
  'Example analysis to transcription here: Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!';

const TranscribeContainer = ({ streaming = true, timeSlice = 1000 }) => {
  const router = useRouter();
  const [analysis, setAnalysis] = useState('');
  const [answer, setAnswer] = useState('');
  const [meetingId, setMeetingId] = useState(null);
  const [meetingTitle, setMeetingTitle] = useState('');
  const {
    getMeetingDetails,
    loading,
    error,
    meetingDetails,
  } = useMeetings();
  const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
  const whisperApiEndpoint = 'https://api.openai.com/v1/audio/';
  const { recording, transcribed, handleStartRecording, handleStopRecording } =
    useAudioRecorder(streaming, timeSlice, apiKey, whisperApiEndpoint);

  useEffect(() => {
    const fetchDetails = async () => {
      if (router.isReady) {
        const { meetingId } = router.query;
        if (meetingId) {
          try {
            await getMeetingDetails(meetingId);
            setMeetingId(meetingId);
          } catch (err) {
            console.log('Error getting meeting details - ', err);
          }
        }
      }
    };

    fetchDetails();
  }, [router.isReady, router.query]);

  useEffect(() => {
    setMeetingTitle(meetingDetails.title);
  }, [meetingDetails]);

  const handleGetAnalysis = () => {
    setAnalysis(mockAnalysis);
  };

  const handleGetAnswer = () => {
    setAnswer(mockAnswer);
  };

  const handleStopMeeting = () => {};

  if (loading) return <p>Loading...</p>;

  return (
    <div style={{ margin: '20px' }}>
      <button
        className={styles['end-meeting-button']}
        onClick={handleStopMeeting}
      >
        End Meeting
      </button>

       <input
          onChange={(e) => setMeetingTitle(e.target.value)}
          value={meetingTitle}
          type="text"
          placeholder="Meeting title here..."
          className={styles['custom-input']}
        />
      <div>
        <RecordingControls
          handleStartRecording={handleStartRecording}
          handleStopRecording={handleStopRecording}
        />
        {recording ? (
          <p className={styles['primary-text']}>Recording</p>
        ) : (
          <p>Not recording</p>
        )}
        {transcribed && <h1>Current transcription</h1>}
        <TranscribedText
          transcribed={transcribed}
          answer={answer}
          analysis={analysis}
          handleGetAnalysis={handleGetAnalysis}
          handleGetAnswer={handleGetAnswer}
        />
      </div>
    </div>
  );
};

export default TranscribeContainer;

In the lifecycle hook useEffect above:

We destructure the meetingId parameter passed to the router.
Pass it to the getMeetingDetails function in our hook.
Once that asynchronous request is complete, we set the meeting ID in the state, and the meeting details will now be available to us from the hook.

We will use this to display things like the title and meeting transcriptions.

Create a New Transcription in Strapi

Now, we can start a new meeting, which creates a new record in the database. We have the meetingId in the TranscribeContainer component, which we can use to call the API to save the transcribed_chunks to that particular meeting.

Implement the `createNewTranscription` Function

First, we need a way to create a new transcribed_chunk. Let's create another file called transcriptions.js in the api directory with the following code:

const baseUrl = 'http://localhost:1337';
const url = `${baseUrl}/api/transcribed-chunks`;

export async function createNewTranscription(transcription) {
  const payload = {
    data: {
      text: transcription,
      analysis: '',
      answer: '',
    },
  };

  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    return await res.json();
  } catch (error) {
    console.error('Error saving meeting:', error);
    throw error;
  }
}

This POST request will create a new transcribed_chunk record in the database with the text field filled with the transcribed text. We will call the request and then take the ID of the new transcription to link to our meeting.

Link a Transcription to a Meeting

Let's create the API call to link the transcribed text to our meeting. Paste the following code into meetings.js:

export async function connectTranscriptionToMeeting(
  meetingId,
  meetingTitle,
  transcriptionId
) {
  const updateURL = `${baseUrl}/api/meetings/${meetingId}`;
  const payload = {
    data: {
      title: meetingTitle,
      transcribed_chunks: {
        connect: [transcriptionId],
        position: { start: true },
      },
    },
  };

  try {
    const res = await fetch(updateURL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    return await res.json();
  } catch (error) {
    console.error('Error connecting transcription to meeting:', error);
    throw error;
  }
}

We are linking the transcribed text to our meeting by:

Using a PUT request to update our meeting,
Using the connect parameter to save our newly created transcribed_chunk to our meeting.
Then, we use the position argument to define the order of our relations. In our case, every new transcription will be saved to the start of the array.

You can read more about how to handle relations in Strapi here.

Open up the useMeetings hook file and paste the following function in to handle this new functionality:

const saveTranscriptionToMeeting = async (meetingId, meetingTitle, transcriptionId) => {
    try {
      await connectTranscriptionToMeeting(meetingId, meetingTitle, transcriptionId);
    } catch (error) {
      setError(error);
    }
  };

Like before, import the method connectTranscriptionToMeeting and return thesaveTranscriptionToMeeting from the hook.

Implement Saving Transcriptions

Now, we're ready to start saving our transcriptions to our meetings. Open TranscribeContainer and import the createNewTranscription method at the top of the file.

import { createNewTranscription } from '../api/transcriptions';

Add saveTranscriptionToMeeting to the list of methods we are destructuring from the useMeetings hook, and add the following async function to the component:

const stopAndSaveTranscription = async () => {
    // save transcription first
    let {
      data: { id: transcriptionId },
    } = await createNewTranscription(transcribed);

    // make a call to save the transcription chunk here
    await saveTranscriptionToMeeting(meetingId, meetingTitle, transcriptionId);
    // re-fetch current meeting which should have updated transcriptions
    await getMeetingDetails(meetingId);
    // Stop and clear the current transcription as it's now saved
    handleStopRecording();
  };

We save the transcription and await the call to destructure the ID.
Then, we save the transcription to our meeting by creating the relation.
We re-fetch the meeting details so we can display a history of the transcriptions
We call handleStopRecording to stop the recording.

Display History of Transcriptions

Now, we will want to display the history of transcription, which we can get from meetingdetails. Add the following variable to the top of TranscribeContainer under the useMeetings hook:

const transcribedHistory = meetingDetails?.transcribed_chunks?.data;

Here, we access the data from the transcribed_chunks array and assign it to a variable with a more readable name.

And then, in the return statement of TranscribeContainer under the TranscribedText add the following:

{/*Transcribed history*/}
<h1>History</h1>
{transcribedHistory?.map((val, i) => {
    const transcribedChunk = val.attributes;
    return (
        <TranscribedText
          key={i}
          transcribed={transcribedChunk.text}
          answer={transcribedChunk.answer}
          analysis={transcribedChunk.analysis}
          handleGetAnalysis={handleGetAnalysis}
          handleGetAnswer={handleGetAnswer}
        />
      );
    })}

You should now be able to view the history of transcriptions as demonstrated below:

Implement Function to End a Meeting

Now, let's add a way for the user to end the meeting, which will lock it to further transcriptions by changing the ended parameter on the meeting to true. We can also request a meeting overview, which will be covered later in this series.

Under the api directory in meetings.js add the following method, which will update our meetings:

export async function updateMeeting(updatedMeeting, meetingId) {
  const updateURL = `${baseUrl}/api/meetings/${meetingId}`;
  const payload = {
    data: updatedMeeting,
  };

  try {
    const res = await fetch(updateURL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    return await res.json();
  } catch (error) {
    console.error('Error updating meeting:', error);
    throw error;
  }
}

With this PUT request, we can just pass our meeting object with the fields we want to be updated to this method, and Strapi will update any fields we include and leave the rest as they are. For instance, we could include updated values for ended and overview, but transcribed_chunks will be left as they are.

Add the following function to the useMeetings hook and remember to import the API method and return this function:

const updateMeetingDetails = async (updatedMeeting, meetingId) => {
    try {
      await updateMeeting(updatedMeeting, meetingId);
    } catch (error) {
      setError(error);
    }
  };

Now add the following function to the TranscribeContainer component, remembering to destructure the updateMeetingDetails method from the useMeetings hook:

const handleStopMeeting = async () => {
    await updateMeetingDetails(
      {
        title: meetingTitle,
        ended: true,
      },
      meetingId
    );

    // re-fetch meeting details
    await getMeetingDetails(meetingId);
    setTranscribed("")
  };

Just below the useMeetings hook in this component add the following variable:

const { ended } = meetingDetails;

The above code is just destructuring ended from meetingDetails.

Now replace the code in the return statement for TranscribeContainer as below:

return (
    <div style={{ margin: '20px' }}>
      {ended && (
        <button onClick={handleGoBack} className={styles.goBackButton}>
          Go Back
        </button>
      )}
      {!ended && (
        <button
          className={styles['end-meeting-button']}
          onClick={handleStopMeeting}
        >
          End Meeting
        </button>
      )}
      {ended ? (
        <p className={styles.title}>{meetingTitle}</p>
      ) : (
        <input
          onChange={(e) => setMeetingTitle(e.target.value)}
          value={meetingTitle}
          type="text"
          placeholder="Meeting title here..."
          className={styles['custom-input']}
        />
      )}
      <div>
        {!ended && (
          <div>
            <RecordingControls
              handleStartRecording={handleStartRecording}
              handleStopRecording={stopAndSaveTranscription}
            />
            {recording ? (
              <p className={styles['primary-text']}>Recording</p>
            ) : (
              <p>Not recording</p>
            )}
          </div>
        )}

        {/*Current transcription*/}
        {transcribed && <h1>Current transcription</h1>}
        <TranscribedText
          transcribed={transcribed}
          answer={answer}
          analysis={analysis}
          handleGetAnalysis={handleGetAnalysis}
          handleGetAnswer={handleGetAnswer}
        />

        {/*Transcribed history*/}
        <h1>History</h1>
        {transcribedHistory?.map((val, i) => {
          const transcribedChunk = val.attributes;
          return (
            <TranscribedText
              key={i}
              transcribed={transcribedChunk.text}
              answer={transcribedChunk.answer}
              analysis={transcribedChunk.analysis}
              handleGetAnalysis={handleGetAnalysis}
              handleGetAnswer={handleGetAnswer}
            />
          );
        })}
      </div>
    </div>
  );

These are just some minor changes to the UI. If the meeting has ended, we hide the end meeting button and transcription controls, lock the title for further editing, and show the go back button.

Add the following method so the user can navigate back to the dashboard once they have ended the meeting:

 const handleGoBack = () => {
    router.back();
  };

Delete Recordings of a Meeting

Let's add a way for the user to delete meetings from the dashboard.

Under the api directory in the meetings.js file add the following method:

export async function deleteMeeting(meetingId) {
  try {
    const response = await fetch(`${baseUrl}/api/meetings/${meetingId}`, {
      method: 'DELETE',
    });

    return await response.json();
  } catch (error) {
    console.error('Error deleting meeting:', error);
    throw error;
  }
}

We just send a DELETE request with the meetingId through to the Strapi API.

Add the following function to the useMeetings hook, remembering to import the method from the API directory, and return our new function from the hook:

const deleteMeetingDetails = async (meetingId) => {
    try {
      await deleteMeeting(meetingId);
    } catch (error) {
      setError(error);
    }
  };

In the MeetingDashboardContainer file, first destructure deleteMeetingDetails from the useMeeting hook, then add the following function:

const deleteMeeting = async (meetingId) => {
    try {
      await deleteMeetingDetails(meetingId);
      // refetch meeting dashboard data
      await getMeetings();
    } catch (error) {
      console.error('Error deleting meeting:', error);
      alert('Failed to delete meeting. Please try again.');
    }
  };

Now pass deleteMeeting to the MeetingCard component and replace its code with the following:

import styles from '../../styles/Meeting.module.css';

const MeetingCard = ({ title, id, overview, openMeeting, deleteMeeting }) => {
  return (
    <li className={styles['cs-item']}>
      <div className={styles['cs-flex']}>
        <div style={{ display: 'flex', width: '100%' }}>
          <h3 className={styles['cs-h3']}>{title}</h3>
          <div
            onClick={() => deleteMeeting(id)}
            style={{
              marginLeft: 'auto',
              cursor: 'pointer',
              padding: '5px',
            }}
          >
            X
          </div>
        </div>
        <p className={styles['cs-item-text']}>{overview}</p>
        <p onClick={() => openMeeting(id)} className={styles['cs-link']}>
          Open meeting
          <img
            className={styles['cs-arrow']}
            loading="lazy"
            decoding="async"
            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/event-chevron.svg"
            alt="icon"
            width="20"
            height="20"
            aria-hidden="true"
          />
        </p>
      </div>
    </li>
  );
};

export default MeetingCard;

Now, the user can create new meetings and save information such as transcriptions, titles, etc. They can also end meetings, locking out any further editing. They also now have the ability to delete meetings when they are no longer relevant.

Stay Tuned for Part 3

In part three of this series, we will create custom endpoints to link our transcription app to chatGPT. We will also run through some testing, error handling, and how to deploy the app to Strapi cloud.

Additional Resources

Github link to the complete code.

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 1

Michael — Thu, 29 Aug 2024 09:12:30 +0000

Introduction

Imagine having an AI assistant listen in on your video calls, write down everything being said, and then offer suggestions, answers, and analysis in real time.
This series will show you how to build your very own transcription app that does just that.

You can find the outline for the upcoming series here.

Part 1: Implement the UI.
Part 2: Implement Strapi backend and connect API.
Part 3: Implement connection to chatGPT and deploy to Strapi cloud.

By the end of this tutorial series, you will be proficient in using Next.js, Strapi, ChatGPT, and Whisper to create interesting full-stack apps that incorporate cutting-edge AI technology to enhance functionality.

Below is a demo of what we will be building:

Prerequisites

To follow this tutorial, you will need the following:

An OpenAI (ChatGPT) account and API key.
Package manager (yarn or npm).
Node.js (v16 or v18).
Code editor (Visual Studio code, Sublime).
Basic knowledge of Javascript.
Basic knowledge of Strapi

Why is Transcription Important?

Transcription apps are helping people communicate more effectively. Imagine environments with lots of noise or where there may be language barriers and how AI-assisted audio conversion into text might help. Or imagine how this might help you participate more in conversations if you have a hearing impairment.

AI-powered transcription apps offer a unique advantage in understanding and analyzing meetings. By providing a comprehensive record of conversations and responses, these apps, like ours, leverage technologies such as ChatGPT to enhance clarity and provide valuable insights.

Technology Overview

Let's briefly discuss the technology and tools we will be using and their role in helping this app come together.

What is Strapi?

Strapi or Strapi CMS is an open-source headless content management system allowing us to quickly create APIs. We will use Strapi CMS to build our custom API, which will access ChatGPT, and we will use Strapi CMS to store data about the transcriptions, such as conversation history.

What is Next.js?

What is Whisper?

Created by OpenAI, Whisper is a machine-learning transcription and speech recognition model. We will use the OpenAI API to connect with Whisper for speech recognition and transcription.

What is ChatGPT?

OpenAI also created ChatGPT, an AI chatbot that can respond to questions and produce various results, such as articles, essays, code, or emails. We will connect to ChatGPT to explain and analyze our transcribed text.

Strapi Cloud

Strapi Cloud is a cloud platform that makes it simple for developers to create, launch, and maintain online apps and services; this is where we will host the Strapi backend for the app (We will use Vercel or Netlify for the frontend). Visit Strapi Cloud to learn more about Strapi Cloud pricing and more.

How to Setup Next.js

Let's create our frontend directory. Navigate to the main folder, which we will call transcribe-tutorial, and enter the following command in the terminal.

npx create-next-app transcribe-frontend

Navigate to this newly created directory and run the following.

yarn dev

This should start and run the project in http://localhost:3000, when accessed through the web browser, we should be able to see the image below:

Let's do a bit of preliminary setup here; in transcribe-frontend, navigate to pages/index.js. This will be the entry point to our application; delete everything inside this file and paste the following:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Strapi Transcribe</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a target="_blank" href="https://strapi.io">Strapi Transcribe!</a>
        </h1>
      </main>

      <footer className={styles.footer}>Powered by Strapi</footer>
    </div>
  );
}

Let's install some of the libraries we will use on the frontend. First, we need recordrtc, which will handle the recording process and give us access to raw data captured from the device's microphone. Next, we will use lamejs, which will help us process the data to encode it into MP3 format. We will also need axios to make network calls to OpenAI whisper, so run the following command in the terminal to install these libraries.

yarn add recordrtc @breezystack/lamejs axios

Set Up Environment Variable for OpenAI

Create a .env.local file in the root directory and then add the below environment variable with your OpenAI API key:

NEXT_PUBLIC_OPENAI_API_KEY="Paste your API key here"

Next.js Project structure

We will be using the container/presentational pattern to structure the application. This will separate the logic from the presentation (UI rendering). This makes the components easier to understand, helps reusability, and is more testable. The layout for our file structure is below: TranscribeContainer will host all of our state and logic. Then, we have the components directory, which will be presentational, and the utils directory to handle the recording and transcription.

components/
  RecordingControls.js
  TranscriptionDisplay.js
containers/
  TranscribeContainer.js
pages/
  _app.js
  index.js
hooks/
  useAudioRecorder.js
utils/
  transcriptionService.js

How to Capture Audio with `recordrtc`

First of all, let's learn how we can capture audio. We will use recordrtc, a Javascript library that uses the Web Real-Time Communication (WebRTC) API to capture media streams from the systems microphone. WebRTC provides an easy-to-use interface for handling recordings.

Create Custom Hooks for Audio Capture

Create a directory named hooks and then a file inside called useAudioRecorder.js. We will keep all of the logic and state for recording audio in this hook; if the application grows in size, this will allow us to use the logic elsewhere in the app without having to repeat ourselves.

Our custom hook will have five functions. Let's go over the code for each one:

const handleStartRecording = async () => {
    try {
      setTranscribed('');

      if (!stream.current) {
        await onStartStreaming();
      }
      if (stream.current) {
        if (!recorder.current) {
          const {
            default: { RecordRTCPromisesHandler, StereoAudioRecorder },
          } = await import('recordrtc');
          const recorderConfig = {
            mimeType: 'audio/wav',
            numberOfAudioChannels: 1,
            recorderType: StereoAudioRecorder,
            sampleRate: 44100,
            timeSlice: streaming ? timeSlice : undefined,
            type: 'audio',
            ondataavailable: streaming ? onDataAvailable : undefined,
          };
          recorder.current = new RecordRTCPromisesHandler(
            stream.current,
            recorderConfig
          );
        }
        if (!encoder.current) {
          const { Mp3Encoder } = await import('@breezystack/lamejs');
          encoder.current = new Mp3Encoder(1, 44100, 96);
        }
        const recordState = await recorder.current.getState();
        if (recordState === 'inactive' || recordState === 'stopped') {
          await recorder.current.startRecording();
        }

        setRecording(true);
      }
    } catch (err) {
      console.error(err);
    }
  };

handleStartRecording Hook: This function is asynchronous because we will be making network calls, which we will have to wait for. First, we set the last transcribed text to an empty string to make way for the newly transcribed data; then we check if there's a current audio stream; if there isn't, then we start it with the onStartStreaming function:

const onStartStreaming = async () => {
    try {
      if (stream.current) {
        stream.current.getTracks().forEach((track) => track.stop());
      }
      stream.current = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
    } catch (err) {
      console.error(err);
    }
  };

onStartStreaming Hook: This function checks if we have a current stream of audio from our speakers; if so, then it stops it; if not, then it uses the navigator.mediaDevices.getUserMedia method, which prompts the user for permission to use a media input that produces a MediaStream. We're requesting audio here, { audio: true}, then we save it to a stream Ref, which we will initialise at the start of the hook and pass this audio stream to recordrtc.

Next, we check that the stream started and that there's not already a recorder so we can start the initialization object and save it to our recorder Ref.

Set up Recorder Configuration

Now that we have the stream up and running and it has passed some initial checks, we dynamically import recordrtc (dynamically importing will save space and make our program run faster), then we destructure the RecordRTCPromiseHandler and StereoAudioRecorder, and set up the configuration object.

The most important parts of the configuration object are:

recorderType, where we pass in the StereoAudioRecorder, which is a class from recordrtc designed to record audio;
timeslice: which determines how often data is sent back to the application; it will call onDataAvailable in the interval we have specified with timeSlice;
onDataAvailable also checks if we are streaming; if so, it will call the function we passed to it, which is onDataAvailable; Once we have that configured, we assign a new instance of the RecordRTCPromiseHandler to the recorder Ref, passing in the audio stream Ref and the recorderConfig.

Set up Audio Encoder

So our recorder has been initialized, and now we set up our encoder. We dynamically import lamejs and assign our encoder to the encoder Ref.

Lastly, we check the recorder's state to see if it's inactive or stopped, and then we start recording.

const onDataAvailable = async (data) => {
    try {
      if (streaming && recorder.current) {
        if (encoder.current) {
          const buffer = await data.arrayBuffer();
          const mp3chunk = encoder.current.encodeBuffer(new Int16Array(buffer));
          const mp3blob = new Blob([mp3chunk], { type: 'audio/mpeg' });
          chunks.current.push(mp3blob);
        }
        const recorderState = await recorder.current.getState();
        if (recorderState === 'recording') {
          const blob = new Blob(chunks.current, { type: 'audio/mpeg' });
          const file = new File([blob], 'speech.mp3', { type: 'audio/mpeg' });
          const text = await transcriptionService(
            file,
            apiKey,
            whisperApiEndpoint,
            'transcriptions'
          );
          setTranscribed(text);
        }
      }
    } catch (err) {
      console.error(err);
    }
  };

So, as discussed, when we are recording, recordrtc will call onDataAvailable periodically with chunks of audio data.

onDataAvailable Hook: This checks if we are streaming audio and have a current recorder to avoid errors. This is where we will encode our audio to MP3. First, it checks if an encoder is available; if it is, it converts the received audio data into an array buffer, encodes this buffer into MP3 format, and then pushes it to our chunks Ref.

Next, it gets the recorder state to check if we are still recording, then concatenates the MP3 chunks into a single blob, which it packages into a File object. Now we have our audio file, which we send to whisper to transcribe with transcriptionService. This is just a util function, which I will explain later, and then we set the transcribed text in state to be displayed in the UI.

The other functions we have are handleStopRecording and onStopStreaming:

 const handleStopRecording = async () => {
    try {
      if (recorder.current) {
        const recordState = await recorder.current.getState();
        if (recordState === 'recording' || recordState === 'paused') {
          await recorder.current.stopRecording();
        }

        onStopStreaming();
        setRecording(false);

        await recorder.current.destroy();
        chunks.current = [];
        if (encoder.current) {
          encoder.current.flush();
          encoder.current = undefined;
        }
        recorder.current = undefined;
      }
    } catch (err) {
      console.error(err);
    }
  };

handleStopRecording Hook: This gets the current state to make sure we are actually recording and then makes a call to stop it; it also calls the onStopStreaming function.
onStopStreaming Hook: This checks if we have a current audio stream and stop it if so:

const onStopStreaming = () => {
    if (stream.current) {
      stream.current.getTracks().forEach((track) => track.stop());
      stream.current = undefined;
    }
  };

Implementing The Audio Recording Feature

It is time to implement the recording feature of this app to allow users transcribe from their system's mic input.

Paste the entire code into your useAudioRecorder.js file:

import { useState, useRef, useEffect } from 'react';
import { transcriptionService } from '../utils/transcriptionService';

export const useAudioRecorder = (
  streaming,
  timeSlice,
  apiKey,
  whisperApiEndpoint
) => {
  const chunks = useRef([]);
  const encoder = useRef();
  const recorder = useRef();
  const stream = useRef();
  const [recording, setRecording] = useState(false);
  const [transcribed, setTranscribed] = useState('');

  useEffect(() => {
    return () => {
      if (chunks.current) {
        chunks.current = [];
      }
      if (encoder.current) {
        encoder.current.flush();
        encoder.current = undefined;
      }
      if (recorder.current) {
        recorder.current.destroy();
        recorder.current = undefined;
      }

      if (stream.current) {
        stream.current.getTracks().forEach((track) => track.stop());
        stream.current = undefined;
      }
    };
  }, []);

  const onStartStreaming = async () => {
    try {
      if (stream.current) {
        stream.current.getTracks().forEach((track) => track.stop());
      }
      stream.current = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
    } catch (err) {
      console.error(err);
    }
  };

  const onStopStreaming = () => {
    if (stream.current) {
      stream.current.getTracks().forEach((track) => track.stop());
      stream.current = undefined;
    }
  };

  const handleStartRecording = async () => {
    try {
      setTranscribed('');

      if (!stream.current) {
        await onStartStreaming();
      }
      if (stream.current) {
        if (!recorder.current) {
          const {
            default: { RecordRTCPromisesHandler, StereoAudioRecorder },
          } = await import('recordrtc');
          const recorderConfig = {
            mimeType: 'audio/wav',
            numberOfAudioChannels: 1,
            recorderType: StereoAudioRecorder,
            sampleRate: 44100,
            timeSlice: streaming ? timeSlice : undefined,
            type: 'audio',
            ondataavailable: streaming ? onDataAvailable : undefined,
          };
          recorder.current = new RecordRTCPromisesHandler(
            stream.current,
            recorderConfig
          );
        }
        if (!encoder.current) {
          const { Mp3Encoder } = await import('@breezystack/lamejs');
          encoder.current = new Mp3Encoder(1, 44100, 96);
        }
        const recordState = await recorder.current.getState();
        if (recordState === 'inactive' || recordState === 'stopped') {
          await recorder.current.startRecording();
        }

        setRecording(true);
      }
    } catch (err) {
      console.error(err);
    }
  };

  const handleStopRecording = async () => {
    try {
      if (recorder.current) {
        const recordState = await recorder.current.getState();
        if (recordState === 'recording' || recordState === 'paused') {
          await recorder.current.stopRecording();
        }

        onStopStreaming();
        setRecording(false);

        await recorder.current.destroy();
        chunks.current = [];
        if (encoder.current) {
          encoder.current.flush();
          encoder.current = undefined;
        }
        recorder.current = undefined;
      }
    } catch (err) {
      console.error(err);
    }
  };

  const onDataAvailable = async (data) => {
    try {
      if (streaming && recorder.current) {
        if (encoder.current) {
          const buffer = await data.arrayBuffer();
          const mp3chunk = encoder.current.encodeBuffer(new Int16Array(buffer));
          const mp3blob = new Blob([mp3chunk], { type: 'audio/mpeg' });
          chunks.current.push(mp3blob);
        }
        const recorderState = await recorder.current.getState();
        if (recorderState === 'recording') {
          const blob = new Blob(chunks.current, { type: 'audio/mpeg' });
          const file = new File([blob], 'speech.mp3', { type: 'audio/mpeg' });
          const text = await transcriptionService(
            file,
            apiKey,
            whisperApiEndpoint,
            'transcriptions'
          );
          setTranscribed(text);
        }
      }
    } catch (err) {
      console.error(err);
    }
  };

  return {
    recording,
    transcribed,
    handleStartRecording,
    handleStopRecording,
    setTranscribed,
  };
};

In the code above, you may notice that we have a useEffect cleanup hook. This is just to ensure that any allocated resources are cleaned up when the component using this hook unmounts.

Make API Calls to Whisper using Axios

The transcriptionService of our hook will call the Whisper API using Axios. We append our audio file to the body, which is created using the built-in Javascript function FormData().

Create a util directory in the root of the application and then create a file named transcriptionService.js and paste in the following code:

import axios from 'axios';

export const transcriptionService = async (
  file,
  apiKey,
  whisperApiEndpoint,
  mode
) => {
  const body = new FormData();
  body.append('file', file);
  body.append('model', 'whisper-1');
  body.append('language', 'en');

  const headers = {};
  headers['Content-Type'] = 'multipart/form-data';

  if (apiKey) {
    headers['Authorization'] = `Bearer ${apiKey}`;
  }

  const response = await axios.post(`${whisperApiEndpoint}${mode}`, body, {
    headers,
  });

  return response.data.text;
};

That's all the code we need to transcribe from our system's mic input.

Building out the Next.js UI

Let's look at building the UI so we can reason visually about where to connect the API later. We will need to create a dashboard that shows our saved meetings and allows us to start new ones, and then a view to show the transcriptions; let's finish off the transcription view and then build the dashboard.

Create Custom CSS Code

First, delete everything in the globals.css file in the styles directory and replace it with the following core styles:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

:root {
  --primary: #4945ff;
  --primaryLight: #7572ff;
  --secondary: #8c4bff;
  --secondaryLight: #a47fff;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

Create Component for Transcription Display

Create the container directory in the application's root and then create a file named TranscribeContainer.js. This is where we can use our recording hook to capture and display the transcriptions. Paste the following code into the newly created file:

import React, { useState } from 'react';
import styles from '../styles/Transcribe.module.css';
import { useAudioRecorder } from '../hooks/useAudioRecorder';
import RecordingControls from '../components/transcription/RecordingControls';
import TranscribedText from '../components/transcription/TranscribedText';

const mockAnswer =
  'Example answer to transcription here: Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!';
const mockAnalysis =
  'Example analysis to transcription here: Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!';

const TranscribeContainer = ({ streaming = true, timeSlice = 1000 }) => {
  const [analysis, setAnalysis] = useState('');
  const [answer, setAnswer] = useState('');
  const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
  const whisperApiEndpoint = 'https://api.openai.com/v1/audio/';
  const { recording, transcribed, handleStartRecording, handleStopRecording, setTranscribed } =
    useAudioRecorder(streaming, timeSlice, apiKey, whisperApiEndpoint);

  const handleGetAnalysis = () => {
    setAnalysis(mockAnalysis);
  };

  const handleGetAnswer = () => {
    setAnswer(mockAnswer);
  };

  const handleStopMeeting = () => {};

  return (
    <div style={{ margin: '20px' }}>
      <button
        className={styles['end-meeting-button']}
        onClick={handleStopMeeting}
      >
        End Meeting
      </button>
      <input
        type="text"
        placeholder="Meeting title here..."
        className={styles['custom-input']}
      />
      <div>
        <RecordingControls
          handleStartRecording={handleStartRecording}
          handleStopRecording={handleStopRecording}
        />
        {recording ? (
          <p className={styles['primary-text']}>Recording</p>
        ) : (
          <p>Not recording</p>
        )}
        <TranscribedText
          transcribed={transcribed}
          answer={answer}
          analysis={analysis}
          handleGetAnalysis={handleGetAnalysis}
          handleGetAnswer={handleGetAnswer}
        />
      </div>
    </div>
  );
};

export default TranscribeContainer;

Here, we import the useAudioRecorder hook, initialize it with the required variables, and structure the values we need from it. We also have an end meeting button and an input where users can name their meeting.

There are some display components: RecordingControls, which will just be a component to keep our control buttons, and TranscribeText, which will be used to display our transcriptions and any analysis we get from chatGPT. As you can see from the code above, we are passing the text props to it and a couple of functions, which will just be mocked for now.

Create Other Display Components

Create Recording Controls Component Let's create these components! Create a components directory, and inside that, create a transcription directory. Create a file named RecordingControls.js and paste the following code:

import styles from '../../styles/Transcribe.module.css';

function RecordingControls({ handleStartRecording, handleStopRecording }) {
  return (
    <div className={styles['control-container']}>
      <button
        className={styles['primary-button']}
        onClick={handleStartRecording}
      >
        Start Recording
      </button>
      <button
        className={styles['secondary-button']}
        onClick={handleStopRecording}
      >
        Stop Recording
      </button>
    </div>
  );
}

export default RecordingControls;

This is just a simple flex container with a couple of buttons.

Create Component for Transcribed Text Now create a file named TranscribedText.js and paste the following code inside:

import styles from '../../styles/Transcribe.module.css';

function TranscribedText({
  transcribed,
  answer,
  analysis,
  handleGetAnalysis,
  handleGetAnswer,
}) {
  return (
    <div className={styles['transcribed-text-container']}>
      <div className={styles['speech-bubble-container']}>
        {transcribed && (
          <div className={styles['speech-bubble']}>
            <div className={styles['speech-pointer']}></div>
            <div className={styles['speech-text-question']}>{transcribed}</div>
            <div className={styles['button-container']}>
              <button
                className={styles['primary-button-analysis']}
                onClick={handleGetAnalysis}
              >
                Get analysis
              </button>
              <button
                className={styles['primary-button-answer']}
                onClick={handleGetAnswer}
              >
                Get answer
              </button>
            </div>
          </div>
        )}
      </div>
      <div>
        <div className={styles['speech-bubble-container']}>
          {analysis && (
            <div className={styles['analysis-bubble']}>
              <div className={styles['analysis-pointer']}></div>
              <p style={{ margin: 0 }}>Analysis</p>
              <div className={styles['speech-text-answer']}>{analysis}</div>
            </div>
          )}
        </div>
        <div className={styles['speech-bubble-container']}>
          {answer && (
            <div className={styles['speech-bubble-right']}>
              <div className={styles['speech-pointer-right']}></div>
              <p style={{ margin: 0 }}>Answer</p>
              <div className={styles['speech-text-answer']}>{answer}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default TranscribedText;

This is just to display each transcribed chunk of text with its corresponding information.

We need to create the CSS module files so our components display correctly. In the styles directory, create a file named Transcribe.modules.css and paste in the following CSS code:

.control-container {
  margin: 0 auto;
  width: 380px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  margin: 10px;
}

.primary-text {
  color: var(--primaryLight);
}

.primary-button {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.primary-button:hover {
  background-color: var(--primaryLight);
}

.primary-button-analysis {
  background-color: var(--secondaryLight);
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.primary-button-answer {
  background-color: #c8e6c9;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.primary-button-answer:hover {
  background-color: var(--primaryLight);
}
.primary-button-analysis:hover {
  background-color: var(--primaryLight);
}

.secondary-button {
  background-color: #d3d3d3;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.secondary-button:hover {
  background-color: #b0b0b0;
}

.end-meeting-button {
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.end-meeting-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 20px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 20px;
}

.end-meeting-button:hover {
  background-color: darkred;
}

.transcribed-text-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.speech-bubble-container {
  width: 80%;
  margin: 20px;
}

.speech-bubble {
  position: relative;
  background-color: var(--primaryLight);
  border: 2px solid var(--primaryLight);
  border-radius: 8px;
  padding: 10px;
}

.speech-pointer {
  position: absolute;
  top: 0;
  left: -19px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent var(--primaryLight) transparent;
}

.speech-text-question {
  margin: 0;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.4px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: white;
}

.speech-bubble-right {
  position: relative;
  background-color: #c8e6c9;
  border: 2px solid #c8e6c9;
  border-radius: 8px;
  padding: 10px;
}

.speech-pointer-right {
  position: absolute;
  top: -2px;
  right: -17px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent #c8e6c9;
}

.speech-text-answer {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.8px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: black;
}

.analysis-bubble {
  position: relative;
  background-color: var(--secondaryLight);
  border: 2px solid var(--secondaryLight);
  border-radius: 8px;
  padding: 10px;
}

.analysis-pointer {
  position: absolute;
  top: -2px;
  right: -17px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent var(--secondaryLight);
}

.transcribed-text-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.custom-input {
  border: none;
  border-bottom: 2px solid #000;
  padding: 5px 0;
  width: 100%;
  box-sizing: border-box;
  margin: 20px;
  line-height: 1.15;
  font-size: 4rem;
}

.custom-input:focus {
  outline: none;
  border-bottom: 2px solid var(--primary);
  margin: 20px;
}

.title {
  margin: 20px;
  line-height: 1.15;
  font-size: 4rem;
}

.goBackButton {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.goBackButton:hover {
  background-color: #005bb5;
}

@media (max-width: 700px) {
  .transcribed-text-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-container {
    width: 100%;
  }

  .primary-button {
    width: 100%;
    margin: 5px 0;
  }
}

Create Transcription Page Because our TranscribeContainer will be accessed from the meeting dashboard, we must use the Next.js in-built router. To do that, we can just create a file in the pages directory, so go ahead and create transcription.js in the pages directory and paste the following code in:

import React from 'react';
import styles from '../styles/Home.module.css';
import TranscribeContainer from '../containers/TranscribeContainer';

const Transcription = () => {

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <TranscribeContainer />
      </main>
    </div>
  );
};

export default Transcription;

Please add the following styles to the Home.module.css file:

.header {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.goBackButton {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.goBackButton:hover {
  background-color: #005bb5;
}

Create Meeting Dashboard Container Now our transcription page is all set; we just need a way to access it, so let's start by creating a MeetingDashboardContainer.js file in the containers directory:

import React from 'react';
import styles from '../styles/Meeting.module.css';
import MeetingCard from '../components/meeting/MeetingCard';
import Link from 'next/link';

const meeting = [
  {
    overview:
      'Overview of the meeting here Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!',
    title: 'Example title 1',
  },
  {
    overview:
      'Overview of the meeting here Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!',
    title: 'Example title 2',
  },
  {
    overview:
      'Overview of the meeting here Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit distinctio quas asperiores reiciendis! Facilis quia recusandae velfacere delect corrupti!',
    title: 'Example title 3',
  },
];

const MeetingDashboardContainer = () => {
  return (
    <div id={styles['meeting-container']}>
      <div class={styles['cs-container']}>
        <div class={styles['cs-content']}>
          <div class={styles['cs-content-flex']}>
            <span class={styles['cs-topper']}>Meeting dashboard</span>
            <h2 class={styles['cs-title']}>Start a new meeting!</h2>
          </div>
          <Link href="/transcription" class={styles['cs-button-solid']}>
            New meeting
          </Link>
        </div>
        <ul class={styles['cs-card-group']}>
          {meeting.map((val, i) => {
            return (
              <MeetingCard key={i} title={val.title} overview={overview.split(' ').slice(0, 30).join(' ') + '...'} />
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default MeetingDashboardContainer;

This is where the user will first land in our application; it's just a page to welcome the user, show a history of saved meetings, and allow them to start a new one.

For now, we are mocking the data, which we will later get from our API with the const called meeting. We are mapping out the contents of that and displaying it with a component called MeetingCard. Notice we are truncating the overview parameter passed to MeetingCard as this will likely be a long paragraph, and we only want to display a preview in the card. Let's create the MeetingCard component now.

Create Meeting Card Component Create a directory called meeting in the components directory and a file called MeetingCard.js with the following:

import styles from '../../styles/Meeting.module.css';

const MeetingCard = ({ title, overview }) => {
  return (
    <li class={styles['cs-item']}>
      <div class={styles['cs-flex']}>
        <h3 class={styles['cs-h3']}>{title}</h3>
        <p class={styles['cs-item-text']}>{overview}</p>
        <a href="" class={styles['cs-link']}>
          Open meeting
          <img
            class={styles['cs-arrow']}
            loading="lazy"
            decoding="async"
            src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/event-chevron.svg"
            alt="icon"
            width="20"
            height="20"
            aria-hidden="true"
          />
        </a>
      </div>
    </li>
  );
};

export default MeetingCard;

Now, let's create the styles for the Meeting dashboard. Create a file called Meeting.module.css in the styles directory with the following CSS:

@media only screen and (min-width: 0rem) {
  #meeting-container {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    min-height: 100vh;
  }
  #meeting-container .cs-container {
    width: 100%;
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
    min-height: 100vh;
  }
  #meeting-container .cs-content {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #meeting-container .cs-title {
    max-width: 20ch;
  }
  #meeting-container .cs-button-solid {
    font-size: 1rem;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: white;
    min-width: 12.5rem;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: color 0.3s;
    cursor: pointer;
  }
  #meeting-container .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.5rem;
    transition: width 0.3s;
  }
  #meeting-container .cs-button-solid:hover {
    color: #fff;
  }
  #meeting-container .cs-button-solid:hover:before {
    width: 100%;
  }
  #meeting-container .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #meeting-container .cs-item {
    text-align: left;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #f7f7f7;
    border: 1px solid #e8e8e8;
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #meeting-container .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #meeting-container .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #meeting-container .cs-flex {
    height: 100%;
    padding: 1.5rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  #meeting-container .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    transition: color 0.3s;
  }
  #meeting-container .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.25rem;
    color: var(--bodyTextColor);
  }
  #meeting-container .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #meeting-container .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #meeting-container .cs-arrow {
    width: 1.25rem;
    height: auto;
    transition: transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meeting-container .cs-container {
    max-width: 80rem;
  }
  #meeting-container .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #meeting-container .cs-title {
    margin: 0;
  }
  #meeting-container .cs-item {
    grid-column: span 4;
  }
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

Render the UI

Lastly, import MeetingDashboardContainer into index.js:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import TranscribeContainer from '../containers/TranscribeContainer';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Strapi Transcribe</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to{' '}
          <a target="_blank" href="https://strapi.io">
            Strapi Transcribe!
          </a>
        </h1>
        <MeetingDashboardContainer />
      </main>

      <footer className={styles.footer}>Powered by Strapi</footer>
    </div>
  );
}

Now that we have our dashboard UI and transcription view set up, we can test the code.

Open up your terminal, navigate to the frontend, and run the below command:

yarn dev

Now navigate to http://localhost:3000 in your browser, and you should be able to see the following interface:

To start transcribing, first, click on "New meeting" and then just click "Start recording." Then, talk into your computer's microphone (be aware that this will cost you OpenAI credits, so don't leave it running for too long). You can click stop recording to stop the transcription.

Recording Demo!

Test your app by clicking on the "New Meeting" button as shown in the GIF below:

For a more real-world use case, you can open your desktop meeting app (Slack or Teams) and then send yourself a meeting invite and join from your mobile phone. If you hit record, you can then speak through your phone from another room (to avoid feedback). You will see that the app picks up and transcribes what you're saying through the laptop's speakers using the mic, successfully simulating a transcription of a virtual meeting.

Stay tuned for part two

In part two of this series, we will set up our backend with Strapi. Stay tuned to see how we will structure our data to save meetings and transcriptions programmatically with the API and how we will link this to our Next.js app.

Additional Resources

Github link to the complete code.

Request Strapi's REST API behind a Content Delivery Network (CDN)

Michael — Wed, 31 Jul 2024 09:38:50 +0000

This tutorial will focus on the problem of network latency when requesting large numbers of media assets from a REST API and, in particular, how a Content Delivery Network (CDN) can help to solve this issue.

Prerequisites

To follow this tutorial, you will need the following:

Package manager (yarn or npm)
Node.js (v16 or v18).
Code editor (Visual Studio code, Sublime)
Basic knowledge of Javascript
Basic knowledge of Strapi
AWS account
Postman

Introduction

When building applications that store lots of media assets, such as images, videos, and audio files, we need to be mindful of data retrieval speeds as our applications grow.

Imagine, for instance, an e-commerce store that's hosted on a single server. This server handles all of the web traffic with a Rest API, which includes serving product images and user data. At first, the performance was good as it had a relatively small number of users. Fast forward a year, and the application now has 100,000 users. So, the single server starts experiencing a high load, leading to slower response times across the board. There will also be a geographical latency depending on where the server is hosted and where the users are requesting content.

Content Delivery Network (CDN)

One of the solutions to this problem is a Content Delivery Network (CDN). This would enable the application to cache images, videos, and other static assets at multiple locations worldwide. This just means that the primary server will handle fewer requests for static content, and there's no geographical latency, seeing as static assets are cached nearer to the user's location, meaning the server can now focus on other processing.

Ultimately this would lead to the website being able to handle higher traffic volumes with no degradation in the user experience.

Understanding Strapi and Media Asset Management

How does Strapi store media assets?

Strapi stores any media assets you upload to the file system of the server where Strapi is running, meaning when you upload a file through the Strapi admin panel, it will get saved to a specified directory on the server; this would mean on a server reset any stored assets would be lost.

However, Strapi also supports integrations with various cloud storage providers such as Cloudinary, Google Cloud, Azure, and AWS.

We will be focusing on uploading images to AWS S3 which is a widely used cloud storage service where we can upload various types of files, on top of being performant and scalable it is also very secure and reliable.

Strapi and AWS S3

So our infrastructure so far would be a single Strapi REST API that has a connection to an AWS S3 bucket. When we upload images to our server, it uploads those images to the S3 bucket, and the URL stored in our database for that image will be the public URL provided by S3 for accessing the asset.

So now, when the frontend requests the asset, Strapi will send the S3 bucket URL as part of the response, meaning the weight of the processing will be put on AWS S3, which is pretty fast.

The problem will come when we have more users globally. S3 buckets are situated in a specific location (depending on where you set them up). Let's say you set one up in Europe, but someone makes a request for an asset, and they are situated in Asia. This is where the geographical latency will come in as they are further away from the source, and as such, it takes longer to serve the assets.

Cloudfront

This is where Cloudfront comes in, which is a CDN available on AWS. It will cache static content in multiple locations around the world, meaning users can download assets from a server close to their location. In turn, this will reduce latency. CDNs are also designed and optimized to serve static content and handle large volumes of traffic.

Cloudfront features

Global Edge Network: CloudFront has a network of edge locations across the globe, ensuring low-latency delivery to users.
Cache-Control: Developers can fine-tune caching behavior using cache policies, origin request policies, and control over Time-to-Live (TTL) settings for different content types.
Real-Time Monitoring: CloudFront provides detailed metrics and logs via Amazon CloudWatch, allowing users to monitor performance, track usage, and troubleshoot issues.
Origin Servers: It supports multiple origin types, including S3 buckets, HTTP servers, and other AWS services.

Set Up AWS S3 and CloudFront

Now we have an understanding of the problem and an idea of how to solve it let's take a look at how to implement it practically.

Creating an IAM user in AWS

First, we will need to create an IAM user for our AWS account. It's generally considered bad practice to use your root account credentials, so we will be creating another user who has just the right amount of permissions we need to access the S3 bucket and nothing else.

Navigate to AWS in your browser and log in to your account. Once logged in, type IAM into the search bar at the top of the page and select IAM from the dropdown.

This will navigate you to the dashboard. Now select users from the left-hand side menu, which will take you to the user dashboard, and select Create user on the right-hand side.

Give your user a name and click next.

Now, we will want to add our user to a group that specifies the permissions that each user has. That's just so later if our team grows, we can add users to this group to give them the same permissions quickly, so click on Add user to group and then Create group.

Give the group a name, and then check AmazonS3FullAccess; this will give the users in this group full permission to update and delete objects from the S3 bucket, then click Create user group.

Once created, check the group you just created to add the user to it, and then click next; the summary should now look like this.

We have a user called strapi-iam-user, which is part of the group strapi-s3, giving full access permission to the S3 service; now, create the user.

Now click on the user and navigate to Security credentials.

Scroll down and create an access key for this user. Note the secret and access key, as we will use this later to enable the AWS SDK. Also, click on your user from the table and note down the IAM ARN number, which we will use later.

Create an S3 Bucket

Now that we have an IAM user, we will need to create an S3 bucket, type s3 into the search bar at the top of the page, and select it from the dropdown menu.

This will bring you to the Amazon S3 dashboard.

Click Create bucket and give your bucket a name.

Under Object Ownership tick the box to enable ACLs; this will allow our plugin from the Strapi backend to work.

For now, let's make the bucket public by unticking Block all public access and keeping the bottom two options ticked.

And tick the box to acknowledge that you are making your bucket public.

Now scroll down and click on Create bucket, this will take you back to the dashboard and you will see your newly created bucket in the table.

Create a Cloudfront Distribution

Now, let's navigate to the Cloudfront console by typing cloudfront into the search bar at the top and clicking it from the dropdown menu.

Click on Create a CloudFront distribution.

Next, choose the origin domain, which will be the S3 bucket you just created.

As our bucket's access is public we can keep the origin access as public and under Web Application Firewall select Do not enable security protections. Scroll down and enter index.html for the Default root object.

All other options can be left as they are. Now scroll down and click Create distribution.

This will bring you back to the dashboard where you will be able to see your CDN in the state of Deploying wait a few minutes for that to finish.

Now let's test that our CDN is working correctly, first copy the Distribution domain name from the dashboard and then let's navigate back to our S3 bucket and upload an image to it.

Click on Upload from the table.

On the next page, click Add files and add a random image if you have one. If not, hit up Shutterstock or something similar.

Scroll down and click the dropdown for permissions; for now, let's make this public just to demonstrate the CDN working in our browser; later, we won't need to do this as images will be uploaded and accessed with our credentials.

Then click Upload; now, if you copy your CloudFront URL and the name of the file you just uploaded, you should get the image displayed. For example, your URL should look something like this: https://d2urqgzsm6mm3p.cloudfront.net/polynesia.jpg

That's it now: CloudFront is set up to cache and serve files from our S3 bucket.

Integrating S3 and CloudFront with Strapi

We will be using a plugin called @strapi/provider-upload-aws-s3 to connect AWS S3 and Cloudfront with our Strapi backend.

Create a Strapi Project

First of all, let's create a new Strapi instance and run it locally. Run the below command in your terminal.

npx create-strapi-app@latest strapi-cdn-tutorial

That will automatically build and run your project for you; when it navigates to the register-admin screen, enter your details to create the admin user; this will land you on the Strapi admin dashboard.

Install AWS S3 Plugin

In your terminal, navigate to the root of your Strapi project and install the AWS S3 plugin from the Strapi market by running the below command

yarn add @strapi/provider-upload-aws-s3

In your project's .env file, add the following environment variables underneath JWT_SECRET.

AWS_KEY_ID=<Access Key>
AWS_SECRET=<Secret key>
AWS_REGION=<the region you deployed bucket>
AWS_BUCKET=<your bucket name>
CDN_URL=<your CloudFront url>

The AWS_KEY_ID and AWS_SECRET are the credentials you noted down when creating the IAM user earlier.

Now open up your project and paste the below code into your config>plugins.js file.

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        baseUrl: env('CDN_URL'),
        rootPath: "",
        s3Options: {
          credentials: {
            accessKeyId: env('AWS_KEY_ID'),
            secretAccessKey: env('AWS_SECRET'),
          },
          region: env('AWS_REGION'),
          params: {
            Bucket: env('AWS_BUCKET'),
          },
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  // ...
});

This code is targeting the default upload feature of Strapi, we are using the provider we installed and passing our AWS credentials, CDN url, Bucket details etc through to that provider.

Create a Collection Type

Let's test that out to make sure everything is running smoothly. Restart the project so that the environment variables will be included.

In the Strapi dashboard, create a new collection type called photo.

Give it a text field called title.

Then, give it a media field called image.

Now click finish and save in the top right-hand corner to restart the server.

Create Entries

Let's create some entries under that collection type, navigate to the content manager, create an entry by entering a name, and then click to upload an asset.

Here, click "add more assets" and pick from your desktop

Click "upload 1 asset to the library" then click "finish" on the next page.

If you navigate back to your S3 bucket, you should be able to see your newly uploaded image asset.

Now, to check that it's requesting the asset through our CDN, save and publish it, then select it from the table.

If you click the link to your image and paste it into your browser, you will clearly see that it is requesting the asset through our Cloudfront CDN.

Solve S3 Thumbnail Issue with Strapi

You may have noticed that the thumbnails in the Strapi backend aren't showing the images we're uploading.

We just need to add the S3 and CDN URLs to the authorized sources in our strapi:security middleware config.

So under config > middlewares.js add the following code:

module.exports = ({ env }) => [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("AWS_BUCKET")}.s3.${env(
              "AWS_REGION"
            )}.amazonaws.com/`,
            env("CDN_URL"),
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("AWS_BUCKET")}.s3.${env(
              "AWS_REGION"
            )}.amazonaws.com/`,
            env("CDN_URL"),
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

Restart the project, and now, when you visit the admin dashboard, the media assets should be showing a preview like so:

Create a Custom AWS S3 Strapi Upload Provider

Maybe you would like more control over the implementation when uploading to AWS. For instance, this feature may be very important to you, and if AWS updates their SDK, this plugin may cease to work. Let's look at coding our own local provider, so you have complete control over the implementation and can make changes to it quickly if required.

First, create a providers folder in the root of the application, and then create a directory for our provider called strapi-provider-upload-cdn. Change into this directory and run the below command to initialize:

yarn init

Give it the name strapi-provider-upload-cdn and make sure the main entry point is index.js.

Now install the AWS SDK by running the below command:

yarn add @aws-sdk/client-s3

Create the index.js file and paste the following code inside:

const {
  S3Client,
  PutObjectCommand,
  DeleteObjectCommand,
} = require("@aws-sdk/client-s3");

module.exports = {
  init: (config) => {
    const S3 = new S3Client(config);

    const upload = (file, customParams = {}) => {
      const path = file.path ? `${file.path}/` : "";
      const Key = `${path}${file.hash}${file.ext}`;

      const uploadCommand = new PutObjectCommand({
        Bucket: config.bucket,
        Key,
        Body: file.stream || Buffer.from(file.buffer, "binary"),
        ACL: "public-read",
        ContentType: file.mime,
        ...customParams,
      });

      return new Promise((resolve, reject) => {
        S3.send(uploadCommand)
          .then(() => {
            if (config.cdn) {
              file.url = `${config.cdn}/${Key}`;
            } else {
              file.url = `https://${config.bucket}.s3.${config.region}.amazonaws.com/${Key}`;
            }

            resolve(file);
          })
          .catch((err) => reject(err));
      });
    };

    return {
      uploadStream(file, customParams = {}) {
        return upload(file, customParams);
      },
      upload(file, customParams = {}) {
        return upload(file, customParams);
      },
      delete(file, customParams = {}) {
        return new Promise((resolve, reject) => {
          const path = file.path ? `${file.path}/` : "";

          S3.send(
            new DeleteObjectCommand({
              Key: `${path}${file.hash}${file.ext}`,
              Bucket: config.bucket,
              ...customParams,
            })
          )
            .then((data) => resolve(data))
            .catch((err) => reject(err));
        });
      },
    };
  },
};

Here, we are just defining a module for Strapi to interact with AWS S3. It provides functions to upload and delete files from an S3 bucket. We pass the details of our CDN and bucket through with the config argument.

Update config > plugins.js to use our custom provider by copying the following code there:

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "strapi-provider-upload-cdn",
      providerOptions: {
        region: env("AWS_REGION"),
        bucket: env("AWS_BUCKET"),
        cdn: env("CDN_URL"),
        credentials: {
          accessKeyId: env("AWS_KEY_ID"),
          secretAccessKey: env("AWS_SECRET"),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

In the root of your application, uninstall the official S3 plugin by running the following command

yarn remove @strapi/provider-upload-aws-s3

And add the following line to the package.json file under dependencies:

"strapi-provider-upload-cdn": "file:providers/strapi-provider-upload-cdn",

This is linking our local code as a dependency.

Now, if you run the command below in the terminal, it will install our custom provider as a dependency, which can then be used from the plugins.js file.

yarn install

You can now check that the custom provider is working by uploading some images from the dashboard and then checking the S3 bucket to make sure they were uploaded.

You can check if deletion is working correctly by accessing the Strapi dashboard media assets, clicking the assets you want to delete, and pressing the delete button.

When accessing your S3 bucket, the object should have been deleted, as shown below.

Requesting Assets from the Strapi REST API

Now that we have everything up and running, let's make an API request to get the asset from Strapi's REST API.

First make sure you have some photos uploaded so we can access them.

By default, Strapi requires authentication to query our API and receive information, but that is outside the scope of this tutorial. Instead, we will make our API publicly accessible. We can find more about authentication and REST API in this blog post: Guide on authenticating requests with the REST API.

Set API Permissions

From the left sidebar, click on Settings. Again, on the left panel under USERS & PERMISSIONS PLUGIN, click on Roles, then click on Public from the table on the right. Now scroll down, click on Photo, and tick Select all then save in the top right to allow the user to access information without authentication.

Open up Postman either in your browser or on your desktop, depending on what version of the application you have.

Create a new workspace, a new collection, and finally, create a new request:

Now enter the following URL in the input at the top: http://localhost:1337/api/photos?populate=* This is hitting the GET request that Strapi automatically generated for us, and we are populating the media asset (in our case, the image).

Click send, and you should get a 200 success response along with the JSON body. If you scroll down inside the image, the data should be populated, and you will be able to see the Cloudfront URL for the asset.

Conclusion

Throughout this tutorial, we have learned about CDN, Strapi media asset management, CloudFront, how to set up AWS S3 and CloudFront, integrate S3 and CloudFront with Strapi, create a custom AWS S3 Strapi upload provider plugin, and request assets from the Strapi REST API.

As you can see, the decision to integrate S3 and Cloudfront with Strapi offers significant benefits, such as enhanced performance, efficient content delivery, scalability, and improved security, reinforcing your confidence in this approach.

By setting up these services with AWS, we ensure fast, reliable access to our static assets and media, with Strapi reducing latency for our end users.

For future improvements, consider implementing advanced caching strategies, monitoring tools, and scaling techniques such as load balancing to accommodate more extensive applications.

Additional Resources

Github link to the complete code.

Top External Email Providers for Your Strapi Application

Michael — Tue, 04 Jun 2024 14:23:55 +0000

Email is one of the most critical communication channels between businesses and their users. It can be used to send notifications, updates, newsletters, offers, or other communications. A global study showed that 83% of people prefer to receive communications from businesses over email.

Going with an external email provider has many benefits, and Strapi offers a wide array of options and ways to integrate them into your application.

This article aims to simplify your decision-making process by gathering all the necessary resources in one place. We will compare these providers, helping you choose the one that best suits your application.

Additionally, we will provide code examples and guide you through integrating this functionality into your Strapi projects, making the process more convenient and straightforward.

What is Strapi?

Strapi is an open-source headless CMS (Content Management System) that allows you to quickly and easily create an API for content-rich applications. Unlike traditional CMS, it decouples the backend from the frontend, allowing you to pick whatever UI framework you're most comfortable with, meaning you can better create faster and more personalized experiences for your customers.

External Email Providers

While Strapi provides us with powerful ways to manage content and user data, using an external email provider comes with several benefits.

Benefits of Email Providers

They are reliable as they invest heavily in infrastructure, anti-spam measures, and deliverability
They are scalable: as your application grows, so too will the number of emails you send.
An external email provider has the ability to handle large email volumes without compromising on performance or deliverability,
They get rid of the need for your developers to manage email server infrastructure.
They also offer a lot of different features for you to take advantage of and follow best practices when it comes to security.

How to choose

Strapi's flexibility allows us to combine it with a wide range of email service providers, such as Mailgun, Resend, Sendgrid, Nodemailer, and AWS SES. We'll review and compare the advantages of each.

There are many things to consider when selecting an email service provider. For instance, imagine an up-and-coming e-commerce platform experiencing rapid growth in its customer base and transactional email volume. In this case, it may want to go for a more reliable service, such as AWS SES, which will ensure reliable handling of increased email volume without compromising on deliverability and speed.

On the other hand, let's consider a more content-focused website powered by Strapi, where personalised news letters and email campaigns are key to the business's success. In this case, a feature-rich solution like Sendgrid, with its segmentation, A/B testing, and campaign analytics, would be a great fit. This example underscores the importance of first understanding your project requirements and then aligning them with the most suitable provider, a strategy that can significantly enhance your email marketing efforts.

Advantages of Using Strapi with Email Providers

Strapi provides a great content management system; we can easily pull in user-specific data, such as names or preferences, and inject them into our email templates to make them more engaging. Strapi is scalable and offers a user-friendly interface with built-in API capabilities, which will help streamline the development process and reduce the time and effort it would cost to build something similar with another framework such as express.js.

Let's examine each provider individually to see what they offer and how they compare to each other.

Resend Email Provider

First up, we have Resend, which is an email service provider that helps optimise transactional emails and email campaigns. It offers a collection of tools to simplify the process of sending marketing emails, making sure they reach the correct recipients effectively and not the spam folder. With Resend's free plan, you can send 100 emails per day.

Resend Features

Resend has a test mode, so you can experiment with their API without the risk of sending accidental emails. They also offer modular webhooks, so you can receive real-time notifications letting you know when emails are delivered, opened, bounced, or even if a link inside is clicked. Another great feature of Resend is that you can develop email templates with React, getting rid of the need to use confusing table layouts.

The paid version of Resend offers a multi-region option, which allows you to send emails from the region closest to your users, so you can be sure they receive your emails in a timely and efficient manner. They also offer a dedicated IP for those companies who wish to avoid a shared IP and maintain complete control over their reputation.

Resend also offers open and click tracking, which allows developers to track engagement and tune their sending approach. This allows you to identify which of your customers or users are most interested in receiving your messages.

Key features:

Multi-language support.
CRM integrations with Hubspot, ActiveCampaign, etc..
Link tracking, open & click tracking.
Behaviour-based subscriber segmentation.
Automated welcome and follow-up flows.
Inbox placement and spam testing.

Strapi and Resend Integration

Install Strapi

Create a folder that will contain the source code for the project. Open a terminal and navigate to a directory of your choice, and run the below commands:

mkdir strapi-email-tutorial
cd strapi-email-tutorial

Now, let's create our Strapi project with the command below:

npx create-strapi-app@latest strapi-email

You can enter y to proceed and select quickstart

Once that has finished installing, you should see a confirmation such as the below:

Obtain Resend API Key

Now before we write any code, let's obtain an API key for Resend. Go to the following address: https://resend.com/overview, sign in, and get the API key; there should be an option to generate one on the dashboard.

Now navigate to the route of the strapi project in the terminal and run the following to install the Strapi plugin for Resend:

yarn add strapi-provider-email-resend

Copy the following code and replace with the code in the config/plugins.js. Make sure to add the RESEND_API_KEY variable to your .env file, with the value being the key you generated with Resend. Also, use your normal email account for the defaultFrom and defaultTo fields.

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'strapi-provider-email-resend',
      providerOptions: {
        apiKey: env('RESEND_API_KEY'), // Required
      },
      settings: {
        defaultFrom: 'YOUR_EMAIL_HERE',
        defaultReplyTo: 'YOUR_EMAIL_HERE',
      },
    }
  },    
});

Generate Custom Email API

Now we have the Resend plugin setup in our project we should be able to use the package in one of our API's, let's first generate a custom API and write the code, navigate to the terminal and run the below command in the root directory:

yarn strapi generate

This will begin the process of generating our own custom API. Choose the API option, give it the name email-test, and select "no" when it asks us if this is for a plugin.

Inside the src directory, If we check the api directory in our code editor, we should see the newly created API for email-test with it's route, controller, and service.

Enable Public API Access

Navigate to the Strapi admin dashboard, From the left sidebar, click on Settings. Again, on the left panel under USERS & PERMISSIONS PLUGIN, click on Roles, then click on Public from the table on the right. Now scroll down, click on Email-test, and tick Select all then save in the top right which will allow us to hit this endpoint without authentication.

Modify Custom Email Route

Now under the src/api/email-test directory, locate the routes directory. There you will find email-test.js file. Replace the code inside this file with the following:

module.exports = {
  routes: [
    {
      method: "POST",
      path: "/email-test/exampleAction",
      handler: "email-test.exampleAction",
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Modify Custom Email Controller

Change the code in the src/api/controllers/email-test.js file to the following:

module.exports = {
  exampleAction: async (ctx, next) => {
    try {
      const res = await strapi
        .service("api::email-test.email-test")
        .emailService(ctx);
      ctx.body = res.message;
    } catch (err) {
      ctx.body = err;
    }
  },
};

Modify Custom Email Service

Also, change the code in the src/api/services/email-test.js directory to the following:

module.exports = ({ strapi }) => ({
  emailService: async (ctx) => {
    try {
      const input = ctx.request.body.data?.input;
      const emailTo = ctx.request.body.data?.emailTo;
      await strapi.plugins["email"].services.email.send({
        from: "onboarding@resend.dev",
        to: emailTo,
        subject: "Hello World",
        html: `<p>${input}</p>`,
      });

      return {
        message: "Email sent!",
      };
    } catch (err) {
      ctx.body = err;
    }
  },
});

You should now be able to test the Resend email integration with the following code in your terminal, make sure you replace YOUR_EMAIL_HERE with your actual email address.

curl -X POST \
  http://localhost:1337/api/email-test/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "This is a test email to check the integration.",
        "emailTo": "YOUR_EMAIL_HERE"
    }
}'

Sendgrid Email Provider

Sendgrid focuses on email delivery, automation and real-time analytics it allows users to send transactional and marketing emails at scale, it offers a 99% deliverability rate and has AI-powered deliverability, and email marketing, email automation and multichannel advertising products. With Sengrids free plan, you can send 100 emails per day.

Sendgrid Features

Key features include

Dedicated IP addresses to improve deliverability
Integrations with e-commerce platforms like shopify and BigCommerce
A/B testing capabilities
Automated workflows with templates
Contact segmentation for targeted campaigns
In-depth email and click analytics

Sendgrid vs Resend

In terms of deliverability, Sendgrid provides dedicated IPs for improved sender reputation and inboxing; it has average industry deliverability rates compared to Resend, which heavily optimises campaigns for maximum inbox placement, maintaining exceptional IP reputations. Both platforms provide good deliverability that meets or exceeds industry standards.

When we look at Automation and workflow for campaigns both Sendgrid and Resend provide easy to use drag-and-drop workflow builders to create sequences and triggers. For multi-step campaigns, Resend seems to be the best at building conditional logic across workflows but Sendgrid also allows multi-path workflows. In terms of segmentation and targeting Resend has the strongest features for dynamically inserting subscriber data into emails, Sendgrid allows some personalisation. Sendgrid imposes contact limits whereas Resend allows unlimited segments.

Sendgrid seems to have the most integrations and plugins available, with extensive documentation, Resend has fewer out of the box integrations.

In terms of analytics Sendgrid has the most powerful segmentation capabilities for analyzing your email data, allowing you to deeply filter your reports, while Resend visual reports and insights are simplest to digest Sendgrid provides greater raw data access.

As a conclusion to this quick comparison between these two email providers I think Resend is best for beginners, with easy workflow automation, campaign building and visual reporting whereas Sendgrid provides the greatest email volume scalability and add-on integrations, It also offers robust targeting and analytics for experts.

Strapi and Sendgrid Integration

We can use a Strapi plugin to integrate Sendgrid just like we did with Resend, first of all let's remove the Resend integration, navigate to your terminal and run the below command in the root directory.

Install Sendgrid Strapi Plugin

yarn remove strapi-provider-email-resend

With that package removed, run the below to install the Sendgrid plugin.

yarn add @strapi/provider-email-sendgrid

Modify Plugin Configuration

Now navigate to your config/plugins.js file and replace the code in there with the below:

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: "sendgrid",
      providerOptions: {
        apiKey: env("SENDGRID_API_KEY"), // Required
      },
      settings: {
        defaultFrom: "YOUR_EMAIL_HERE",
        defaultReplyTo: "YOUR_EMAIL_HERE",
      },
    },
  },
});

Make sure to head on over to sendgrid and create a free account, then navigate to settings and create an API key.

Add Sendgrid API Key to Environment Variable

You can then add it to your .env file so the above integration works.

SENDGRID_API_KEY=YOUR_SENDGRID_API_KEY

Modify Email Service

Now restart the project and the only thing you will need to change is the from field in the src/api/email-test/services/email-test.js file as below:

 await strapi.plugins["email"].services.email.send({
        from: "YOUR_EMAIL_HERE",
        to: email,
        subject: "Hello World",
        html: `<p>${input}</p>`,
      });

Test Sendgrid Email Provider

Seeing that the rest of the code is in place from the previous Resend integration if you run the below code in the terminal it should send an email using Sendgrid.

curl -X POST \
  http://localhost:1337/api/email-test/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "This is a test email to check the integration.",
        "emailTo": "YOUR_EMAIL_HERE"
    }
}'

Nodemailer Email Provider

Nodemailer is a module developed in 2010 to simplify email sending. It has a flexible and easy-to-use interface and utilizes various email services or SMTP servers, including EmailEngine. This self-hosted email gateway allows you to make REST requests against IMAP and SMTP servers. This makes Nodemailer more flexible, as it gives you a choice to use different email services or SMTP servers based on your requirements. Note that while it is free to use Nodemailer, you may incur costs depending on the email service you choose.

Differentiation From Hosted Email Services

Nodemailer allows us to send emails directly from our Node applications. Hosted email service providers like Sendgrid, on the other hand, differ. For example, hosted email services provide a dedicated and reliable infrastructure, typically offer a broad range of features beyond sending basic emails, are easier to use, and will more often than not operate on some sort of subscription-based model.

So in comparison, just to recap, Nodemailer gives us flexibility in choosing the email transport method and supports various options: SMTP,sendmail, Amazon SES, and more. Nodemailer focuses on core email sending functionality, allowing developers to send emails programatically from their applications. It gives us some basic features like email composition, attachment support, and error handling.

Strapi and NodeMailer Integration

For Nodemailer to work we will need to provide it with an SMTP service and the auth credentials, let's use Ethereal which is a fake SMTP service. navigate to - https://ethereal.email and click the button to create an Ethereal account.

Now you should be directed to a page like the above, jot down the credentials somewhere as we will use these later.

Install NodeMailer Strapi Plugin

Now navigate back to your terminal and go to the root directory. Remove the previous plugin with the following command:

yarn remove @strapi/provider-email-sendgrid

And add the Strapi nodemailer plugin by running the below:

yarn add @strapi/provider-email-nodemailer

Update Configuration

Once that has finished let's add the plugin integration code to the config/plugins.js file, remember you will need to create the SMTP_USERNAME and SMTP_PASSWORD variables in your .env file and fill their values with the info you obtained from ethereal mail:

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST', 'smtp.ethereal.email'),
        port: env('SMTP_PORT', 587),
        auth: {
          user: env('SMTP_USERNAME'),
          pass: env('SMTP_PASSWORD'),
        },
      },
      settings: {
        defaultFrom: 'hello@example.com',
        defaultReplyTo: 'hello@example.com',
      },
    },
  },
});

Update Email Service

Update the email code in the src/api/email-test/services/email-test.js file with the following:

  await strapi.plugins["email"].services.email.send({
        from: "YOUR_ETHEREAL_MAIL",
        to: email,
        subject: "Hello World",
        html: `<p>${input}</p>`,
      });

Run the below code in your terminal to see Nodemailer in action remembering to replace the emailTo with your email:

Test NodeMailer Email Provider

curl -X POST \
  http://localhost:1337/api/email-test/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "This is a test email to check the integration.",
        "emailTo": "YOUR_EMAIL_HERE"
    }
}'

As ethereal is a fake SMTP provider, it won't actually send the email, but you can navigate back to ethereal and look under the Messages tab (this tab captures all of the outgoing and incoming mail), and you will be able to see the outgoing email that Nodemailer just connected with ethereal to send, confirming that the integration was successful.

AWS SES Email Provider

Amazon Simple Email Service (SES) is a cloud-based email service provided by Amazon Web Services. It allows you to send transactional, marketing, and notification emails, much like Resend and Sendgrid. It offers an extensive set of features, such as improved inbox deliverability with a virtual deliverability manager so you can reach inboxes instead of spam or junk, flexible deployment options such as shared or dedicated IP addresses, a console so you can view important analytics such as number of sends, opens, clicks, bounces, etc, and it supports all industry-standard authentication mechanisms.

AWS SES Features

key features include

Reliable Email Sending
High Deliverability
SMTP and API-based Sending
Email Templates
Bounce and Complaint Handling
Email Analytics
Dedicated IP Addresses
Integration with AWS Services
Cost-effective Pricing

In terms of pricing, Amazon SES will allow you to send 3000 messages per month for 12 months completely free. In comparison, Resend and Sendgrid offer the same amount of emails but don't give you a 12-month time period, suggesting you can stay on their free tier until you scale up. However, upon closer inspection, Amazon's paid service is actually cheaper. 20,000 emails a month will cost you $2 per month, while with Resend or Sendgrid, that will set you back $20 per month. This suggests that if you intend to scale rapidly, Amazon would be a better choice.

I would say one of the main standout features of AWS SES is its ability to integrate with other services on the AWS platform. You can configure it to be used on a site hosted on EC2 and set up some custom notifications with Simple Notification Service (SNS), for example. It might also be worth mentioning if you plan to use AWS EC2 for your hosting. AWS gives you the first 62,000 emails per month absolutely free.

Strapi and AWS SES Integration

Now to integrate this service with Strapi we can use a plugin but we will also need to create an AWS account to configure Amazon SES and get the correct credentials to connect.

First navigate to AWS at - https://aws.amazon.com create an account and then on the dashboard search for Amazon SES, click get started and then you should be directed to a dashboard like this

You can just add your email address here, then click next.

Here you can just add the domain of your email and click next on all of the following options.

Then you can click in the top right dropdown and navigate to security credentials scroll down and click to create an access key then copy the Access key and the Secret somewhere safe.

Install NodeMailer Strapi Plugin

Now you can navigate to the root of your project and remove the previous integration with the following command:

yarn remove @strapi/provider-email-nodemailer

And then add the AWS SES Strapi plugin by running the below command

yarn add @strapi/provider-email-amazon-ses

Update Configuration

Navigate to ./config/plugins.js and paste in the following integration code

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'amazon-ses',
      providerOptions: {
        key: env('AWS_SES_KEY'),
        secret: env('AWS_SES_SECRET'),
        amazon: 'https://email.us-east-1.amazonaws.com',
      },
      settings: {
        defaultFrom: 'myemail@protonmail.com',
        defaultReplyTo: 'myemail@protonmail.com',
      },
    },
  },
});

Update Email Service

Now add the AWS access and secret key you got earlier to the .env file with the relevant variable names.

And in src/api/email-test/services/email-test.js file, you will just need to change the email from the previous ethereal email to the one you used for SES:

  await strapi.plugins["email"].services.email.send({
        from: "YOUR_EMAIL_HERE",
        to: email,
        subject: "Hello World",
        html: `<p>${input}</p>`,
      });

Now that we've set up the integration we can use this curl command in the terminal to simulate the api call and watch Amazon SES in action

Test AWS SES Provider

curl -X POST \
  http://localhost:1337/api/email-test/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "This is a test email to check the integration.",
        "emailTo": "YOUR_EMAIL_HERE"
    }
}'

Mailgun Email Provider

Like the other email automation services we have seen so far, Mailgun offers all of the usual features, such as email sending, tracking, and analytics. What sets it apart from the crowd is its email validation service, which ensures that the email addresses you're sending mail to actually exist, this helps overall email deliverability. For instance, if you integrated this into a contact form, you could use this feature for real-time validation, and the user would be quickly notified if they entered an invalid email address.

Mailgun offers a free plan which allows you to send up to 5000 emails per month (to five authorized users of your choice) but then on the paid plan it jumps to 50,000 emails per month priced at $35 per month, clearly Mailgun free tier has limited features and it's paid plan is a little on the pricey side.

Mailgun Features

Email sending via API or SMTP integration
Email parsing and routing for inbound emails
Email validation to maintain a clean email list
Comprehensive email tracking and analytics
Customizable email templates for personalized campaigns
A/B testing to optimize email content and performance
Developer-friendly APIs, SDKs, and libraries
Scalable infrastructure for handling large email volumes
Compliance with email regulations (e.g., GDPR, CAN-SPAM)
Security features such as SPF/DKIM authentication and TLS encryption

Strapi and Mailgun Integration

To integrate Mailgun we can use the Strapi plugin to proceed, but first let's generate the api key we will need to connect to mailgun, head over to the following - https://www.mailgun.com and click "Get started for free" in the top right for Mailgun login.

Go through the mailgun login or account creation process and once that's done you should be able to scroll down on the dashboard and select your domain.

Then if you click the dropdown for your account in the top right and click on "API security", and then you can scroll down to see your api key.

Install Mailgun Strapi Plugin

Now navigate to the root of your project in the terminal and remove the previous plugin with the below command.

yarn remove @strapi/provider-email-amazon-ses

And add the Mailgun Strapi plugin with the following:

yarn add @strapi/provider-email-mailgun

Update Configuration

Navigate to ./config/plugins.js and paste in the following integration code

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'mailgun',
      providerOptions: {
        key: env('MAILGUN_API_KEY'), // Required
        domain: env('MAILGUN_DOMAIN'), // Required
        url: env(https://api.mailgun.net'), //Optional. If domain region is Europe use 'https://api.eu.mailgun.net'
      },
      settings: {
        defaultFrom: 'myemail@protonmail.com',
        defaultReplyTo: 'myemail@protonmail.com',
      },
    },
  }
});

Making sure you add the relevant variable to your .env file.

Now you should be all set to test out the integration by running the below code in your terminal

Test Mailgun Email Provider

curl -X POST \
  http://localhost:1337/api/email-test/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "This is a test email to check the integration.",
        "emailTo": "YOUR_EMAIL_HERE"
    }
}'

Choosing the Right Email Provider

First of all, thanks to the flexibility of Strapi, there was a quick and easy way to integrate every email provider we looked at, so complexity in integration, at least where your Strapi projects are concerned, isn't an issue. All the options we looked at are great, and the one you pick will ultimately come down to your priorities and the number of emails you're sending.

Amazon SES stands out if cost-effectiveness is your primary consideration, especially if you're hosting on AWS infrastructure like an EC2 instance and anticipate rapid scaling of your service. If your focus is on enhancing your marketing efforts, then the choice is between Sendgrid and Resend, both of which offer similar features. Resend, with its user-friendly interface and easy-to-understand analytics dashboard, may be more suitable for beginners. On the other hand, Sendgrid, with its more complex and detailed features, provides more granular data.

If customizability is important and you're only concerned with basic send and receive functionality, then Nodemailer is a good option. Lastly, we have Mailgun, which isn't the cheapest solution and doesn't have the most features; if email validation is essential, it could be an option.

Conclusion

To recap, the benefits of integrating with an external email provider are numerous and include the following: enhanced email functionality, improved deliverability, scalability, analytics, and customization.

This article will help you select the right email provider for your product or business. If you still need to decide, experiment with different providers and see what works best.

Additional Resources

Github link to the complete code.

Website Optimization Using Strapi, Astro.js and OpenAI

Michael — Wed, 08 May 2024 09:18:03 +0000

Introduction

In today's world, we're constantly bombarded with information overload and clickbait titles, and we can find ourselves quite strapped for time. Today we will look at partially solving this problem by integrating AI into a blogging app to give the reader some information about an article before reading it. This way, they can make an informed guess as to whether investing their time in an article is worth it or not. With this approach to website optimization, we provide a seamless user experience and valuable content.

We'll use several interesting technologies to achieve this: Strapi CMS to take care of the content management and backend, Astro which is a great new technology for quickly creating blazing fast frontend apps, and ChatGPT to provide the article summaries.

Prerequisites

To follow this tutorial, we will need the following:

An OpenAI (ChatGPT) account and API key.
Package manager (yarn or npm).
Node.js (v16 or v18).
Code editor (Visual Studio code, Sublime).
Basic knowledge of Javascript.

Setting Up Strapi

First of all, if we're not familiar with Strapi, it's a Headless CMS (content management system) like Wordpress, but the backend is detached, and we can use whatever UI framework we want. This means we can create APIs quickly without having to worry about setting up a server and using a backend language. Strapi CMS will then serve as our backend, where we can create articles with the built-in admin panel and then connect our frontend to the API to display them.

So with that explanation out of the way let's jump in to the code:

Create a folder that will contain the source code for our project. First, let's open a terminal and navigate to any directory of our choice, and run the commands below:

mkdir strapi-blog-tutorial
cd strapi-blog-tutorial

This folder will contain both our frontend and backend code. Now, let's create our Strapi API with the command below:

npx create-strapi-app@latest strapi-blog-api

Once this is complete and it finishes installing the dependencies, we should receive a confirmation like the one below!

It should automatically direct us to the Strapi dashboard as it starts our project. We have to create our administrator here, so let's fill out the form and click the "Let's start" button.

We should now see the dashboard which looks like this:

Building the Backend API with Strapi

Now let's build the backend API that will serve the articles for our blog.

Create Collection Types

First, we need to create some collection types, so in the left side menu, click on Content-Type Builder, and on the left, click on Create new collection type. Now we should see the below screen. Enter author in the "Display name" field and click continue.

That should take us to the next page, where we can enter the different fields for our author content. Below is a list of each field our author will need. Go ahead and add these:

name - Text - Short text
bio - Text - Long text
profileImage - Media - Single media

Click save in the top right. This will trigger the server to restart, so just wait for that. If it takes longer than expected, then just refresh the page.

Now that we have an author, let's create the article content type by clicking on Create new collection, entering a display name of article, and this time entering the information below.

title - Text - Short text
description - Text - Long text
dateAdded - Date - Date (ex: 01/01/2024)
coverImage - Media - Single media
articleMarkdown - Rich text (Markdown)

We will want to create a one-to-one relationship between our author and an article collection types, so the next field will be Relation. Find and click on that, and it should bring up the below screen:

Then select for the relationship to be between the article and the author collection type and click finish.

Now our article collection type should look like the one below:

Click save in the top right to finish everything and restart the server.

Create Entries

Alright, now that we have our collections ready, we can start to create authors and articles using the admin panel. On the left side panel, navigate to Content Manager, and under Collection Types, we should see the two collections we just created.

First, let's create an author so we can assign them when it comes to creating an article, so click author from the left side menu and then click on Create new entry in the top right.

Enter the name and bio, and upload a profile image. I just generated a bio with chatGPT and got a random profile picture from unsplash. Click save and then publish in the top right, and then back to see the table with our newly created author as below:

Let's create an article to assign to this author. Click on article from the left side menu and then create new entry in the top right. Again, we can enter what we want here; I just generated a bunch of random content and then got the image from unsplashed. Once we have all inputs filled out, choose the author to associate this article with from the dropdown and then click save and publish in the top right.

Enable API Public Access

From the left sidebar, click on Settings. Again, on the left panel under USERS & PERMISSIONS PLUGIN, click on Roles, then click on Public from the table on the right. Now scroll down, click on Article, and tick Select all then click on Author and do the same then save in the top right to allow the user to access information without authentication.

Now paste the below url into our browser to access the article information with the author information populated:

http://localhost:1337/api/articles?populate=author

Now that we have our collection types set up, have added some content and can see that we have access to the API, let's see how we can add a custom API endpoint which will connect to openAI.

Integrating OpenAI with Strapi

First navigate to the terminal and run the below command in the root directory:

yarn strapi generate

This will begin the process of generating our own custom API. Choose the API option, give it the name article-summary-gpt, and select "no" when it asks us if this is for a plugin.

Inside the src directory, If we check the api directory in our code editor, we should see the newly created API for article-summary-gpt with it's route, controller, and service.

Let's check it works by uncommenting the code in each file, restarting the project in the terminal, and navigating to the admin dashboard. Now, once again, click Settings > Roles > Public, then scroll down to Select all on the article-summary-gpt API to make the permissions public, and click save in the top right.

Now if we enter the following into our browser and click enter, we should get an "ok" message.

http://localhost:1337/api/article-summary-gpt

Okay, now we've confirmed the API endpoint is working, let's connect it to OpenAI first, install the OpenAI package, navigate to the route directory, and run the command below in our terminal

yarn add openai

Then in the .env file add our API key to the OPENAI environment variable:

OPENAI=<OpenAI api key here>

Now under the article-summary-gpt directory change the code in the routes directory to the following:

module.exports = {
  routes: [
    {
      method: "POST",
      path: "/article-summary-gpt/exampleAction",
      handler: "article-summary-gpt.exampleAction",
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Change the code in the controller directory to the following:

"use strict";

module.exports = {
  exampleAction: async (ctx) => {
    try {
      const response = await strapi
        .service("api::article-summary-gpt.article-summary-gpt")
        .articleService(ctx);

      ctx.body = { data: response };
    } catch (err) {
      console.log(err.message);
      throw new Error(err.message);
    }
  },
};

And the code in the services directory to the following:

"use strict";
const { OpenAI } = require("openai");
const openai = new OpenAI({
  apiKey: process.env.OPENAI,
});

/**
 * article-summary-gpt service
 */

module.exports = ({ strapi }) => ({
  articleService: async (ctx) => {
    try {
      const input = ctx.request.body.data?.input;
      const completion = await openai.chat.completions.create({
        messages: [{ role: "user", content: input }],
        model: "gpt-3.5-turbo",
      });

      const answer = completion.choices[0].message.content;

      return {
        message: answer,
      };
    } catch (err) {
      ctx.body = err;
    }
  },
});

Now we can make a post request which contains input (which will be from our frontend) and return answers from chatGPT.

We can check the connection to our post route by pasting the below code in our terminal:

curl -X POST \
  http://localhost:1337/api/article-summary-gpt/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "Can you provide a concise summary of the following article with key takeaways? - Strapi is an open-source headless Content Management System (CMS) that empowers developers to build, deploy, and manage APIs quickly and efficiently. Unlike traditional CMS platforms, Strapi decouples the frontend presentation layer from the backend content management, offering unparalleled flexibility and customization options."
    }
}'

Implementing Frontend Components with Astro.js and React

Astro.js is a web framework for content-driven websites; it automatically removes unused JavaScript and renders to HTML for better core web vitals, conversion rates, and SEO. It has also integrated "island architecture", which means we can use our favourite frontend framework or library when we need it. For instance, we can code our website using astro components, but if we come across a scenario where we want to build a form, it would be totally possible to build this feature with React (perhaps there's a specific npm package we want to use) and then integrate it seamlessly with our other components.

This gives us great performance and SEO while also allowing us to leverage the power of UI libraries like React or Vue when we need them.

Astro does have built-in Markdown support, but for the sake of this tutorial, I want to show how we can integrate React and use the technologies side by side, so we will be using React to render the articles.

First open the terminal and navigate back to the main directory - "strapi-blog-tutorial", Then run the below command:

npm create astro@latest

In the terminal go through the set-up wizard first create our new project at "./strapi-blog-frontend", Include sample files, no to typescript, Yes to install dependencies and don't init a new git repo.

Once that's finished change into the new directory and run the below command:

npm run dev

Navigate to http://localhost:4321/ in our browser and we should now be able to see the below:

Now, for the sake of simplicity, we will incorporate two views into our application: the main blog section, which will render out all of our articles and show them as cards, and the article view, which will render our Markdown and show extra information such as the author.

Since we will be integrating React into this project, let's go ahead and add that. Run the below command in our terminal under the root directory of strapi-blog-frontend

npx astro add react

Confirm yes to the changes it will automatically try to make, and wait for it to finish installing.

Before we start, let's add some core styles to our project that our components will inherit. Open the code editor, and under layouts there should be a component named Layout.astro. This is a component that wraps all of our other components and where we can add header information and meta tags, delete everything in the style tags, and paste in the following CSS.

:root {
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

Now under the components directory, create a folder named blog and a file named blog.css and paste the following css there:


/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1540 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #blog-1540:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #blog-1540 .cs-container {
    width: 100%;
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #blog-1540 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #blog-1540 .cs-title {
    max-width: 23ch;
  }
  #blog-1540 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #blog-1540 .cs-item {
    text-align: left;
    list-style: none;
    padding: clamp(1rem, 3vw, 1.5rem);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2.5rem;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: border-color 0.3s;
  }
  #blog-1540 .cs-item:hover {
    border-color: var(--primary);
  }
  #blog-1540 .cs-link {
    text-decoration: none;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  #blog-1540 .cs-picture-group {
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
  }
  #blog-1540 .cs-picture {
    width: 100%;
    height: clamp(12.5rem, 45vw, 21.25rem);
    background-color: #1a1a1a;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex: none;
  }
  #blog-1540 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
  #blog-1540 .cs-mask {
    --maskBG: #fff;
    --maskBorder: #e8e8e8;
    width: 101%;
    height: 101%;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1;
  }
  #blog-1540 .cs-flex {
    margin: 0 0 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #blog-1540 .cs-tag {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    width: fit-content;
    margin-right: 0;
    padding: 0.5rem 1rem;
    color: var(--primary);
    border-radius: 6.25rem;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  #blog-1540 .cs-tag::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #blog-1540 .cs-date {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  #blog-1540 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #blog-1540 .cs-h3 {
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #blog-1540 .cs-bottom {
    margin: 1.5rem 0 0 0;
    padding: 1.5rem 0 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
  }
  #blog-1540 .cs-author-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #blog-1540 .cs-profile {
    width: 3.125rem;
    height: 3.125rem;
    border: 2px solid #bababa;
    background-color: #bababa;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: block;
  }
  #blog-1540 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #blog-1540 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #blog-1540 .cs-job {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--secondary);
    display: block;
  }
  #blog-1540 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .summary-container {
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
    line-height: 1.5em;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-1540 .cs-container {
    max-width: 80rem;
  }
  #blog-1540 .cs-picture {
    height: 12.5rem;
  }
  #blog-1540 .cs-item {
    grid-column: span 4;
  }
}

Now create BlogContainer.jsx inside the same blog folder. This is where we will render out the cards for our blog:

import './blog.css';

export default function BlogContainer() {
  return (
    <section id="blog-1540">
      <div class="cs-container">
        <div class="cs-content">
          <span class="cs-topper">Strapi-Blog</span>
          <h2 class="cs-title">Feast your eyes on our blog section!</h2>
        </div>
        <ul class="cs-card-group">{/*Render out cards here*/}</ul>
      </div>
    </section>
  );
}

Then under pages/index.astro replace the code in there with the following

---
import Layout from '../layouts/Layout.astro';
import BlogContainer from '../components/blog/BlogContainer';
---

<Layout title="Welcome to Astro.">
    <main>
        <BlogContainer client:load/>
    </main>
</Layout>

Create another file named BlogCard.jsx inside the blog folder and paste the following code:

import './blog.css';

export default function BlogCard({
  date,
  title,
  authorName,
  authorImage,
  articleId,
  coverImage,
  getArticleSummary
}) {
  return (
    <li className="cs-item">
      <a href={`/?id=${articleId}`} className="cs-link">
        <div className="cs-picture-group">
          <picture className="cs-picture" aria-hidden="true">
            <img
              loading="lazy"
              decoding="async"
              src={coverImage}
              width="365"
              height="201"
            />
          </picture>
          <svg
            className="cs-mask"
            width="369"
            height="249"
            viewBox="0 0 369 249"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
          >
            <g clip-path="url(#clip0_3335_6487)">
              <path
                d="M369 249V105.57H364.72L360.02 177.28L350.1 221.22L338.48 233.69L294.54 231.71L227.65 231.14L159.67 232.48L102.92 238.23L43.73 243.79L31 238.99L24.33 229L8.32 177.28L5.69 111.52L0 110.67V249H369Z"
                fill="var(--maskBG)"
              />
              <path
                d="M0 0H369V114.64L364.64 113.67L364.72 77.5L356.91 50.01L348.69 27.11L329.08 10.47L296.81 4.93L28.9 9.69L21.28 14.57L15.61 25.63L4 124.51H0V0Z"
                fill="var(--maskBG)"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M366 4H4V245H366V4ZM31 239C-4.86 193.71 3.34 85.57 14 31C17.78 11.59 25.37 8.61 42 8C107.73 5.59 193.2 4.66 300 5C325.79 5.1 347.16 14.21 356 43C370.28 89.64 364.08 137.32 358.09 183.32L358 184C356.03 199.42 352.41 212.38 347 224C343.96 230.49 339.5 233.58 333 233C234.49 224.39 139.41 232.28 42 244C39.88 244.27 37.99 243.86 36 243C34.01 242.14 32.41 240.79 31 239Z"
                fill="var(--maskBG)"
              />
              <path
                d="M13.9996 30.9899C9.37956 54.6199 5.22956 88.2999 4.90956 122.57C4.49956 167.43 10.6696 213.31 30.9996 238.99C32.4096 240.78 34.0096 242.13 35.9996 242.99C37.9896 243.85 39.8796 244.26 41.9996 243.99C139.42 232.27 234.49 224.38 333 232.99C339.5 233.57 343.96 230.48 347 223.99C352.41 212.37 356.02 199.41 358 183.99C364.01 137.78 370.35 89.8599 356 42.9899C347.16 14.1999 325.79 5.08989 300 4.98989C193.2 4.64989 107.73 5.57989 41.9996 7.98989C25.3696 8.59989 17.7796 11.5799 13.9996 30.9899Z"
                stroke="var(--maskBorder)"
                stroke-width="8"
              />
            </g>
            <defs>
              <clipPath id="clip0_3335_6487-1516-1540">
                <rect width="369" height="249" fill="var(--maskBG)" />
              </clipPath>
            </defs>
          </svg>
        </div>
        <div className="cs-info">
          <div className="cs-flex">
            <span onClick={getArticleSummary} className="cs-tag">Get article summary</span>
            <span className="cs-date">
              <img
                className="cs-icon"
                loading="lazy"
                decoding="async"
                src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/calander.svg"
                alt="icon"
                width="24"
                height="24"
                aria-hidden="true"
              />
              {date}
            </span>
          </div>
          <h3 className="cs-h3">{title}</h3>
          <div className="cs-bottom">
            <div className="cs-author-group">
              <picture className="cs-profile">
                <img
                  src={authorImage}
                  decoding="async"
                  alt="profile"
                  width="50"
                  height="50"
                  aria-hidden="true"
                />
              </picture>
              <span className="cs-name">
                {authorName}
                <span className="cs-job">Author</span>
              </span>
            </div>
            <picture className="cs-wrapper">
              <img
                className="cs-arrow"
                loading="lazy"
                decoding="async"
                src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-right-chevron.svg"
                alt="icon"
                width="24"
                height="24"
                aria-hidden="true"
              />
            </picture>
          </div>
        </div>
      </a>
    </li>
  );
}

Now to show our articles, we will need to be able to render Markdown in JSX. Let's install an npm package to help us do this. Navigate to the root of our project in the terminal and run the following command:

npm i markdown-to-jsx

Now create an ArticleView.jsx file under the blog folder or directory with the following code:

import Markdown from 'markdown-to-jsx';

export default function ArticleView({ articleMarkdown, title }) {
  return (
    <div style={{ marginTop: '150px', padding: '40px' }}>
      <a href="/">Back</a>
      <Markdown>{articleMarkdown}</Markdown>
    </div>
  );
}

Okay, so now we have our views ready. We have the main container, which will fetch the blog data and render out our cards and we have the view for the articles themselves, which will render out the markdown. Let's move on to fetching the data from Strapi and displaying it in our components.

Fetching and Displaying Article Data

So let's use fetch to get the articles from the API, and we can utilise React hooks to create a reusable piece of logic that will fetch the articles and save them in state. This way, if the application evolves and we need to fetch articles in other parts of the application, we won't have to repeat the code.

Under the src directory create a folder named api and a file named articleRoutes.js with the following code:

const baseUrl = 'http://localhost:1337';
const url = `${baseUrl}/api/articles?populate[coverImage][populate][0]=data&populate[author][populate][0]=profileImage`;

export async function fetchArticles() {
  try {
    const res = await fetch(url);
    return await res.json();
  } catch (e) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

The URL is quite complex here because we have several levels of nested relations we need to populate, I made this URL using strapis interactive tool which we can find here.

In the src directory, create a hooks folder, and inside that, create a file named useGetArticle.js and add the following code:

import { useState, useEffect } from 'react';
import { fetchArticles } from '../api/articleRoutes';

function useGetArticle() {
  const [articles, setArticles] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getArticles = async () => {
      try {
        const response = await fetchArticles();
        const data = await response;
        setArticles(data.data);
      } catch (error) {
        setError(error);
      }
    };

    getArticles();
  }, []);

  return { articles, error };
}

export default useGetArticle;

Now with that set up, all we need to do is import our hook into the BlogContainer component and then use a map function to render out the BlogCard component. We will also add some logic to read the parameters of the current URL. This way, when the user clicks on a card, we can route to that article ID and have some rendering logic to show it.

Modify the code inside the BlogContainer.jsx with the following code:

import './blog.css';
import useGetArticle from '../../hooks/useGetArticle';
import BlogCard from './BlogCard';
import ArticleView from './ArticleView';

const baseUrl = 'http://localhost:1337';

export default function BlogContainer() {
  const { articles, error } = useGetArticle();

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!articles) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  const urlSearchParams = new URLSearchParams(window.location.search);
  const params = Object.fromEntries(urlSearchParams.entries());
  const articleId = Number(params.id);
  const articleToShow = articles.find((article) => article.id === articleId);

  if (articleToShow) {
    return (
      <ArticleView
        articleMarkdown={articleToShow.attributes.articleMarkdown}
        title={articleToShow.attributes.title}
      />
    );
  }

  return (
    <section id="blog-1540">
      <div className="cs-container">
        <div className="cs-content">
          <span className="cs-topper">Strapi-Blog</span>
          <h2 className="cs-title">Feast your eyes on our blog section!</h2>
        </div>
        <ul className="cs-card-group">
          {articles.map((article, i) => {
            return (
              <BlogCard
                title={article.attributes.title}
                authorName={article.attributes.author.data.attributes.name}
                authorImage={`${baseUrl}${article.attributes.author.data.attributes.profileImage.data.attributes.url}`}
                articleId={article.id}
                coverImage={`${baseUrl}${article.attributes.coverImage.data.attributes.url}`}
                date={article.attributes.dateAdded}
              />
            );
          })}
        </ul>
      </div>
    </section>
  );
}

Navigate back to localhost, and we should now be able to see the article we created earlier, and we should be able to click through and view the article details as shown below.

Enhancing User experience with AI-Generated Article Summaries

Now let's see how we can integrate the API we created earlier to get article summaries from chatGPT.

First create the below function in the api directory:

export async function fetchArticleSummary(article) {
  const gptUrl = `${baseUrl}/api/article-summary-gpt/exampleAction`;
  const data = {
    data: {
      input: `Provide a concise summary of the following article with key takeaways listed - ${article}`,
    },
  };

  try {
    const response = await fetch(gptUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    return await response.json();
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

Then in the hooks directory create a file called useArticleSummary.js which will contain the logic to handle this functionality:

import { useState } from 'react';
import { fetchArticleSummary } from '../api/articleRoutes';

function useArticleSummary() {
  const [summary, setSummary] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchSummary = async (article) => {
    setIsLoading(true);
    try {
      const response = await fetchArticleSummary(article);
      setSummary(response.data.message);
    } catch (error) {
      setError(error);
    } finally {
      setIsLoading(false);
    }
  };

  return { summary, error, isLoading, fetchSummary };
}

export default useArticleSummary;

Now that's in place, let's tweak the BlogContainer to use this hook and add a section to show the article summary. Modify the BlogContainer.jsx file with the following code:

import './blog.css';
import useGetArticle from '../../hooks/useGetArticle';
import useArticleSummary from '../../hooks/useArticleSummary';
import BlogCard from './BlogCard';
import ArticleView from './ArticleView';

const baseUrl = 'http://localhost:1337';

export default function BlogContainer() {
  const { articles, error } = useGetArticle();
  const { summary, isLoading, fetchSummary } = useArticleSummary();

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!articles) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  const urlSearchParams = new URLSearchParams(window.location.search);
  const params = Object.fromEntries(urlSearchParams.entries());
  const articleId = Number(params.id);
  const articleToShow = articles.find((article) => article.id === articleId);

  if (articleToShow) {
    return (
      <ArticleView
        articleMarkdown={articleToShow.attributes.articleMarkdown}
        title={articleToShow.attributes.title}
      />
    );
  }

  return (
    <section id="blog-1540">
      <div className="cs-container">
        <div className="cs-content">
          <span className="cs-topper">Strapi-Blog</span>
          <h2 className="cs-title">Feast your eyes on our blog section!</h2>
        </div>

        {isLoading && (
          <div className="summary-container">
            <p>Loading your article summary</p>
          </div>
        )}
        {summary && (
          <div className="summary-container">
            <p>{summary}</p>
          </div>
        )}
        <ul className="cs-card-group">
          {articles.map((article, i) => {
            return (
              <BlogCard
                title={article.attributes.title}
                authorName={article.attributes.author.data.attributes.name}
                authorImage={`${baseUrl}${article.attributes.author.data.attributes.profileImage.data.attributes.url}`}
                articleId={article.id}
                coverImage={`${baseUrl}${article.attributes.coverImage.data.attributes.url}`}
                date={article.attributes.dateAdded}
                getArticleSummary={() =>
                  fetchSummary(article.attributes.articleMarkdown)
                }
              />
            );
          })}
        </ul>
      </div>
    </section>
  );
}

Demo Time

The GIF below demonstrates how we can get the summary of an article uing AI. The image below it shows the result when we click the "Get article summary".

Conclusion

That's it. Now we have a blog that provides our users with summaries and key takeaways before they decide to invest time in reading. Think of some more use cases. You could even ask the user to fill out certain forms or analyse their reading history to create summaries that they might find interesting, which will then lead them to read those articles and improve website optimization, or you could use this information to ask ChatGPT to provide a summary and a percentage of how interesting the user will find the article.

Additional Resources

Github link to the complete code.

Integrating Strapi with ChatGPT and Next.js

Michael — Fri, 12 Apr 2024 08:39:56 +0000

Introduction

In this tutorial, we will learn how to use Strapi, ChatGPT, and Next.js to build an app that displays recipes using AI.

This tutorial aims to show how to combine these different technologies and how integrating AI can enrich the user experience of our apps.

For example, in a recipe-sharing app, a content management system such as Strapi would be in charge of structured storage and management of the data about each recipe. By integrating AI, we can elevate the functionality with additional insights, suggestions, or personalisation according to the particular user.

Prerequisites

To follow this tutorial, we will need the following:

An OpenAI (ChatGPT) account and API key.
Package manager (yarn or npm).
Node.js (v16 or v18).
Code editor (Visual Studio code, Sublime).
Basic knowledge of Javascript.

Overview of Strapi

Strapi or Strapi CMS is an open-source headless content management system that allows us to create APIs quickly. The headless architecture separates the content management and content delivery layers. This feature will enable us to consume the content via API and use whatever frontend technology (React.Js, Vue, etc.). Strapi CMS also provides plugins or Strapi plugins that can extend the functionality and add custom features to the CMS. The role of Strapi in this project will be to serve as the backend, which is responsible for storing and serving recipes to the frontend. So, without further ado, let's dive into the code.

Setting up Strapi

Let's create a folder that will contain the source code for our Strapi API. First, we open a terminal and navigate to any directory of our choice, and run the commands below:

mkdir strapi-tutorial
cd strapi-tutorial

This folder will contain both our frontend and backend codes. Now, let's create our Strapi API with the command below:

npx create-strapi-app@latest strapi-recipe-api

Once this is complete and it finishes installing the dependencies, we should receive a confirmation like the one below!

It should automatically direct us to the Strapi dashboard as it starts our project. We can create our administrator here, so we must fill out the form and click the "Let's start" button.

We should now see the dashboard which looks like this:

Create Collection Type

We want to create the collection type, which would be the recipe and its various keys and values, such as ingredients and instructions.

Click Content-Type Builder from the left side panel, and then on the left, under Collection Types, we should see "Create new collection type". Click on that and type "Recipe" into the display name.

Click continue, and from here, click text as the data type like this:

Then enter the title and make sure short text is selected.

Now we need to add the rest of the fields, so click on "Add another field," add text, and enter a description, but this time select the long text. The rest of the fields to add are like so:

ingredients - long text
instructions - long text

After adding instructions, we click "Finish." We should now see our newly created collection: Recipe and its different fields. Click save at the top right. This action will restart the server. Once done, we can play around with our collection and add some recipes.

From the left side panel, now select Content Manager under Collection Types, select Recipe, and then select "create new entry" on the top right.

We can ask ChatGPT to generate the inputs for us with the following prompt: "Give me a recipe idea with a title, description, ingredients, and instructions" and fill in the various fields below:

Now go ahead and click save in the top right. This action should prompt a success message, and now, if we click Recipe on the left, we should see our latest recipe entry in the table.

Tick the entry, and then select Publish:

From the left sidebar, click on Settings. Again, on the left panel under USERS & PERMISSIONS PLUGIN, click on Roles, then click on Public from the table on the right. Now scroll down, click on Recipe, and tick Select all to allow the user to access information without authentication.

Now if we copy and paste the following into our browser we should be able to fetch the data from our API.

http://localhost:1337/api/recipes

Integrating ChatGPT with Strapi

So far we've learned what Strapi is and what it does, we've got the API up and running and added some data, now let's see how we can integrate ChatGPT in our project.

First navigate to the terminal and run the below command in the root directory:

yarn strapi generate

This will begin the process of generating our own custom API. Choose the API option, give it the name recipe-gpt, and select "no" when it asks us if this is for a plugin.

Inside the src directory, If we check the api directory in our code editor, we should see the newly created APIs for recipe and recipe-gpt with their routes, controllers, and services.

Let's check it works by uncommenting the code in each file, restarting the project in the terminal, and navigating to the admin dashboard. Now, once again, click Settings > Soles > Public, then scroll down to Select all on the recipe-gpt API to make the permissions public, and click save in the top right.

Now if we enter the following into our browser and click enter, we should get an "ok" message.

http://localhost:1337/api/recipe-gpt

Okay, now we've confirmed the API endpoint is working, let's connect it to OpenAI first, install the OpenAI package, navigate to the route directory, and run the command below in our terminal

yarn add openai

Then in the .env file add the following environment variable:

OPENAI=< OpenAI api key here>

Now under the recipe-gpt directory change the code in the routes directory to the following:

module.exports = {
  routes: [
    {
      method: "POST",
      path: "/recipe-gpt/exampleAction",
      handler: "recipe-gpt.exampleAction",
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Change the code in the controller directory to the following:

"use strict";

module.exports = {
  exampleAction: async (ctx) => {
    try {
      const response = await strapi
        .service("api::recipe-gpt.recipe-gpt")
        .recipeService(ctx);

      ctx.body = { data: response };
    } catch (err) {
      console.log(err.message);
      throw new Error(err.message);
    }
  },
};

And the code in the services directory to the following:

"use strict";
const { OpenAI } = require("openai");
const openai = new OpenAI({
  apiKey: process.env.OPENAI,
});

/**
 * recipe-gpt service
 */

module.exports = ({ strapi }) => ({
  recipeService: async (ctx) => {
    try {
      const input = ctx.request.body.data?.input;
      const completion = await openai.chat.completions.create({
        messages: [{ role: "user", content: input }],
        model: "gpt-3.5-turbo",
      });

      const answer = completion.choices[0].message.content;

      return {
        message: answer,
      };
    } catch (err) {
      ctx.body = err;
    }
  },
});

Now we can make a post request which contains input (which will be from our frontend) and return answers from chatGPT.

We can check the connection to our post route by pasting the below code in our terminal:

curl -X POST \
  http://localhost:1337/api/recipe-gpt/exampleAction \
  -H 'Content-Type: application/json' \
  -d '{
    "data": {
        "input": "Give me some interesting nutritional information"
    }
}'

Implement Front-end Components with Next.Js

So we now have the API set up to deliver content (recipes) and a custom API set up to provide information from ChatGPT on any input we might send to it from the frontend. Let's move on to the next part (whoops, no pun intended).

Next.js is a React framework that simplifies the development of complex and high-performance web applications. It offers many built-in features, such as server-side rendering, automatic code splitting, automatic image optimization, and API routes. Next.Js streamlines the development process and ensures fast and responsive user experiences.

Let's create our frontend directory. Navigate to the main folder, strapi-tutorial, and enter the following command in our terminal.

npx create-next-app recipe-frontend

Navigate into this newly created directory and run the below

yarn dev

This should start and run the project in http://localhost:3000, when accessed through the web browser, we should be able to see the image below:

Open up the project in our code editor and look under the pages directory and click the index.js file. This file is the entry point to the application and where the code for this welcome page exists. Delete everything and paste the below code into this file.

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Strapi Recipe!</a>
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Strapi
        </a>
      </footer>
    </div>
  );
}

Save the file. We should notice the difference in our web browser as the code automatically reloads.

Next, we will want to create some re-usable components to display the recipes for our users. To speed things up, let's use a component library. Navigate to the terminal, and run the command below

yarn add antd

First, let's add a card component. Create a directory components outside of the pages directory and then create a file called RecipeCard.jsx. Paste the following code inside the new file:

import { Card } from 'antd';
import Image from 'next/image';

export default function RecipeCard({ title, bordered, content }) {
  return (
    <div style={{ cursor: 'pointer', width: '400px' }}>
      <Card
        title={title}
        bordered={bordered}
        cover={
          <Image
            alt="example"
            unoptimized
            width={400}
            height={200}
            src={'https://placehold.co/400x200'}
          />
        }
      >
        {content.length > 200 ? content.slice(0, 200) + '...' : content}
      </Card>
    </div>
  );
}

By default Next.Js reccomends us to use the images.domains to be able to load external images with next/image, so just add the following to our next.config.js file

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['placehold.co'],
  },
};

module.exports = nextConfig;

Let's create a way to view the details of our recipes using a modal from the component library, create a file in components directory called RecipeModal.jsx and paste in the below code

import { Modal } from 'antd';

export default function RecipeModal({
  title,
  open,
  setOpen,
  width = 1000,
  description,
  ingredients,
  instructions,
}) {
  return (
    <div>
      <Modal
        title={title}
        centered
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={width}
      >
        <h3>Description</h3>
        <p>{description}</p>
        <h3>Ingredients</h3>
        <p>{ingredients}</p>
        <h3>Instructions</h3>
        <p>{instructions}</p>
      </Modal>
    </div>
  );
}

Now, we have our components for displaying the recipes we can move on to fetching our content from Strapi and working out the logic to connect the data and the UI together.

Fetching and displaying recipe data

So, now that we have Strapi ready with our API and we've set up the frontend Next.Js app and built some components to host our data, we're finally ready to make the connection. We will want to create some reusable piece of logic that encapsulates the fetching of our data and the storing in state; this is a perfect use for a custom hook.

First, let's create the fetch function for our API, so create a utils folder in the root directory. Inside this new folder, create a file called api.js, and paste the below code there.

const baseUrl = 'http://localhost:1337';

export async function fetchRecipes() {
  try {
    const res = await fetch(`${baseUrl}/api/recipes`);
    return await res.json();
  } catch (e) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

In the root directory create a hooks folder, and inside that, create a file named useGetRecipe.js and add the following code:

import { useEffect, useState } from 'react';
import { fetchRecipes } from '../utils/api';

export function useGetRecipe() {
  const [recipes, setRecipes] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const { data } = await fetchRecipes();
        console.log('data - ', data);
        setRecipes(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  return { recipes, loading, error };
}

This hook encapsulates all of the logic to call our API, set the loading state while we wait for data, set the data in the state, and save any errors we might get. We can easily re-use this hook without re-writing this logic anywhere else.

Import it into index.js and use it to display our RecipeCard component. The index.js file should now look like the code below:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useGetRecipe } from '../hooks/useGetRecipe';
import dynamic from 'next/dynamic';
const RecipeCard = dynamic(() => import('../components/RecipeCard'), {
  ssr: false,
});

export default function Home() {
  const { recipes, loading, error } = useGetRecipe();

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div>
          <h1 className={styles.title}>
            Welcome to <a href="https://nextjs.org">Strapi Recipe!</a>
          </h1>
        </div>
        <div className={styles.recipeContainer}>
          {!loading && recipes ? (
            recipes.map((recipe, i) => {
              const { title, description } = recipe.attributes;
              return (
                <RecipeCard
                  key={i}
                  title={title}
                  bordered={true}
                  content={description}
                />
              );
            })
          ) : (
            <p>...Loading</p>
          )}
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Strapi
        </a>
      </footer>
    </div>
  );
}

Add the following styles to the Home.module.css file that is inside the styles directory

.recipeContainer {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin: 5px;
}

Now, if we reload the project and navigate to localhost we should be able to see the recipe we added as shown below:

Now let's try and use the modal so we can click on the recipe and view more details about it.

We will just need to import our RecipeModal component, add a handleClick method and save our recipe in state. The index.js component should now look as below:

import { useState } from 'react';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useGetRecipe } from '../hooks/useGetRecipe';
import dynamic from 'next/dynamic';
const RecipeCard = dynamic(() => import('../components/RecipeCard'), {
  ssr: false,
});
const RecipeModal = dynamic(() => import('../components/RecipeModal'), {
  ssr: false,
});

export default function Home() {
  const { recipes, loading, error } = useGetRecipe();
  const [recipe, setRecipe] = useState(null);
  const [open, setOpen] = useState(false);

  const handleCardClick = (recipeToView) => {
    setRecipe(recipeToView);
    setOpen(true);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div>
          <h1 className={styles.title}>
            Welcome to <a href="https://nextjs.org">Strapi Recipe!</a>
          </h1>
        </div>
        <div className={styles.recipeContainer}>
          {!loading && recipes ? (
            recipes.map((recipe, i) => {
              const { title, description } = recipe.attributes;
              return (
                <div
                  onClick={() => handleCardClick(recipe.attributes)}
                  key={i}
                  className={styles.item}
                >
                  <RecipeCard
                    title={title}
                    bordered={true}
                    content={description}
                  />
                </div>
              );
            })
          ) : (
            <p>...Loading</p>
          )}
        </div>
        <RecipeModal
          title={recipe?.title}
          open={open}
          setOpen={setOpen}
          description={recipe?.description}
          ingredients={recipe?.ingredients}
          instructions={recipe?.instructions}
        />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Strapi
        </a>
      </footer>
    </div>
  );
}

Now if we navigate to localhost and click on a recipe we should be able to see all of it's details.

We have connected our data from Strapi with our frontend components and everything seems to be working smoothly, feel free to add more recipes from the Strapi dashboard and watch them appear in the frontend. Next up, let's use our API connected to ChatGPT to enhance the functionality of our app.

Enhancing users experience with AI suggestions

Let's enhance the functionality by adding an extra button to our modal allowing users to make the dish plant-based. We can do this by sending the ingredients of the recipe to our ChatGPT API, which will then provide us with suggestions to change them to plant-based alternatives.

First things first, let's set up the API call with fetch in the utils directory. Add the code below to api.js.

export async function fetchRecipeGPTData(ingredients) {
  try {
    const response = await fetch(`${baseUrl}/api/recipe-gpt/exampleAction`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        data: {
          input: `Here are the ingredients for a recipe ${ingredients}, provide me with a plant based version`,
        },
      }),
    });

    return await response.json();
  } catch (e) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

As we can see, we are just passing the ingredients in with a simple prompt to GPT.

Next under the hooks directory create a file named useRecipeGPTData.js and pass in the below code

import { useState } from 'react';
import { fetchRecipeGPTData } from '../utils/api';

export function useRecipeGPTData() {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  const fetchData = async (ingredients) => {
    setIsLoading(true);
    try {
      const res = await fetchRecipeGPTData(ingredients);
      const dataToSave = res.data.message;

      setData(dataToSave);
    } catch (e) {
      setError(e);
    } finally {
      setIsLoading(false);
    }
  };
  return { data, fetchData, isLoading, setData, error };
}

Now we can use this hook to prompt GPT from anywhere in our app.

All that's left to do is to connect this function to our modal so we can allow users to query it.

In index.js, import useRecipeGPTData and pass some of the functions in to the RecipeModal. The index.js file should now look like this

import { useState } from 'react';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useGetRecipe } from '../hooks/useGetRecipe';
import { useRecipeGPTData } from '../hooks/useRecipeGPTData';
import dynamic from 'next/dynamic';
const RecipeCard = dynamic(() => import('../components/RecipeCard'), {
  ssr: false,
});
const RecipeModal = dynamic(() => import('../components/RecipeModal'), {
  ssr: false,
});

export default function Home() {
  const { recipes, loading, error } = useGetRecipe();
  const { data, fetchData, isLoading, setData } = useRecipeGPTData();
  const [recipe, setRecipe] = useState(null);
  const [open, setOpen] = useState(false);

  const handleCardClick = (recipeToView) => {
    setRecipe(recipeToView);
    setOpen(true);
  };

  const handleCloseModal = () => {
    setData('');
    setOpen(false);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div>
          <h1 className={styles.title}>
            Welcome to <a href="https://nextjs.org">Strapi Recipe!</a>
          </h1>
        </div>
        <div className={styles.recipeContainer}>
          {!loading && recipes ? (
            recipes.map((recipe, i) => {
              const { title, description } = recipe.attributes;
              return (
                <div
                  onClick={() => handleCardClick(recipe.attributes)}
                  key={i}
                  className={styles.item}
                >
                  <RecipeCard
                    title={title}
                    bordered={true}
                    content={description}
                  />
                </div>
              );
            })
          ) : (
            <p>...Loading</p>
          )}
        </div>
        <RecipeModal
          title={recipe?.title}
          open={open}
          handleCloseModal={handleCloseModal}
          description={recipe?.description}
          ingredients={recipe?.ingredients}
          instructions={recipe?.instructions}
          getRecipeGPTData={fetchData}
          recipeGPTData={data}
          isLoading={isLoading}
        />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Strapi
        </a>
      </footer>
    </div>
  );
}

Lastly, change the code in RecipeModal to display a button to query the API and a section for the plant-based version of the dish. The RecipeModal should now look like the one below:

import { Modal } from 'antd';

export default function RecipeModal({
  title,
  open,
  handleCloseModal,
  width = 1000,
  description,
  ingredients,
  instructions,
  getRecipeGPTData,
  recipeGPTData,
  isLoading,
}) {
  return (
    <div>
      <Modal
        title={title}
        centered
        open={open}
        onOk={handleCloseModal}
        onCancel={handleCloseModal}
        width={width}
      >
        <h3>Description</h3>
        <p>{description}</p>
        <h3>Ingredients</h3>
        <p>{ingredients}</p>
        {!isLoading ? (
          <button onClick={() => getRecipeGPTData(ingredients)}>
            Make plant based
          </button>
        ) : (
          <p>Loading...</p>
        )}

        <h3>Instructions</h3>
        <p>{instructions}</p>
        {recipeGPTData ? (
          <div>
            <h3>Plant based version</h3>
            <p>{recipeGPTData}</p>
          </div>
        ) : null}
      </Modal>
    </div>
  );
}

We should now be able to press the newly added button to generate a plant based version of the dish with our GPT powered API.

Conclusion

So now we have seen how to set up a Strapi API to serve content to our frontend (in our case, Next.js, a React.Js framework). We have also shown how to set up custom API endpoints and connect them to other technologies, such as ChatGPT. This can be used to make our apps appealing to a wider audience by customizing the functionality.

Hopefully, this has inspired us to explore this area further and think of new ways to improve our apps.

DEV Community: Michael

How to use Yup validation with React Hook Form

What is Yup?

Definition and Origin

Why use Yup for validation?

Features of Yup

Type checking

Chaining validators

Conditional validation

Custom error messages

Data transformations

Yup schema

Basic Yup schema syntax

Common use cases of Yup schemas

Yup validation with schema

Synchronous validation

Asynchronous validation

Custom validation logic

How to validate forms with Yup

Yup validation with React hook form

Step 1: Create project and Install dependencies

Step 2: Create the form component

Set up a Strapi Backend

Step 1: Set up Strapi locally

Step 2: Create a "YupUser" collection in Strapi

Step 3: Modify the form to submit data to Strapi

Why use Strapi as a Backend for your React apps?

What's new in Strapi v5?

Github Source Code

Conclusion

Developers beware of fake recruiters on linkedIn or The Legend of John (Jack) Hemm

The Approach...enchanté

The plot thickens

Investigating the code

Key Observations:

The Risks

The Rude goodbye...and paranoid residue

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 3

Outline

Create Custom API Endpoints in Strapi

Make Strapi API Public

Using ChatGPT with Strapi

Confirm That ChatGPT Works

Connect Custom API for Anaylysis in Next.js

Get Analysis from ChatGPT

Update Transcriptions with Analysis and Answers

Create a Custom Hook to Handle the Overview and Analysis of Transcriptions

Display Analysis of a Transcription

Display Answers and Analysis of Transcriptions in Real Time

Implement Meeting Overview functionality

Error handling in Next.js

Testing with Next.js using Jest

Application Demo

Deployment with Strapi cloud

Deplying Next.js with Vercel

Conclusion

Additional Resources

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 2

Introduction

Outline

How to Install Strapi

Create Strapi Collection Types and Fields

Create Strapi Collections for Meetings and Transcriptions

Enable API Public Access

How to connect Strapi with Next.js

Setting Up the API Structure

Create Custom React Hooks for Meetings

Create and Import the useMeetings Hook

Open Previous Meetings Using the openMeeting Function

Fetch Meeting Details Using the fetchMeetingDetails Function

Create a New Transcription in Strapi

Implement the createNewTranscription Function

Link a Transcription to a Meeting

Implement Saving Transcriptions

Display History of Transcriptions

Implement Function to End a Meeting

Delete Recordings of a Meeting

Stay Tuned for Part 3

Additional Resources

Build A Transcription App with Strapi, ChatGPT, & Whisper: Part 1

Create and Import the `useMeetings` Hook

Open Previous Meetings Using the `openMeeting` Function

Fetch Meeting Details Using the `fetchMeetingDetails` Function

Implement the `createNewTranscription` Function

How to Capture Audio with `recordrtc`