こんにちは、最近アニメ「葬送のフリーレン」を観て、漫画を全巻購入してしまった安部です。
今回は、Open Interpreterを使ってみます。
Open Interpreterは、ChatGPTのAdvanced Data Analysis（旧Code Interpreter）のように、プロンプトから判断して自動で処理を実行するという動きを、ローカル環境で実現してくれます。 ローカル環境で動くため、ディレクトリに置いてあるファイルを読み込ませたり、ファイルを特定の場所に出力させたりできます。
今回は、OpenAI のAPIで、gpt-3.5-turboを利用していますが、API Keyを持っていない場合は、Metaが公開した大規模言語モデル（LLM）である「Code-Llama」が自動でダウンロードされて利用できるようになります。
Open InterpreterのChatGPTとの一番の違いはなんと言ってもローカル環境で動作することなので、今回はコマンドラインでローカルにReactプロジェクトを作ってビルドするところまでやってもらいましょう。
では、早速やっていきます。
1. Open Interpreterの始め方
Open Interpreterを使い始めるのは、非常に簡単です。pipでopen-interpreterをインストールします。
pip install open-interpreter
また、あらかじめOpenAIのAPIキーを取得しておきましょう (APIキーがなくても、Code-Llamaを利用することはできます）。API Keyを持っていない方は、こちらからSign upして取得してください。
以下のコマンドで、対話セッションを開始します。
interpreter
--model gpt-3.5-turboのようにモデルを指定したり、-yオプションをつけることでいちいちコマンド実行許可を与えなくてもコマンドを実行してもらうことができます。
2. Reactプロジェクトを作ってもらう
対話セッションを開始します。
interpreter --model gpt-3.5-turbo -y
まずは、手順の全体像を出してもらいましょう。
> ReactでWebアプリを作成しようとしています。使用言語はTypeScriptです。 ビルドツールはViteを使いたいと思っています。node/npmはインストール済みです。 サンプルアプリを作成する手順を教えてください。サンプルアプリ名は、MyAppとします。
回答はこちら。
プラン：
1 Viteをインストールするために、ターミナルで以下のコマンドを実行します：
npm init @vitejs/app my-app --template react-ts
• このコマンドは、Viteを使用してReactのテンプレートを作成します。
• my-appはサンプルアプリの名前です。適宜変更してください。
2 ターミナルで以下のコマンドを実行して、作成したプロジェクトディレクトリに移動します：
cd my-app
3 ターミナルで以下のコマンドを実行して、必要なパッケージをインストールします：
npm install
4 ターミナルで以下のコマンドを実行して、アプリをビルドします：
npm run build
5 ターミナルで以下のコマンドを実行して、ローカルサーバーを起動します：
npm run dev
6 ブラウザでhttp://localhost:3000にアクセスして、MyAppを確認します。
以上の手順で、ReactとTypeScriptを使用したMyAppのサンプルアプリが作成されます。
次に、手順を順番に実行してもらいます。
エラー発生時は解決策を勝手に実行してもらい、完全オートで進めたかったのですが、それはうまくいきませんでした。
手順1から順に、実行してください。 エラーが出た場合は、解決策も勝手に実行してください。← ここは、実施されなかった
実行結果はこちら。
最初からエラーになってしまいました。
エラー発生時、自分でCtrl + Cで止めないと終わりませんでした（たまにこのようになります）。
解決方法も出してくれたので、そちらを実行してもらいます。
上記解決策を実行してください。
ビルドまでしてくれたので、あとは自分でローカルサーバーを起動してアプリが立ち上がることを確認します。
npm run dev
期待通り、アプリが立ち上がりました！
まとめ
Open Interpreterを利用して、ローカル環境にReactプロジェクトをゼロから作成させることができました。
今回はプロジェクトを始める際のミニマルな手順のみでしたが、各種設定ファイルの作成など面倒なことも実施させれば、開発のスタートがだいぶ楽になりそうです。
Open Interpreterを使えばまだまだ色々なことができそうなので、今後もどういうことができるか試してきます。
Acroquest Technologyでは、キャリア採用を行っています。少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。 www.wantedly.com
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- Elasticsearch等を使ったデータ収集／分析／可視化
- マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
