DEV Community: Kacey Cleveland

Building ChatGPT with React

Kacey Cleveland — Sun, 09 Apr 2023 02:50:14 +0000

Building out a ChatGPT clone using OpenAI's API is a great way to familiarize yourself both with OpenAI and React in general in itself. This post will go over a high level example of implementing a ChatGPT clone and the implementation I used in my side project. My codebase is very much a work in progress but you can follow along with my progress in my side project below!

https://github.com/kaceycleveland/help-me-out-here

Note: This is calling the OpenAI API on the client; it should not be used as is unless the requests are being proxied through a backend service of some sort to hide your API keys or if you are truly building a client side application.

Dependencies

To send and receive messages to OpenAI we can use OpenAI's official npm package:

https://www.npmjs.com/package/openai

In addition to this, we will be using TypeScript and Tanstack Query. Tanstack Query will serve as a wrapper to help send and process data to be consumed by our react application. You can read more about Tanstack Query here.

1. Instantiate the OpenAI Client

We first need a way to send OpenAI chat completion requests and get the responses back using the OpenAI npm package:

import { Configuration, OpenAIApi } from "openai";

const createOpenAiClient = () => {
  const config = new Configuration({
    organization: import.meta.env.OPENAI_ORG,
    apiKey: import.meta.env.OPENAI_KEY,
  });

  return new OpenAIApi(config);
};

export const openAiClient = createOpenAiClient();

Now we can use the openAiClient to create chat completion requests as described here.

Create a Chat Mutation Hook

We can now create a react hook wrapped around the OpenAI client to make calls to the OpenAI API.

import { useMutation, UseMutationOptions } from "@tanstack/react-query";
import { openAiClient } from "../openai";
import { CreateChatCompletionResponse, CreateChatCompletionRequest } from "openai";
import { AxiosResponse } from "axios";

export const useChatMutation = (
  options?: UseMutationOptions<
    AxiosResponse<CreateChatCompletionResponse>,
    unknown,
    CreateChatCompletionRequest
  >
) => {
  return useMutation<
    AxiosResponse<CreateChatCompletionResponse>,
    unknown,
    CreateChatCompletionRequest
  >({
    mutationFn: (request) => {
      return openAiClient.createChatCompletion(request)
    },
    ...options,
  });
};

3. Consume the useChatMutation hook

import { ChatCompletionRequestMessage } from "openai/dist/api";
import { useState, useCallback, useRef } from "react";
import { useChatMutation } from "./useChatMutation";

function App() {
  // Store the recieved messages and use them to continue the conversation with the OpenAI Client
  const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
  const inputRef = useRef<HTMLTextAreaElement>(null);

  /**
   * Use the chat mutation hook to submit the request to OpenAI
   * This is a basic example, but using tanstack query lets you easily
   * render loading, error, and success states.
   *  */

  const { mutateAsync: submitChat } = useChatMutation({
    onSuccess: (response) => {
      const foundMessage = response.data.choices.length
        ? response.data.choices[0].message
        : undefined;
      if (foundMessage) {
        const messageBody: ChatCompletionRequestMessage[] = [
          ...messages,
          foundMessage,
        ];
        setMessages(messageBody);
      }
    },
  });

  const handleSubmit = useCallback(() => {
    if (inputRef.current?.value) {
      const messageBody: ChatCompletionRequestMessage[] = [
        ...messages,
        { role: "user", content: inputRef.current?.value },
      ];
      setMessages(messageBody);
      // For simplicility, the settings sent to OpenAI are hard coded here.
      submitChat({
        model: "gpt-3.5-turbo",
        max_tokens: 100,
        presence_penalty: 1,
        frequency_penalty: 1,
        messages: messageBody,
      });
    }
  }, [messages]);

  return (
    <div className="App">
      <div>
        {messages.map((message) => {
          return (
            <div>
              <div>{message.role}</div>
              <div>{message.content}</div>
            </div>
          );
        })}
      </div>
      <div className="card">
        <textarea ref={inputRef}></textarea>
        <button onClick={handleSubmit}>Submit</button>
      </div>
    </div>
  );
}

export default App;

Fin

This example can be expanded upon in various ways such as:

Customizing the interface/settings being sent with the messages
Customizing old and future messages to "prime" the AI for future responses.
Better UI rendering for different states
Better UI rendering for returned data. (Think rendering code blocks or markdown from the returned OpenAI data!)

Most of the above is what I am working on in my project:
https://github.com/kaceycleveland/help-me-out-here

If you want the full repo of this basic example, check it out here:
https://github.com/kaceycleveland/openai-example

Generating a Component Library with AI

Kacey Cleveland — Sat, 01 Apr 2023 22:16:49 +0000

Intro

With the rise of popularity of ChatGPT and AI in general, the possibility of applications are endless. In addition, the frontend development ecosystem seems to change every day with something new!

TailwindCSS has existed for a while now and has almost a cult following and has remained a top contender despite the fast moving frontend ecosystem. So, what if we could combine AI and TailwindCSS to just give us a design system tailored to our liking?

The idea is simple on paper:

Prompt OpenAI to give a requested component with TailwindCSS styling and my own specifications (colors, spacings, etc)
Save said components in a library for consumption.
???
Profit!

So how did this turn out when I attempted it? Not bad but also not good.

The Process

All that was really required to get this going was developing an initial prompt with specifications and then indicating the type of specific conditions I wanted for the component I was targeting. For this proof of concept, I was targeting the generation of a button component.

You can see my main working prompt here:
https://github.com/kaceycleveland/tw-ai-design/blob/main/prompts/prompt-1.md

I would follow up the above prompt with something like:

Design a button component with hover, press, and disabled states.
Ideally, the process would end here! The component would be usable and it would be ready for use. Sometimes this was close to the case but it never was perfect. The next step after getting my response was two things:

Am I overall happy with the output? Then lets prime the result with some follow up prompts. An example of this is sometimes the component would be overall ok but it had an extra prop attached to the component that I did not need so I would send a follow up prompt:

Replace the "color" prop with a "variant" prop accepting either a value of "primary" or "secondary"

If I am not happy with the output, I would add conditions to the main prompt to hopefully improve the results. An example is ensuring TypeScript is used. Sometimes the props were not typed in the way I wanted or used FC from react which is deprecated. I would add conditions to the main prompt so future generations would not use this.

With a combination of the two follow up steps and a couple of iterations, we got a decent component!

import React, {
  forwardRef,
  PropsWithChildren,
  ButtonHTMLAttributes,
} from "react";
import clsx from "clsx";

type ButtonProps = PropsWithChildren<
  ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: "primary" | "secondary";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
    className?: string;
  }
>;

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      children,
      variant = "primary",
      size = "md",
      disabled = false,
      className,
      ...rest
    },
    ref
  ) => {
    const btnSize = {
      sm: "p-1.5",
      md: "p-2",
      lg: "p-2.5",
    }[size];

    const btnVariants = {
      primary: {
        normal:
          "text-white bg-lime-500 hover:bg-lime-400 active:bg-lime-600 disabled:bg-gray-400 disabled:text-gray-300",
        bordered:
          "text-white border border-lime-500 bg-transparent hover:bg-lime-100 active:bg-lime-200 disabled:border-gray-400 disabled:text-gray-300",
      },
      secondary: {
        normal:
          "text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 disabled:bg-gray-400 disabled:text-gray-300",
        bordered:
          "text-gray-800 border border-gray-200 bg-white hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-400 disabled:text-gray-300",
      },
    }[variant];

    const btnVariantClasses = `inline-flex items-center font-medium focus:outline-none transition ease-in-out duration-150 rounded ${btnSize} ${
      disabled && "opacity-50 cursor-not-allowed"
    }`;

    const buttonClasses = clsx(
      btnVariantClasses,
      btnVariants.bordered && "bordered border",
      btnVariants.normal,
      className
    );

    return (
      <button ref={ref} disabled={disabled} className={buttonClasses} {...rest}>
        {children}
      </button>
    );
  }
);

export default Button;

So all in all, I got what I wanted. Was it really that useful though?

The Good

After initial setup, the results were pretty decent overall. They were not perfect but were close enough that with some additional prompting, I could get something that I could use.
Surprising to me, forwardRef and TypeScript usage was pretty good.
Telling the prompt to use a specific library was also pretty good (in this case, clsx).

The Bad

You can see how long my prompt got; this is not necessarily bad but at some point this becomes simpler to just do it myself!
In addition to the above, the corner cases were hard to iron out. An example was trying to get the outputs to minimize the amount of props it added to the component. It never did this perfectly!

Summary

This was a really cool experiment with mixed results. I think it has a lot of promise in the future and with the right prompting, maybe sooner rather then later. In addition, I think using OpenAI's encodings API to fine tune a modal (once a coding modal is available for fine tuning) on TailwindCSS specifically could produce some interesting results!

Generating Sharable Content Images with Open Graph and NextJS

Kacey Cleveland — Fri, 25 Jun 2021 02:36:11 +0000

Introduction

The Open Graph Protocol (https://ogp.me/) allows for parsing of specific metadata that many social networks utilize to create dynamic sharable content. An example of this could be when you share a post on Facebook with a link but when you actually share it, the link is joined with a description, an author, an even a cover photo/picture. We can take it a step further and generate the photo/picture and also populate the other metadata fields. This article will focus on creating dynamic images based on your dynamic pages. I utilize this method deploying to Vercel for this blog on my website (https://kleveland.dev).

Tech used

NextJS
Serverless functions (via Vercel/AWS)

Example

https://www.kleveland.dev/posts/create-notion-blog

When I try and share one of my blog posts on Linkedin, you can see it gets populated with a preview image and text. We will go over how that image is generated and how we can customize it.

How It Works

As a starting point, I am going to assume you have some dynamic content/pages in a NextJS application. In my case, I utilize the following files for this blog:

Pages:

/pages/posts/[slug].tsx
/pages/posts/open-graph/[slug].tsx
/pages/api/open-graph-image.ts

Utils:

/utils/use-open-graph-image.ts
/utils/utils.ts

The code is actually borrowed heavily from here with a set of adjustments to make it more customizable:
https://playwright.tech/blog/generate-opengraph-images-using-playwright

api/open-graph-image

// path: /pages/api/open-graph-image.ts
import type { NextApiRequest, NextApiResponse } from "next";
import chromium from 'chrome-aws-lambda';
import { chromium as playwrightChromium } from 'playwright-core';
// getAbsoluteURL is in a snippet further down
import { getAbsoluteURL } from 'utils/utils';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Start the browser with the AWS Lambda wrapper (chrome-aws-lambda)
  const browser = await playwrightChromium.launch({
    args: chromium.args,
    executablePath: await chromium.executablePath,
    headless: chromium.headless,
  })
  // Create a page with the Open Graph image size best practise
  // 1200x630 is a good size for most social media sites
  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 630
    }
  });
  // Generate the full URL out of the given path (GET parameter)
  const relativeUrl = (req.query["path"] as string) || "";
  const url = getAbsoluteURL(relativeUrl)

  await page.goto(url, {
    timeout: 15 * 1000,
    // waitUntil option will make sure everything is loaded on the page
    waitUntil: "networkidle"
  })
  const data = await page.screenshot({
    type: "png"
  })
  await browser.close()
  // Set the s-maxage property which caches the images then on the Vercel edge
  res.setHeader("Cache-Control", "s-maxage=31536000, stale-while-revalidate")
  res.setHeader('Content-Type', 'image/png')
  // write the image to the response with the specified Content-Type
  res.end(data)
}

getAbsoluteURL

// Gets the URL for the current environment
export const getAbsoluteURL = (path: string) => {
    const baseURL = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"
    return baseURL + path
}

use-open-graph-image

import { useRouter } from "next/router";
import { getAbsoluteURL } from "./utils";

export default function useOpenGraphImage() {
  const router = useRouter();
  const searchParams = new URLSearchParams();
  // The [slug] from /posts/[slug] and /posts/open-graph/[slug]
  // should be identical.
  searchParams.set(
    "path",
    router.asPath.replace("/posts/", "/posts/open-graph/")
  );
  // Open Graph & Twitter images need a full URL including domain
  const fullImageURL = getAbsoluteURL(`/api/open-graph-image?${searchParams}`);
  return { imageURL: fullImageURL };
}

pages/posts/[slug]

Both of these files should generate the same slugs; the open-graph route slug will correspond to the image for the corresponding article from /pages/posts/[slug].tsx. For example, this article on my website has this route:
https://www.kleveland.dev/posts/create-notion-blog

and if I want the open graph image for that route, I can go to:

https://www.kleveland.dev/posts/open-graph/create-notion-blog

The part that matters is the usage of the custom hook in /pages/posts/[slug].tsx that will get us the imageURL to pass to the meta tags:

import Head from "next/head";

const postComponent = (props) => {
    const { imageURL } = useOpenGraphImage(); // <- This custom hook here!
    return <>
      <Head>
        <title>Kacey Cleveland - {title}</title>
        <meta name="description" content={props.description} />
        <meta property="og:title" content={props.title} />
        <meta property="og:type" content="article" />
        <meta property="og:image" content={imageURL} />
      </Head>
      <div>
        // Content here
      </div>
  </>;
}

/utils/use-open-graph-image.ts

import { useRouter } from "next/router";
import { getAbsoluteURL } from "./utils";

export default function useOpenGraphImage() {
  const router = useRouter();
  const searchParams = new URLSearchParams();
  searchParams.set(
    "path",
    router.asPath.replace("/posts/", "/posts/open-graph/") // This will take the current URL of the post and give us the open-graph one. Modify as needed for how you have your routing setup
  );
  const fullImageURL = getAbsoluteURL(`/api/open-graph-image?${searchParams}`); // This will then pass along the route for the open-graph image to our api request which will run the serverless function which runs headless chrome and goes to the /posts-open-graph/[slug].tsx route and takes a screenshot to serve as the 'fullImageURL' return.
  return { imageURL: fullImageURL };
}

Fin

TLDR the order of operations are the following:

A user shares a link to your article/dynamic content
The site that the article is shared on finds reads the meta tags and finds there is an open graph image tag
The image URL is a GET request to a serverless function that will take a screenshot of the passed route (/posts/open-graph/[slug].tsx) and return the image to be served on the social media site the link was shared on.

Additional Resources

https://ogp.me/

Creating a NextJS Blog with Notion

Kacey Cleveland — Tue, 22 Jun 2021 05:26:46 +0000

Introduction

My personal website (https://www.kleveland.dev/ still a little WIP!) that hosts both my blog content and my projects is actually sourcing its data from my Notion pages. This means when I want to create a new blog entry or add a new project to my personal website, I can simply go and edit my Notion table to add a new page or update an existing page. How might this be done? It utilizes this awesome React library called NotionX:

Tech Used

NextJS (React)
NotionX
Vercel (deployment)

NotionX

NotionX/react-notion-x

NotionX does its best to emulate your notion pages with the added benefit of keeping great lighthouse scores and doing its job very well. How does this work? It takes in mostly just one required prop to work out of the box: a RecordMap.

How it Comes Together

NotionX's github page has some good walkthroughs of how to use this and it does a good job of explaining everything however it took me some time to find some additional resources that better describe and show how everything comes together. Travis Fischer created this and also has it website served up using it. You can use his starter kit here if you want something out of the box:

transitive-bullshit/nextjs-notion-starter-kit

You can also see what this starter kit looks like as well as read more about notionX (it looks awesome!) via his website:
https://transitivebullsh.it/nextjs-notion-starter-kit

Creating a Database to Source Posts

If you decide to use the nextjs-notion-starter-kit above, most things are done for you. However, for more customizability, we will go through what can be done to implement something similar to the nextjs-notion-starter-kit. You can actually create a database like this on your notion page

Once created, we can create a post retrieval api that will pass in the RecordMap to our react component which we can pass to NotionRenderer.

import axios from "axios";

const PAGE_ENDPOINT: string =
  "https://www.notion.so/api/v3/loadPageChunk";

export default async (pageId: string) => {
  const result: any = await axios.post(PAGE_ENDPOINT, {
    chunkNumber: 0,
    cursor: { stack: [] },
    limit: 100, // This can be increased as needed but this seems to work ok
    page: {
      id: pageId
    },
    verticalColumns: false,
  });

  return result.data;
};

Github Action

One of the things that you can use in NotionX is its library to make these requests yourself. However, I believe it is better to retrieve a list of posts and cache it on each deploy. I decided to use a Github Action to do this (make sure to replace COLLECTION_ID_HERE and COLLECTION_VIEW_ID)

name: Cache Post List and Rebuild
on:

  repository_dispatch:
    types: [ build ]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Fetch API Data ðŸ“¦
        uses: JamesIves/fetch-api-data-action@releases/v1
        with:
          ENDPOINT: https://www.notion.so/api/v3/queryCollection
          CONFIGURATION: '{ "method": "POST", "headers": { "content-type": "application/json" }, "body": { "collectionId": "COLLECTION_ID_HERE", "collectionViewId": "COLLECTION_VIEW_ID", "loader": { "type": "reducer", "reducers": { "collection_group_results": { "type": "results", "limit": 50 }, "table:title:count": { "type": "aggregation", "aggregation": { "property": "title", "aggregator": "count" } } }, "searchQuery": "", "userTimeZone": "America/New_York" }, "query": {} } }'

      - name: Store Data in _posts/data.json ðŸš€
        uses: JamesIves/github-pages-deploy-action@4.1.4
        with:
          branch: main # Pushes the updates to the master branch.
          folder: fetch-api-data-action # The location of the data.json file saved by the Fetch API Data action.
          target-folder: _posts # Saves the data into the 'data' directory on the master branch.
      - name: Build and Deploy
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          vercel-args: '--prod' #Optional
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}  #Required
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} #Required

This action file will essentially cache to _posts/data.json the database entries and the IDs to point to for all our blog posts. It can then be imported and read from in our NextJS App. I created a API endpoint to retrieve a list of posts and formatted them into my own format to read from as React props

const COLLECTION_ID: string = "COLLECTION_ID_HERE";

export default (pageList: any) => {
  const data = pageList.recordMap;
  const schemaMap = data.collection[COLLECTION_ID].value.schema;
  const entries = Object.entries(data.block).filter((entry: any) => entry[1].value.properties).map((entry: any) => {

    const newEntry:any = {
          id: entry[0],
          title: entry[1].value.properties.title[0][0],
          imageLink: entry[1].value.format ? `https://www.notion.so/image/${encodeURIComponent(entry[1].value.format?.page_icon)}?table=block&id=${entry[0]}&cache=v2` : '/post_images/empty_image.svg'
      };
      Object.keys(entry[1].value.properties).forEach((key: string) => {
        const schema = schemaMap[key];
        if (schema.type === 'text') 
            newEntry[schemaMap[key].name] = entry[1].value.properties[key][0][0];
        else if (schema.type === 'multi_select')
            newEntry[schemaMap[key].name] = entry[1].value.properties[key][0][0].split(',');
        else if (schema.type === 'date')
            newEntry[schemaMap[key].name] = formatDate(entry[1].value.properties[key][0][1][0][1].start_date);
      });
      return newEntry;
  });

  return entries;
};

const months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ];

const formatDate = (input: string) => {
    const date = new Date(input)
    const month = date.getMonth()
    return `${months[month]} ${date.getDate()}, ${date.getFullYear()}`
}

Combining Everything

Utilizing the created functions above, we can source our static props and create our static paths from the 'slug' we specified in our Notion table and pass in the recordMap for each page via getStaticProps to render each NotionPage.

import pageList from "../../_posts/data.json";
import getPostList from "../api/post-list";
import getPost from "../api/post";

export const getStaticProps = async (context: any) => {
  const mappedList = getPostList(pageList);
  const foundPost = mappedList.find(
    (entry: any) => entry["Slug"] === context.params["slug"]
  );
  if (!foundPost)
    return {
      props: {},
      revalidate: 10,
    };
  const results = await getPost(foundPost.id);
const recordMap = results.recordMap;
    return {
        props: {
          recordMap
        },
        revalidate: 10
      };
}

export async function getStaticPaths() {

  const results = getPostList(pageList);
  const mappedSlugs = results.map((entry: any) => ({
    params: { slug: entry["Slug"] },
  }));

  return {
    paths: mappedSlugs,
    fallback: true,
  };
}

Passing RecordMap to NotionRenderer

It is a simple as the following code snippet however keep in mind you will probably have additional props and additional customizations that will result in it not being this simple.

function NotionPage({ recordMap }: { recordMap: ExtendedRecordMap }) {
    return <NotionRenderer recordMap={recordMap} />
}

What else?

There are somethings I did not cover in this for the sake of this post being lengthy but you can extract information as needed from the RecordMap and parse it yourself some more. I did this for things like retrieving the images from Notion and also for retrieving Table of Contents data. NotionX also has supporting utility functions to handle parsing a lot of this information as well. I recommend exploring NotionX some more and look around in Travis Fischer's personal NextJS template for some inspiration too.

Thanks for Reading!