Get Started With Open Ai Web App Development

Introduction

The Completions Endpoint serves as the foundation Open AI API, offering a versatile and robust interface. By inputting a text prompt, the API generates a text completion that aligns with the given instructions or context.

Prompt

Propose three domain names for a US-based technology startup

Completion

Gigabyte Solutions, Cloudburst Technologies, Binary Forge.

This can be considered an advanced form of autocomplete, as the model analyzes the text prompt and endeavors to anticipate the most probable subsequent text.

Requirement

VS Code
NodeJs
Open Ai Api Key

Add your API key

To get the app working, you’ll need an API key. You can get one by signing up for an account and returning to this page.

Setup

If you don’t have Node.js installed, install it from here
For VS Code install it from here
Clone this repository
Navigate into the project directory

    $ cd openai-quickstart-node

Install the requirements

$ npm install

Make a copy of the example environment variables file

    $ cp .env.example .env

Add your API key to the newly created .env file
Run the app

    $ npm run dev

You should now be able to access the app at http://localhost:3000!

Understanding the Code

Open up generate.js in the openai-quickstart-node/pages/api folder. At the bottom, you’ll see the function that generates the prompt that we were using above. Since users will be entering the type of business domain, it dynamically swaps out the part of the prompt that specifies the business names.


function generatePrompt(startup) {
const capitalizedStartup =
startup[0].toUpperCase() + startup.slice(1).toLowerCase();
return `Suggest three names for an USA tech startup domain.

Domain: Payment gateway
Names: Zoomer Pay, Slay Pay, No Cap Payment
Domain: Clothing
Names: Drip Check, Bussin Wear, Boujee Clothes 
Domain: ${capitalizedStartup}
Names:`;
            }

On line 9 in generate.js, you’ll see the code that sends the actual API request. As mentioned above, it uses the completions endpoint with a temperature of 0.6.

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: generatePrompt(req.body.animal),
  temperature: 0.6,
});

And that’s it! You should now have a full understanding of how your startup name generator uses the OpenAI API!

Deployment

You can deploy your web app via vercel. This guide will show you how to deploy a React site or web app and get your domain set up.

React is a JavaScript library for building user interfaces. There are multiple ways to build a React site, including:

Next.js
Create React App
Gatsby
Remix
Preact
Ionic React
Redwood

Deploy React to Vercel

Vercel is a platform for deploying the fastest React sites. You can deploy your site with zero configuration to the best front-end infrastructure.

Develop: Build React sites that connect to your favorite APIs, databases, and content management systems.
Preview: Integrate with any GitHub, GitLab, or Bitbucket repository for instant continuous deployment.
Ship: Deploy your site to every edge node worldwide for the fastest React sites. Static files, Serverless and Edge Functions, and more.

Monitor: Measure Core Web Vitals from actual devices your visitors are using with Vercel Analytics for Next.js or Gatsby.

Built-in CI/CD for React sites

Vercel has integrations for GitHub, GitLab, and Bitbucket to enable CI/CD for your React site with zero configuration. Then, you can run automated tests for performance and reliability on every push. Pull and merge requests are deployed instantly to a unique URL, accessible to your entire team.

Add your custom domain

After deploying, your new React site will automatically be assigned a .vercel.app suffixed domain. You can then add a Custom Domain of your choice, either from a third party or purchased through Vercel.

Deploy React to Vercel Start from a template

Vercel CLI

Install the Vercel CLI and run Vercel to deploy.
Vercel will detect that you are using React and will enable the correct settings for your deployment.
Your application is deployed! (e.g. create-react-template.vercel.app)

Vercel for Git

Push your code to your git repository (GitHub, GitLab, BitBucket).
Import your React project into Vercel.
Vercel will detect that you are using React and will enable the correct settings for your deployment.
Your application is deployed! (e.g. create-react-template.vercel.app)

Closing

These concepts and techniques will go a long way in helping you build your own application. That said, this simple example demonstrates just a sliver of what’s possible! The completions endpoint is flexible enough to solve virtually any language processing task, including content generation, summarization, semantic search, topic tagging, sentiment analysis, and so much more.

One limitation to keep in mind is that, for most models, a single API request can only process up to 4,096 tokens between your prompt and completion.

For more advanced tasks, you might find yourself wishing you could provide more examples or context than you can fit in a single prompt. The fine-tuning API is a great option for more advanced tasks like this. Fine-tuning allows you to provide hundreds or even thousands of examples to customize a model for your specific use case.

Get Started With Open AI Web App Development

Startup Name Generator

Table of contents