How to integrate ChatGPT into your website

Project

The following steps describe how we can access the OpenAI API (GPT-3 engine) with a simple HTTP request.

The example uses Node.js and is written in JavaScript (ECMAScript 6). It does not require any OpenAI specific dependencies and can be easily transferred into other languages like Java, Python or C#. Other examples, using language specific dependencies from OpenAI, can be found here: https://beta.openai.com/docs/quickstart/build-your-application

The example uses AWS resources, but can also be tested without AWS (see last section).

1. Create OpenAI API key:

Log in or sign up at https://beta.openai.com

Create a new OpenAI API key at https://beta.openai.com/account/api-keys

Don’t reveal keys (and other secrets) in your code or store them in your code repository. Secrets should always be stored encrypted in a key vault. There are many options to store keys securely. Some very popular vaults are HashiCorp Vault, Azure Key Vault and AWS Secrets Manager.

In the following example we use AWS Secrets Manager to store the OpenAI API key. To follow this step you need an AWS account. If you don’t have or want to use AWS, you can remove the AWS dependency as described in Step 3. Log in to the AWS Web Console, go to Secrets Manager and click “Store a new Secret”. Choose “Other type of secret”, and type “Key” and your API Key in the Key/Value Fields. Save the Secret with the name “Test”.

2. The API Request

The OpenAI API accepts a POST request to https://api.openai.com/v1/completions. In our example we set four properties in the request body:

• model - the GPT model to be used
• prompt - your input text, e.g. a question
• max_tokens (optional) - the max number of tokens to be used by the engine. Tokens are common sequences of characters found in text where one token corresponds to ~4 characters
• temperature (optional) - value from 0 to 1, small values like 0.1 result in well-defined answers, larger values like 0.9 result in more variation and creative answers

A complete list of available properties can be found here: https://beta.openai.com/docs/api-reference/completions/create#completions/create-model

Sample Request Body:

{
? ? ? ?"model": "text-davinci-003",
? ? ? ?"prompt": "Tell me a nice story",
? ? ? ?"max_tokens": 64,
? ? ? ?"temperature": 0.2
? ?}
        

The actual answer from ChatGPT is included in the API response body as plain text (text property):

?
{
??
   "id": "cmpl-6UZ...",

???"object": "text_completion",

???"created": 1672745240,

???"model": "text-davinci-003",

???"choices": [

???????{

???????????"text": "\n\nSome nice answer text from GPT",

???????????"index": 0,

???????????"logprobs": null,

???????????"finish_reason": "length"

???????}

???],

???"usage": {

???????"prompt_tokens": 6,

???????"completion_tokens": 64,

???????"total_tokens": 70

???}

}
        

3. Working example (Node.js)

The following example fetches the API key from AWS Secrets Manager and calls the OpenAI API using axios library:

import { SecretsManagerClient, GetSecretValueCommand } from "@aws-sdk/client-secrets-manager"

import axios from 'axios';

?

// Get decrypted API key from AWS Secrets Manager

const getSecret = async () => {

?

???const secretId = "Test";

???const secretKey = "Key";

?

???const client = new SecretsManagerClient({

???????region: "eu-central-1",

???});

?

???try {

???????const response = await client.send(

???????????new GetSecretValueCommand({

???????????????SecretId: secretId,

???????????????VersionStage: "AWSCURRENT"

???????????})

???????);

???????return JSON.parse(response.SecretString)[secretKey];

???} catch (err) {

???????console.log(err);

???????throw err;

???}

}

?

// Call OpenAI API using API key and question

// Returns the answer from OpenAI as a string

const callGPT = async (key, question) => {

?

???var data = JSON.stringify({

???????"model": "text-davinci-003",

???????"prompt": question,

???????"max_tokens": 64,

???????"temperature": 0.2

???});

?

???const url = 'https://api.openai.com/v1/completions';

?

???try {

???????const result = await axios

???????????.post(url, data, {

???????????????headers: {

???????????????????'Authorization': 'Bearer ' + key,

???????????????????'Content-Type': 'application/json'

???????????????}

???????????});

?

???????return JSON.stringify(result.data.choices[0].text);

???} catch (err) {

???????console.log(err);

???????throw err;

???}

};

?

// Entry point

export const handler = async (event) => {

?

???const question = "Tell me a nice story";

?

???return {

???????statusCode: 200,

???????body: JSON.stringify({ answer: await callGPT(await getSecret(), question) }),

???};

};        

The code above should be hosted on AWS (e.g. on EC2 or Lambda) to use the benefits of Secrets Manager.

For local testing without using AWS, you can remove the dependency to AWS Secrets Manager:

import { SecretsManagerClient, GetSecretValueCommand } from "@aws-sdk/client-secrets-manager";        

and replace the content of getSecret() function to just return your OpenAI API key:

const getSecret = async () => {

???return "[YOUR_API_KEY]";

}        

The example is just a basic implementation without proper error handling and protection against abuse.

It only demonstrates how easily ChatGPT can be used in a custom application.

About Ping Pong Labs GmbH

Ping Pong Labs is a digital agency in Berin.

[email protected]

Our Services:

• Web & app development
• Development of cloud-based platforms with AWS
• Development of real-time 3D applications with Unity
• Development of interactive exhibits

Featured projects: