Claude 3.7 Sonnet + Cline: コードを一切書かずにフルスタックアプリを開発する最高のAIコーディングエージェント！

4,723 文字

私が入力した経歴や学歴などの異なるカテゴリーのいくつかの情報に基づいて、このモデルは私のためにこの履歴書を生成することができました。これは実際に応募に使える完全に実用的な履歴書で、PDFやdocファイルとしてダウンロードすることもできます。これはたった一つのプロンプトで作成したシンプルなアプリです。たった一つのプロンプトです。これが新しいSonic 3.7モデルのパワーであり、ぜひ検討してみることを本当におすすめします。今日のビデオを通して、このモデルのコーディング能力に基づいていくつかのクールなものを開発したことがわかるでしょう。
昨日は、Anthropicのこれまでで最も知的な大型言語モデルであるClaude 3.7 Sonnetのリリースにより、本当に出来事の多い日でした。このモデルは、コーディングや他の多くのベンチマークにおいて最先端のパフォーマンス指標を記録していることから、真に驚くべきものです。実際、DeepSeek R1、Claude 3.5 Sonnet、すべてのGPTモデル、O1、O3 miniなど、様々なベンチマークで他の多くのモデルを上回るパフォーマンスを示しています。これは現在までで最も知的なモデルであり、ほぼ瞬時の応答と段階的な詳細な思考を生み出すハイブリッド推論モデルです。
さらに驚くべきは、SWE-benchテストでの記録です。これはモデルが実世界のソフトウェアエンジニアリング問題をどれだけうまく解決できるかを評価するベンチマークテストです。このモデルのSWE-benchでのパフォーマンスを見てください。記録的な62.3%、カスタムスキャフォールドで70.3%を記録しています。比較として、OpenAIのO1モデルはようやく50%に達したばかりで、これは本当に信じられないことです。現在、これが間違いなく最高のコーディングベースのモデルだと言えます。この件についてブログ記事を書いたので、ぜひ読んでみてください。リンクは説明欄にあります。
Anthropicは特に、このモデルがコーディングとフロントエンドウェブ開発において大きな改善を示していると明確に述べています。このモデルがコード生成においてどれほど優れているかをより具体的に示すために、複数のページを持つフルランディングページがコーディングされるデモをご覧ください。これはすべて3.7 Sonnetで行われました。この例では、誰かが速度や日付を変更する機能を備えた太陽系シミュレーションを作成しました。
この強力なコーディングモデルの能力を活用するために、私たちはClineと組み合わせます。Clineを知らない方のために説明すると、これはIDE内で直接アクセスできる自律型コーディングエージェントで、ファイルの作成・編集、ターミナルコマンドの実行、ブラウザの使用など、多くのことを自律的に行うことができます。
始めるのは簡単です。IDEが必要です。私はVS Codeを使用していますが、Cursor、Wim、Surfなど他のIDEも使用できます。次に、そのIDEにClineをインストールする必要があります。この場合、Visual Studio Codeのマーケットプレイスを使用して、このリンクをクリックしてVS Code内で簡単に開いてインストールできますが、すでにインストールしているので、左側のパネルで簡単にアクセスできます。
設定タブに移動し、APIプロバイダーをAnthropicに選択し、課金アカウントにリンクされたAnthropic APIキーを貼り付け、Claude 3.7 Sonnetモデルを選択します。すでにClineをインストールしている場合は、最新のリリースに更新して、この最新モデルにアクセスできるようにしてください。
数学、データサイエンス、あるいはプログラミングのような複雑な科目を学ぶときに行き詰まりを感じたことはありませんか？私にとってゲームチェンジャーとなったものについて話しましょう。それはBrilliantと呼ばれています。Brilliantは実践によって学ぶ場所です。彼らは、数学、データサイエンス、プログラミング、そしてAIさえも扱う何千もの対話型レッスンを作成しました。
個人的にBrilliantが好きな理由は、暗記ではなく問題解決に焦点を当てていることです。基礎から堅実な理解を構築できる第一原則アプローチを採用しています。これは単にビデオを見るよりも6倍効果的であることが証明されており、MITやGoogleなどの専門家によって作成されています。スマートフォンでもデスクトップでも、数分で新しいことを学ぶことができます。
さらに、Brilliantは最近、初心者からプロまで最適な「実世界のデータを使用したデータサイエンス」や「Pythonプログラミング」などの新しいコースを立ち上げました。Brilliantを30日間無料で試し、年間プレミアムサブスクリプションの20%割引を受けるには、説明欄のリンクにアクセスしてください。それでは、ビデオに戻りましょう。
では始めましょう。HTML、CSS、JavaScriptを使用してアニメーション付きの天気カードを生成するシンプルなアプリケーションを作成する例を紹介します。これは、アプリ内でアニメーションで天気の種類を視覚化できる複数の天気カードがある場所です。
現時点では、ブラウザを使用してカードが作成されたかどうかを確認しています。雨のカードと風のカードが開発されたことがわかります。どうなるか見てみましょう。コマンドを実行してウェブブラウザで開いてみます。
最初の表示では、アニメーションの生成はうまくいったように見えますが、フォーマットをもう少し良くしたり、太陽カードと雪カードを修正したりするなど、いくつか改善できることがあります。雪のカードにはアニメーションが表示されていないようです。
Clineに戻って、「このアプリのフォーマットは期待通りではありません。対称的にしてください。また、太陽のアニメーションには太陽にランダムな線が表示され、雪のカードは機能していません」と言えます。
これでフォーマットの修正、太陽のアニメーションの修正、雪のカードの修正に取り組み、私が介入することなく自律的にこれらの問題に対処することがわかります。新しい実装の作成が完了したようで、確かにずっと良くなりました。太陽のアニメーションが修正され、雪のアニメーションも修正されています。雪のカードと他のカードが完全に機能し、フォーマットもずっと良くなっています。これが単一のプロンプトを送信し、もう一度の反復ですべてを修正することで構築できたものです。
もう一つのヒントとして、これはほぼ瞬時の応答と段階的な詳細な思考を生み出すハイブリッド推論モデルであるため、Clineのプランモードを使用できます。これは推論モデルの助けを借りて情報を収集するモードです。これが推論モデルであるため、より良いアーキテクチャを完全に計画することができ、つまり、行動モードに入る前にアプリの構造を完全に生成することができ、幻覚を減らしエラーを減らすことができます。
次に私がやっていることは、AIを使用して履歴書やカバーレターを生成するSaaSプラットフォームを開発することです。これは私が構築しようとしている新しいアプリです。また、認証システムやSupabaseとの簡単な接続方法も紹介します。
アプリケーションを生成した後、「Supabaseアカウントへの直接リンクを提供してください」と言うことで、データベースや認証システムの設定を手伝ってもらうことができます。始める前に、World of AIニュースレターへの登録をぜひお勧めします。毎週さまざまなニュースレターを投稿しているので、AIの世界で何が起こっているかについて最新の知識を簡単に得ることができます。これは完全に無料なので、ぜひ登録してください。
現時点では、ウェブサイトの基本構造が生成され、ブラウザを使用してすべての機能をテストしているように見えます。一つ気づいたのは、思考方法を使用してさまざまなエラーの解決策を見つけることができたということです。何らかのエラーがあった場合、その思考能力を使用して解決策を見つけ、構造化された計画を立てるために推論しました。
このアプリの最初の反復の開発が終了したようです。コマンドを実行して起動してみましょう。これは本当に素晴らしいです。これはWixから取得できる完全なテンプレートのように見えますが、これはアニメーションがあり、さまざまな種類のテンプレートを選択する方法があり、ここにビルダーがあり、下にスクロールするとプラン料金構造、よくある質問、そしてフッターがある基本アプリケーションです。
これはすべて、私が介入することなく単一のプロンプトで生成されました。Clineは自律エージェントを使用して、スタイリングからHTMLファイルまで、これらのさまざまなページをすべて構築します。では、自分の履歴書を作成してみましょう。個人情報に基づいて何かを選択できます。いくつかのランダムな情報を入力してみます。
ランダムな情報を貼り付けました。「履歴書を生成」をクリックすると、経験から教育まで、さまざまなカテゴリで入力したいくつかの異なるセグメントに基づいて、私のためにこの履歴書を生成することができました。これはPDFやdocとしてダウンロードできる、実際に応募できる完全に実用的な履歴書です。これはたった一つのプロンプトで作成したシンプルなアプリです。たった一つのプロンプトです。これが新しいSonic 3.7モデルのパワーであり、ぜひ検討してみることを本当におすすめします。今日のビデオを通して、このモデルのコーディング能力に基づいていくつかのクールなものを開発したことがわかります。
では、認証とデータベースを備えた本格的なフルスタックアプリを作成したい場合、Supabaseを介してデータベースと認証システムを接続するように簡単に要求できます。「今すぐ接続を手伝ってください」と言えば、単一のプロンプトでAPIリクエストを取得し、これらのセットアップを完全に案内してくれることがわかります。
現在、Supabase JavaScriptクライアントライブラリのインストールに取り組んでいることがわかります。Supabase設定ファイルを作成し、認証などをセットアップします。これが、この新しい強力なモデルを使用して、完全なフルスタックアプリを自律的かつ簡単に構築する方法であり、Clineと組み合わせることを本当におすすめする理由です。無限の可能性があります。
ですが、それが今日のビデオの内容です。今日のビデオを楽しんでいただけたら幸いです。リンクはすべて説明欄に記載しています。ニュースレターに登録して、無料で最新情報を入手してください。PatreonをチェックしてプライベートDiscordに参加し、登録してフォローし、Twitterページをチェックして、AI界で何が起きているかについて最新情報を入手してください。また、AIの世界で何が起きているかについて最新情報を入手するために、通知ベルをオンにし、以前のビデオもチェックすることをおすすめします。
それでは、視聴ありがとうございました。素晴らしい一日を過ごし、ポジティブなエネルギーを広め、またすぐにお会いしましょう。