このフルフリーのコーディングAIは数秒でミニアプリを構築できる！！！

3,502 文字

独自のAIコーディングアシスタントを作成する最も簡単な方法は、Gemini coderを使用することです。Gemini coderはプロジェクトなので、明確にしておきましょう。このプロジェクトはオープンソースですが、APIキーを追加する必要があります。これを言うと人々は誤解して、コメントで「どうしてフリーと呼べるのか」と質問し始めます。このリポジトリは、MIT licenseのフリーなリポジトリで、Gemini coderと呼ばれています。これは現在Googleに所属し、以前はHugging Faceにいた著名人のOmarによって作成されました。このリポジトリを使用する場合は、Google AI APIキーを追加する必要があります。
このツールの使用方法をお見せしましょう。現在、このツールはHugging Face Spacesでスペースとして利用可能です。使用したい場合は、ここに行ってリポジトリをクローンして使用するか、このスペース全体を複製して独自のGemini APIキーを追加して使用を開始できます。
今から、このツールの使用方法をお見せします。これは、Gemini 2.0 flash、Gemini 1.5 Pro、Gemini 1.5 flashという3つのモデルで実現できる最小限のセットアップです。前回の動画でも言及しましたが、Gemini 2.0 flashは、品質をあまり損なうことなく、より高速な推論を実現したい場合に使用できる最高のモデルの1つです。
ここで非常に単純なことを試してみましょう。これは既に行ったことですが、コピーライティング代理店のランディングページを構築するというものです。それだけを入力すると、数秒以内にこのランディングページが完成しました。Copy Proというナビゲーションバーがあり、メインのヒーローセクション、そして他のセクションも利用可能です。
これはどのように可能なのでしょうか？このリポジトリには3つの要素があります。1つ目は、コードを作成するためのGemini APIを使用していること。2つ目は、コーディングサンドボックスを作成するのに役立つsandpackを使用していること。ここでsandpackとは何かを見ることができます。編集、書き込み、保存の機能を提供します。そして3つ目は、Tailwindを備えたNext.jsのappルーターを使用していることです。これは現時点で人気のあるAIインターネットスタックです。一部の人々はshadcn UIを使用していますが、この場合はTailwindだけです。
このページを更新して、最初からやり直してみましょう。何でも質問できますが、これは小さなツールに特に役立ちます。ここで「アップロードした画像から色を抽出できる簡単なウェブアプリを作成してください」と入力してみましょう。画像をアップロードすると、それに基づいてカラーパレットを作成してくれます。これは企業で働いている場合に非常に役立ちます。ロゴに使われている色を常に使用したい場合などです。
ここに何かありますので、ファイルを選択してアップロードします。画像を取得しました。これを手伝うボタンがあるか確認してみましょう。ボタンがないようですね。コードサンドボックスで開くことができ、それを行うと技術的にコードサンドボックス部分に移動し、そこで構築したアプリケーション全体が利用可能になります。これはCodePenのセットアップと非常によく似ています。
これをローカルで実行するには、リポジトリをクローンするだけです。お気に入りのターミナルを開くことができます。私の場合、ターミナルを開いていますが、更新を求められ続けるのが大変です。私がすべきことは、git cloneしてこのリポジトリをクローンすることです。そうすると、現在の作業ディレクトリにGemini coderが入ります。
Gemini coderが利用可能になりました。Gemini coderを見ると、このリポジトリ全体が利用可能です。Tailwindの設定など、すべてが利用可能です。唯一必要な変更は、新しい.envファイルを作成することです。これを行うには、ここに行って作成するか、単にtouch .envファイルを実行するだけです。そうすると.envファイルができ、ファイルの編集を開始できます。
またはVS Codeで開くこともできます。VS Codeで開いたら、新しいファイル、作成者を信頼する、新しいファイル、テキストファイル、ファイルと進み、キーを追加する必要があります。GOOGLE_AI_API_KEYをコピーして貼り付け、Google AI StudioでAPIキーを取得できます。キーがこのようなものだとしましょう。保存したら、現在の作業ディレクトリ内に.envファイルとして保存します。すでにtouchで作成したので、それを置き換えるだけです。
これで完了です。この時点ですべきことは、warpに移動してnpm installを実行することです。これにより、すべてのJavaScriptライブラリがインストールされます。次に必要なのは、npm run devを実行することです。これにより、セットアップが実行されます。私の場合、APIキーを更新する必要があるため、現時点では機能しませんが、すぐに更新します。
npm run devを実行すると、起動し始めます。URLをコピーしてここに貼り付けます。私のAPIキー、これは技術的に機能するはずです。これは現在、私のローカルホストで実行されています。「Windows 95テーマの個人プロジェクト用ランディングページを作成してください」と入力してみましょう。3つのモデルから選択できます。実験的なモデルである2.0 flashを使用してみましょう。
ご覧のように、これは私のローカルコンピュータで正常に実行されています。正確には、ローカルモデルではなく、依然としてGoogleのサーバーに接続していますが、Googleには寛大なAPI制限があるため、誰かに支払うことなく使用できます。ここにスタートボタンがありますが、クリックしても現時点では何も起こりません。
初期コードができたら、cursorなど他のツール内で使用したり、会社内の小さな内部ツールとして使用したりできます。例えば、「シンプルなカレンダーアプリを作成してください」と入力することができます。ここで「シンプルなカレンダーアプリを作成」と入力すると、シンプルなカレンダーアプリの構築を開始します。
このようなものを本番環境で使用しようとすると、Google Generative AI APIキーのレート制限に引っかかりますが、個人利用のような場合はそれほど気にする必要はありません。ご覧のように、数秒という短時間で、Gemini 2.0 flashを使用しているため、信じられないほど高速です。
「シンプルなHTML5のギャラクシーシューターゲームを作成」と入力することもできます。これは主に、小規模なツール、ミニプロジェクト、MVPに役立ちます。スタートアップや製品があり、SEOやプログラマティックSEO用にウェブサイトのサイドに小さなミニプロジェクトを追加したい場合、これは非常に役立つと思います。誰にも支払う必要がなく、これを実行できます。
どうやって撃つのでしょうか？右に移動できますが、撃つ方法がわかりません。スコアは取れそうにありません。
良いところは、コードサンドボックスで開いて編集を始められることです。コードサンドボックスではVisual Studio Codeで開くこともでき、技術的にGemini coderを使用して必要なものすべてを提供します。
ミニプロジェクトを作成するために、Hugging Face Spacesからローカルでの実行まで、すべてを行うことができます。ただし、データはGoogleのGeminiサーバーに送信されるので、それは念頭に置いておく必要があります。しかし、それ以外は素晴らしいプロジェクトです。
これについてもっと学びたい場合は、コードを見ることができます。コード全体がここかGitHubで利用可能です。リポジトリをスターすることは、開発者にとって大きな意味があります。このようなコーディングプロジェクトについて、あなたの意見を聞かせてください。また別の動画でお会いしましょう。ハッピープロンプティング！