OpenAI: AI reviews your code automatically!

#openai #nextjs #typescript #ai

Hi there!

Have you ever felt that reviews are a hassle?

I have launched an app which automatically reviews your code with using OpenAI, AI Code Reviewer!

[Note] I sold this Application and the owner is not me anymore.

I took first place in the Product hunt 🎉🎉🎉

https://www.producthunt.com/posts/ai-code-reviewer

How to use

It's very easy.
Just paste the code you would like reviewed and press the button.

For example, I purposely paste the wrong code which has type mistakes and have it reviewed: const [count, setCount] = useState<string>(0);

Good! AI said, "The code is missing a type annotation for the count variable. The type should be set to number instead of string. ".

Also try to have a Python code reviewed!.
Here is the code that I forgot to add the colon.

def hello()
  print('hello')

The reviews is:

This code has a syntax error. The print statement should be indented so that it is part of the hello() function. The correct code should look like this:

def hello(): print('hello')

Good! Yes, this code has a syntax error and now you got a good review.

Like that, AI Code Reviewer helps you write the right code.

If you have any questions, you can also ask AI Chat Bot.
Try to ask about useEffect.

I asked, "How should I use useEffect? What should I watch out for?", and AI answered, "Using useEffect can be tricky, so it's important to understand when and how to use it properly. You should consider the following: when you use useEffect, the function you pass to it will be called after the render is committed to the screen, which can lead to unexpected behavior if you're not careful. Additionally, useEffect runs after every render, so you should be mindful of how often you're running the effect and the impact it could have on performance. Finally, you should be aware of any potential side-effects that could be caused by your useEffect code."

Looks good!
You can ask anything to AI.

Check it out at: https://ai-code-reviewer.com
Youtube DEMO: https://youtu.be/V7K4IZV_k-E

How this application is structured

It consists of the following

Next.js
Chakra UI
TypeScript
OpenAI
Vercel

I started out using React, but switched to Next.js after reading the following section of the documentation.

Important note: When using Javascript, all API calls should be made on the server-side only, since making calls in client-side browser code will expose your API key. See here for more details.

As for OpenAI, I was able to set it up easily because the official site shows us a sample repository of setups written in Next.js.

https://github.com/openai/openai-quickstart-node

All you have to do is create an API using Next.js API Routes and hit it, as shown in the official sample code below.

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

export default async function (req, res) {
  const completion = await openai.createCompletion({
    model: "text-davinci-002",
    prompt: generatePrompt(req.body.animal),
    temperature: 0.6,
  });
  res.status(200).json({ result: completion.data.choices[0].text });
}

function generatePrompt(animal) {
  const capitalizedAnimal =
    animal[0].toUpperCase() + animal.slice(1).toLowerCase();
  return `Suggest three names for an animal that is a superhero.
Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: ${capitalizedAnimal}
Names:`;
}