ChatGPT API Requests Using Node.js

Andrew Knight — Fri, 02 Aug 2024 22:19:07 +0000

This week, I began learning how to integrate ChatGPT into my lifestyle assistant app. My journey has only begun and there is a lot to learn, but I want to share my growth with you in case it helps you get started faster.

The Baby Steps

Here are the steps I took to get started:

Log into the OpenAI API site
You can purchase credits to get started on the billing page unless you are eligible for a free trial. I only purchased $10 USD worth of credits to get started, and it will take me a while to use all of them. On the Billing page, make sure Auto recharge is off if you do not want to be automatically charged when you run out of tokens.
Create your API Key - User API keys are now legacy, so you should create a Project API Key.
Integrate ChatGPT into your application easily. I created a service in my React application with the following code. IMPORTANT: This will get you started with testing, but it is best to pull the API key value from a resource file instead of embedding it. You will be warned that setting the "dangerouslyAllowBrowser" value to true puts your application at risk. I will post an update as I learn of an improved way to do this.

import OpenAI from "openai";

const openai = new OpenAI({ 
  apiKey: 'API-KEY-HERE',
  dangerouslyAllowBrowser: true
});

export async function askChatGpt(role, content) {
  const completion = await openai.chat.completions.create({
    messages: [{ role: role, content: content }],
    model: "gpt-4o-mini",
  });

  return completion.choices[0];
}

Example

In my app, the user completes the Wellness Plan form, and a call is made to ChatGPT to generate a wellness plan using the request JSON and return the result in a JSON format that I provide in the prompt. I'm sure there is a better way to do this, but I haven't learned that yet. I'll post an update as I learn of an improved way.

The Request
I use react-hook-form to construct my JSON as the form is completed, using the form control, and then I add that JSON into my prompt as criteria.

The Response
In my prompt, I specify the JSON format that I would like ChatGPT to respond with, and then I store the response JSON and display it to the user.

A Beginner’s Guide to Minimalist Design

Andrew Knight — Thu, 01 Aug 2024 19:36:20 +0000

I have always been an advocate of the clean and simple – it is how my mind works most clearly. However, just like most tasks in life, there are different tools for different jobs, and design is the same way. In this post I will share the minimalist design practices that I have found to be helpful in creating clean and simple websites, templates, and graphics – communicating what is necessary in a limited space.

Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains. ~Steve Jobs

What is Minimalist Design?

Minimalist design refers to reducing an item to its necessary elements, conveying a message of simplicity. This is a trend that is taking the design world by storm because it emphasizes a focus on space, simplicity, and clean typography, which is refreshing to the eyes of the designer and viewer. You may notice that minimalism is applied to many different forms of design – including building architecture, paintings, among other artistic designs. The primary focus of what is discussed here is the relation to graphic design.

Elements of Minimal Design

Like the construction of a building, there are important elements that either make or break the minimalist approach. Here I outline some of the commonly used approaches for these design elements.

Contrast

Create a strong contrast between elements. Black, white and gray are the most common choices because they create the greatest natural distinction between elements. Contrast also relates to the size of fonts – headings, subheadings, and content. The point is to create a design of natural element distinction.

Space

Allow enough space so that each element can “breathe.” Each element of the design should have enough room to stand on its own without camping out in someone else’s neighborhood.

Organization

Think about your design before you begin – don’t sacrifice your design due to a lack of knowledge or understanding. There are plenty of experts on the internet that you can reference. One of the best ways to stay organized is to use a grid to contain each page element. This is true for web design and document design – including emails. Tables are your friend. If you are going to use borders use a thin-weighted line. Another option is to pad and color the table cells and then use a table border that matches the background. This allows the grid to contract the rest of the page through a simple change in color.

Color

The way that you use color is extremely important. It takes seven seconds to make a first impression. While all elements are important, in my opinion color is the first element to strike someone’s impression of your site. As mentioned previously, minimal design is all about contrast. A great way to create this contrast through color is to develop a backdrop with a slightly contrasted light or dark hue and then find one special color to “pop” on your pages. By creating a light or dark background, you will ensure that the images on your page “pop.” This will do a few things for the viewer – put their eyes at rest, show them where to focus immediately, and I truly feel that the clean appearance of your site or document will also lend to enhanced credibility of the author.

Visuals

Visuals should be dominant and adhere to the contrast principle. Dominance means means that you should use visuals sparingly – only to draw attention where needed. Visuals are not limited to images or graphics, but can also be a prominent text boxes or fonts with a color and size to standout.

Typography

I love typography and struggle to keep this element description brief. Font plays a major role in creating a clean and easy-to-understand design. I am truly obsessed with typography and have spent many hours (and collectively months) of time researching typography. When selecting a minimalist font, look for fonts with clean lines and simple strokes. Most minimalist designs use a sans serif font. I recommend that you use 1-2, and very rarely 3, varying fonts – selecting one for headings and one for body text. For body typography, look for fonts that have a clean line-weight. For headings, look for fonts that are slightly fancy but not too outlandish.

Forem: Andrew Knight

ChatGPT API Requests Using Node.js

The Baby Steps

Example

A Beginner’s Guide to Minimalist Design

What is Minimalist Design?

Elements of Minimal Design