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
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:`;
}
You can try it!
That's it!
Thanks for reading.
This is my first time to use OpenAI, and I am happy to develop this app :D
Please send me a message if you need.
yuiko.dev@gmail.com
https://twitter.com/yui_active
If you think this article is useful, please buy me a coffee :)
https://www.buymeacoffee.com/yuikoito
Thank you!
Top comments (1)
Can it review a complete codebase - list of files / directories ?