Building a Customer Support Portal with Strapi, GPT, and Next.js (Part 1)

Introduction

Customer support plays a pivotal role in determining the success of any business. It is a direct link between the company and its customers, ensuring that their needs are addressed and problems are resolved. Research shows just how impactful good customer support can be on long-term business success:

• A survey by HubSpot showed that 68% of consumers are willing to pay more for products and services from a brand known for delivering exceptional customer service, whereas another HubSpot Research indicated that 93% of customers are inclined to make repeat purchases with companies that provide superior customer support.
• According to a study by Khoros, 86% of customers say that excellent service can transform a one-time client into a loyal brand advocate.
• Also, a Salesforce Research showed that a positive customer experience results in 89% of consumers being more likely to make another purchase.

These statistics underscore the importance of a well-structured and efficient customer support system.

In this 3-part series, I will walk you through building a robust customer support portal using Strapi, GPT, and Next.js. You will learn how to set up the backend, integrate AI-driven support using GPT, and implement user authentication to manage customer queries effectively, ensuring a seamless experience that fosters trust and loyalty. For the first part of this series, you will learn how to set up Strapi for the backend of your customer support portal.

If you are excited as much as I am writing this article, then let's dive right in. 🚀

Outline

You can find the outline for this series below:

• Part 1: Setting up Strapi for the Backend of Our Customer Support Application
• Part 2: Integrating GPT for AI-driven Customer Support
• Part 3: Implementing User Authentication And Managing Customer Queries

What is a Customer Support Portal?

A customer support portal, also called a client or web portal, is an online platform that offers your users or clients a personalized, secure, and centralized space to engage with their products or services. It functions like a virtual assistant for each client, streamlining interactions and enhancing the user experience.

Importance of Customer Support In Modern Businesses

Customer support is a critical component of any successful business. It serves as the direct link between a company and its customers, helping to retain clients and maximize their value.

Good customer support builds trust, enhances satisfaction, and promotes loyalty. By delivering excellent service, you can recover the costs of acquiring new customers, leading to a loyal customer base that generates referrals, offers testimonials, and provides valuable feedback.

In the next section, you will learn how to set up Strapi 5 for your backend.

Setting up Strapi 5 for the Backend of Our Customer Support Application

Prerequisites

To follow this tutorial and start building your customer support portal, you'll need to do a few things first.

• Have Node.js installed (v18.18 or v20.0) on your machine;
• Your preferred Node.js package manager:
  • npm (v6 and above)
  • yarn
• Have a text Editor or IDE like Visual Studio Code. Other options include Sublime Text
• Understanding of Javascript, Next.js is highly advised;
• Have a basic knowledge of Strapi and have an account with Strapi Cloud
• You will also need to install git and to have a GitHub account to deploy your project to Strapi Cloud.

Technology Overview

Let's briefly look at the key technologies we will use to build our AI-driven customer support portal: Strapi, GPT, and Next.js.

What is Strapi?

Strapi is an open-source headless CMS that allows developers to build custom APIs quickly. It provides a flexible and easy-to-use interface for managing content, making it an ideal tool for creating scalable and personalized customer support platforms. In this project, Strapi will manage and store customer interactions, handle user authentication, and serve as the backend for our support portal.

What is GPT?

GPT (Generative Pre-trained Transformer) is an AI model developed by OpenAI that can understand and generate human-like text. It will power the conversational AI features of the customer support portal, enabling the system to provide automated responses and help with personalized support through natural language processing.

What is Next.js?

Next.js is a React-based framework that simplifies the development of high-performance web applications. With features like server-side rendering, static site generation, and API routing, We will use Next.js to build the front end of the customer support portal, ensuring fast load times, better SEO, and a seamless user experience across devices. It will integrate with Strapi and GPT to deliver a smooth, responsive user interface.

Setting up Strapi for the Backend

In this section, I will walk you through setting up Strapi for the backend of your customer support application. You will create a new Strapi project on your machine by running the following commands in your terminal, and then register your first local administrator user.

Follow the steps below to get started:

Step 1: Start by creating a folder named customer-support-tutorial that will contain the source code for your Strapi CMS API. Run the following command to create the folder and change the directory into the customer-support-tutorial folder:

mkdir customer-support-tutorial && cd customer-support-tutorial

Step 2: Run the installation script and create a Strapi Cloud account by running the following command in your terminal:

npx create-strapi@latest strapi-customer-support-api

Log in or Sign up to Strapi Cloud when prompted, and follow the prompt:

The terminal will now ask you a few questions. Press Enter to accept the default answer to all questions.

Once the installation is complete, you need to start the server. In the terminal, type cd strapi-customer-support-api && yarn develop and your browser automatically opens a new tab in http://localhost:1337/admin

You will be prompted to complete a registration form to create your account. Once done, you become the first administrator user of this Strapi application.

You now have access to the admin panel:

Create Strapi Collection Types and Fields for Support Tickets And Responses

To store and manage the data for our AI-powered customer support portal, we will set up the appropriate collection types in Strapi. This will enable us to save, organize, and retrieve data efficiently.

Start by navigating to the Content-Type Builder in the Strapi admin dashboard. Here, we will create several collection types and define the relationships between them to structure the data for customer queries, agent responses, and user management.

Data Structure Overview

The customer support application will manage multiple data entities, including:

• Customer Queries: These are user-submitted questions or issues.
• Agent Responses: These are the responses generated by the AI or agents.
• Users: These are the customer and support agent profiles.

The code snippet below represents the data structure:

const customer_query = {
  id: 1,
  title: "Issue with Account Login",
  description: "I am unable to log into my account using my email. The system keeps saying that my credentials are invalid.",
  status: "Open",
  created_date: "2024-10-03T10:15:30Z",
  user: {
    id: 1,
    username: "johndoe",
    email: "[e-mail]",
    role: "Customer",
    joined_date: "2023-01-15T08:45:00Z"
  },
  responses: [
    {
      id: 1,
      response_text: "Thank you for reaching out. Have you tried resetting your password using the 'Forgot Password' option?",
      response_type: "AI",
      created_date: "2024-10-03T10:20:30Z",
      agent: null
    },
    {
      id: 2,
      response_text: "Hi John, I’ve reviewed your account and noticed an issue with the email configuration. I’ve fixed it, and you should now be able to log in.",
      response_type: "Agent",
      created_date: "2024-10-03T11:00:00Z",
      agent: {
        id: 2,
        username: "agent_smith",
        email: "[e-mail]",
        role: "Agent",
        joined_date: "2022-09-12T09:30:00Z"
      }
    }
  ]
};

Relationships Between Collections

• A User (customer or agent) can submit multiple Customer Queries (One-to-Many relationship).
• A Customer Query can have multiple Agent Responses (One-to-Many relationship).

By creating these collections in Strapi, we will ensure our data is structured in a way that supports seamless querying, response generation, and storage for the customer support application.

Given the data architecture, you will create four collections, namely: Agent, Customer_query, Response, and User.

Creating the Collection Type for Agent

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

Next, create the following fields under the Agent collection type:

• username: Type: Text
• email: Type: Text
• role: Type: Text
• joined_date: Type: Datetime

Creating the Collection Type for Customer_query

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

Next, create the following fields under the Customer_query collection type:

• title: Type: Text
• description: Type: Text
• created_date: Type: Text
• query_state: Type: Text
• user: Type: Relation with User (from: users-permissions)

• responses: Type: Relation with Response

Creating the Collection Type for Response

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

Next, create the following fields under the Response collection type:

• response_text: Type: Text
• response_type: Type: Text
• agent: Type: Relation with Agent

• created_date: Type: Datetime

Creating the Collection Type for User

Modify the already existing User data architecture, and include the following:

• joined_date: Type: Datetime

Strapi Collection Types

1. Customer Queries: This collection will store individual support tickets submitted by users. Each query will be linked to the user who submitted it and will have a relationship with the Agent Responses collection. Key fields:

• Title (Short Text): The query summary.
• Description (Long Text): Detailed explanation of the issue or question.
• Query state (Enumeration): Represents the current status of the query (e.g., "Open," "In Progress," "Resolved").
• Created Date (Date): The date and time the query was submitted.
• User (Relation): The customer who submitted the query (Many-to-One relationship with the Users collection).

• Responses (Relation): Linked responses from the support agent or AI (One-to-Many relationship with the Agent Responses collection).

  1. Agent Responses: This collection will store the responses given by AI or support agents. These will be linked back to the specific Customer Queries. Key fields:

• Response Text (Long Text): The actual response to the customer query.

• Response Type (Enumeration): Specifies whether the response was generated by the AI or manually by a support agent.

• Created Date (Date): Timestamp of when the response was generated.

• Query (Relation): Links to the associated customer query (Many-to-One relationship with the Customer Queries collection).

• Agent (Relation): The agent who responded (Optional Many-to-One relationship with the Users collection).

  1. Users: This collection will store information about both customers and support agents. Key fields:

• Username (Short Text): The user’s unique username.

• Email (Email): The email address of the user.

• Role (Enumeration): Defines the user type (e.g., "Customer" or "Agent").

• Joined Date (Date): When the user joined or registered on the platform.

Next, we will configure public access to the API and connect Strapi with our Next.js frontend.

Enabling Public API Access

By default, Strapi requires authentication to access and retrieve data from the API, but for this tutorial, we will bypass that requirement by making the API publicly accessible. For more information on API authentication, refer to this guide on authenticating requests with the REST API.

To make the API public, go to the Settings on the left sidebar. Under the USERS & PERMISSIONS PLUGIN, select Roles, then choose Public from the list. Scroll down and check Select all for Agent, Customer-query, and Response. Finally, save your changes in the top right corner to allow access to these endpoints without authentication.

Sample Response

[
  {
    "customer_query":{
      "id":1,
      "title":"Issue with Account Login",
      "description":"I am unable to log into my account using my email. The system keeps saying that my credentials are invalid.",
      "query_state":"Open",
      "created_date":"2024-10-03T10:15:30Z",
      "user":{
        "id":1,
        "username":"johndoe",
        "email":"[e-mail]",
        "role":"Customer",
        "joined_date":"2023-01-15T08:45:00Z"
      },
      "responses":[
        {
          "id":1,
          "response_text":"Thank you for reaching out. Have you tried resetting your password using the 'Forgot Password' option?",
          "response_type":"AI",
          "created_date":"2024-10-03T10:20:30Z",
          "agent":null
        },
        {
          "id":2,
          "response_text":"Hi John, I’ve reviewed your account and noticed an issue with the email configuration. I’ve fixed it, and you should now be able to log in.",
          "response_type":"Agent",
          "created_date":"2024-10-03T11:00:00Z",
          "agent":{
            "id":2,
            "username":"agent_smith",
            "email":"[e-mail]",
            "role":"Agent",
            "joined_date":"2022-09-12T09:30:00Z"
          }
        }
      ]
    }
  }
]

Stay Tuned for Part 2

In the next part of this series, we will dive into integrating GPT with Strapi and Next.js to automate support ticket responses. We'll cover how to set up GPT for generating AI-driven replies, connect it with Strapi to manage customer queries, and run tests using sample queries. This integration will allow us to create a seamless experience for efficiently responding to customer issues.