AMA AI is a React application that allows the user to interact with an Artificial Intelligence (AI) technology called OpenAI. Try asking the OpenAI a question and see what response you get back. After inputing some text as a prompt, the AI will generate a text completion that attempts to match whatever context or pattern given. If you give the AI a prompt like “Write a tagline for an ice cream shop”, it will return a completion such as “We serve up smiles with every scoop!”. Try changing the settings to see if the AI will generate different responses.
Read more about the cool features this AI technology has in the docs.
Here's a link to the React application I built using the OpenAI API: AMA AI.
- React fundamentals
- React Hooks
- Local storage
- Network request
- API
- Asychronous JavaScript
- CSS Flexbox
- Tailwind CSS
To get a local copy up and running follow these simple steps:
- In your terminal, clone the repo
git clone git@github.com:lswatson16/fun_with_ai.git
- cd into the root directory
cd fun_with_ai - Install NPM packages
npm install
- Start the server to see the application in the browser
npm start
- Runs the app in the development mode.
- Open http://localhost:3000 to view it in the browser.
- The page will reload if you make edits.
I wanted to get more practice with React hooks. Implementing local storage with hooks was a huge win for me. It was important that I get the application working first with a few features (eg. adding presets and ability to change the engine, temperature, and max tokens). Once that was complete, I created a feature branch called feature/local-storage to convert all class components to functional components with React hooks. On this feature branch, I implemented local storage using the React hooks, useState and useEffect. See branch here.
This was the first time I implemented local storage. I found this article, Local Storage in React, very helpful. After implementing local storage to the form, I realized I needed to add an additonal button to reset the form to create a better user experience.
Another thing I want to improve on as a front end developer is design. I was able to accomplish a clean and responsve design using Tailwind CSS and plan to use Tailwind in future projects.
Here's some other helpful articles:
The user can enter a prompt to ask the AI a question like "Who is Malcom X?". When the AI responds, the messages between the user and AI are displayed in a list from newest to oldest.
The messages and input values persist on the page even when the page reloads due to local storage.
The form allows the user to play around with the settings for the engine, temperature, and max tokens.
If a user doesn't want to change the settings, then the default engine is Curie and the request body will send these presets to the API:
- temperature: 0.5
- max tokens: 60
- Favoriting messages between the user and AI
- Example prompts that the user can easily copy and paste into the form to get started using the application
- Narrowing down an audience/niche and specific topics to ask the AI (eg. Black history in America)
- Removing persisted messages from local storage
- Adding CSS animation to the AI response text
- React
- Javascript
- HTML/CSS
- Tailwind CSS
- Lighthouse (Chrome Dev Tools)
- React Dev Tools (Chrome Dev Tools)
This application is hosted on Vercel. Please use this deploy link to skip installation and view the application: AMA AI.
Lauralyn Watson