イントロダクション
2025年からAIの技術に興味を持ち、APIを使ったアプリケーションを作成したいと考えていました。ChatGPTやGeminiなどの複数のアプリケーションを使用していましたが、1つの場所で複数のモデルを使用したいと思うようになりました。そこで、興味本位から自己学習の一環としてChatGPTを模倣したアプリケーションを作成しました。
ソースコードは今後GitHub上に公開する予定です。
まだまだ未完成の機能が多いですが、たくさんのAIモデルに対応しているため、AIのWrapperとしてはかなり面白いのではないかと思います。
プロジェクトの概要
このサイトは、ChatGPT、Gemini、Claudeなど複数のAIモデルに対応し、ユーザーが自由にモデルを選択して対話できるウェブアプリです。ReactとNode.jsをベースに構築し、APIを介して各AIモデルと連携するアーキテクチャを採用しています。ストリーム出力・推論モデルの思考過程の出力(一部モデル)に対応しています。
開発の過程では、AIの生成したコードやAIのフィードバックを受けながらコーディングを進めました。
各種APIやAIモデルを使用するにあたり、公式ドキュメントは徹底して読み込むことにし、作業を進めました。
主要機能の紹介
使用するAIのモデルを選択する
デフォルトで選択可能なAIモデルは、左上のモデル名の下矢印を押すことで選択が可能になります。
ChatGPT,Gemini,Grok,Claude,DeepSeekの様々なモデルを使用することが可能です。
2025年4月13日時点では、以下のモデルに対応しています。
| OpenAI | GPT-4o（ChatGPTで使用されているモデル) |
| GPT-4o-mini | |
| O1-mini | |
| O3-mini | |
| GPT-4.5 (プレビュー版) | |
| Gemini | Gemini-2.5-pro |
| Gemini-2.0-flash | |
| Gemini-2.0-falsh-thinkng | |
| Claude | Claude-3.7-sonnet |
| Claude-3.7-sonnet-thinking | |
| Grok | Grok3 |
| Grok3-fast | |
| Grok3-mini | |
| Grok3-mini-fast | |
| DeepSeek | DeepSeek-V3 |
| DeepSeeek-R1 |
ウェブ検索機能
OpenAIの「web-search-tools」を使用することで、ウェブ検索が可能になりました。この機能はResponseAPIを使用しています。
検索を実行した際に、検索のソースが画面に表示されます。
こちらの機能は動作の安定化のために、今後調整を行なっていきます。
ResponseAPIについては、こちらの記事で紹介をしています。
ストリーム出力
ストリーム出力に対応しているモデルに関しては、どのモデルを選択した場合でも、ストリーム出力されるようにしています。DeepSeek-R1の推論モデルのストリーミング出力にはかなりこだっています。
音声の出力
実装済みですが、非公開にしている機能に「音声」機能があります。出力されるテキストを読み上げてくれます。
OpenAIの「TTS-1 HD」モデルを使用した、最新の高品質な音声モデルを採用しながら、音声の波形を表示させることで再生箇所を選びやすくしています。
DeepResearch
唯一、LangGraphを使用した機能になっています。以下のステップで高品質な文章生成を目指して作成しました。
- 検索クエリ作成
- ウェブ検索・再検索
- 下書き
- 記事の作成
それぞれ別のモデルを使うようにしてみました。まだ完成度が低いため、非公開にしています。
技術的な学びや成果
元々、技術的にはHTML,CSS,Javascriptの基本的知識程度しかなかったのでプロダクトを作成できるとは思っていませんでした。AIを活用することで、そこからたくさんの学びを得ることができました。
エンドポイントやAPIの利用、Reactの使い方など、今まで触れることのなかった領域の知識を得ることができました。
LangGraphを使ってエージェント機能を実装していますが、ノードの設定を行うだけで並列実行させられる部分はメンテナンスが楽になることから大変面白い発見でした。
何より、新しいモデルが発表されるたびに自分のアプリケーション上で使用できるようになることは非常に楽しみとなっています。
今後の展望
今後は、単に複数のモデルを使用できるだけではAIを使いこなせずに終わってしまいます。エージェント機能の開発に注力し、AIが相互に連携してより高精度なアウトプットを出力できる方向を目指していきたいと考えています。
- プロンプト管理機能
- メモリー機能
- MCP接続機能
実装難易度が硬い機能がたくさん未実装なのですが、少しずつアプリケーションのエージェント化に向けて進めていきたいです。
