🤖

AIにコードレビューをお願いできるアプリを作った話

2022/12/21に公開1件

はじめに

最近OpenAIが流行っているということで、私もOpenAIを使ったアプリを作りました。

アプリの紹介

https://ai-code-reviewer.com/

AI Code Reviewerという名前の通り、AIがコードをレビューしてくれるアプリを作りました。
中身のAI部分はOpenAIのAPIを使っています。

例えば、const [count, setCount] = useState<string>(0);という型間違いのコードを渡すと、ちゃんとレビューしてくれます🎉

また、コードレビューだけだと面白くないと思って右下にチャットボットを入れました。

これでなにかあればすぐにAIに聞くことができますね！
チャットボットに関しては基本PCで利用することを想定しているので、ショートカットキーでメッセージを送信できるようにしています。

少しこだわったところとしては、多言語化を行っていて、現在中国語（簡体字）、英語、日本語の3言語に対応しています。ブラウザの言語設定に応じて自動でリダイレクトされます。（デフォルト言語は英語）

また、コード入力部分はcodemirrorを使ってシンタックスハイライトを入れるようにしました。
codemirrorにした理由は、codepenのUIが良いと思って調べたところ、codemirrorを使っていたからです。

ありがたいことにリリースした直後にProduct HuntでDaily１位になり、その後すぐにアプリ譲渡が決まりました🎉

技術スタック

使用技術はいつものNext.js、TypeScript、ChakraUI、そしてコアとなるOpenAIのAPIです。
最初Reactで作ってたんですが、ドキュメントの以下の部分を読んでNext.jsに切り替えました。

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.

OpenAIに関しては、公式がNext.jsで書いてあるセットアップのサンプルリポジトリを出してくれているので簡単にセットアップできました。

以下の公式のサンプルコードのようにNext.jsのAPI Routesを使ってAPIを作ってそれを叩けばいいだけです。

api/generate.js

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:`;
}

制作の裏話

最初このアプリを作るにあたり、どういう風に作れば良いのかせっかくなのでAIに聞こうと思ってhttps://chat.openai.com/chat で聞いてみました。

すると以下の回答でした。

そのまま使うと普通にエラーが出たのでちゃんとドキュメントを読みました。

要はモデルは大きく分けて上記の3パターン、そのモデルの中でも複数のモデルがあります。
例えば、GPT-3ならtext-davinci-003、text-curie-001、text-babbage-001、text-ada-001、Codexならcode-davinci-002とcode-cushman-001という感じです。
そのためAIが教えてくれたようにGPT-3とざっくりと指定するだけでは厳しくて、その中のどのモデルを使うか指定する必要があるのでした。

そしてtemperatureやmax_tokensに関してもそのままだと少し不具合があったので微調整する必要がありました。
というわけで、AIにアプリを作ってもらおうとしましたが、さすがにざっくりとした回答しか得られなかったので、諦めて自力で書きました。笑

あとがき

OpenAIを使って初めてアプリを作ってみましたが、公式のドキュメントが手厚く、セットアップ方法やサンプルリポジトリもおいてあるので簡単に使うことができました。
最初は18ドルの無料クレジットがあるので気軽に試すことができました。
結局Product Huntで一位になった結果、アクセスが集中してしまい2日で使い果たしてしまって焦ることになったのですが、そのこともあって譲渡に繋がり本当に良かったです。
譲渡に関しては別の記事で詳細を書こうと思っています。

今後も色々作っていきます💪

参考

Discussion

fkag_sdm

良く分からないけど凄い分かる様になりたい猫です🐈‍⬛