風船とGPT-4.5&Claude 3.7 Sonnetを使って完全なアプリを構築する方法

AGIに仕事を奪われたい
この記事は約11分で読めます。

6,325 文字

How to build an *ENTIRE* app with Windsurf, GPT-4.5 & Claude 3.7 Sonnet
Learn how to build with AI and AI agents in my new courses: code AGENT25 for a 25% discount. This is a limited-time offe...

こんにちは、皆さん。今回の動画では、この数日間に私が共有したことについて、GPT-4.5を私のコーディング環境でどのように使っているかを簡単にお見せしたいと思います。ここに私の好きなAIを活用したコーディング環境のひとつであるWindsurfがあります。そして利用可能なすべてのモデルがあります。Claude 3.7 Sonnet Tinyモデルとベータ版のGPT-4.5があります。
お見せしたいのは、非常に素晴らしい結果をもたらしている私のワークフローです。まず最初にお見せしたいのは、その結果です。これは純粋にAIによって作成された素敵な小さなゲームで、Wikipediaのような場所で見つかる新しいトピックについて、アドベンチャー感覚で学ぶ方法を提供しようとしています。
「Wiki Explorer」は、AI搭載のナビゲーション、チャレンジ、インタラクティブな視覚化、楽しいトリビアゲームで学習を冒険に変えるというものです。ゲーム全体はまだ完全に開発されておらず、これは文字通りこのゲームの最初のイテレーションです。Windsurfをどのように使用してこれを思いついたか、プロンプトなども含めてお見せします。
ウェブサイトとそのウェブサイトの大まかな動作についてお見せしましょう。ここにゲームの名前があります。これは動作していないようですが、修正が必要ですが、そこにはあります。それは素晴らしい機能になると思います。そして「About」ページがありますが、これはランディングページで、すぐにゲームを始めることができます。まだログインページなどはありません。
これらは機能で、機能の説明、ゲームの仕組みなどがあります。繰り返しになりますが、ランディングページとすべては、私が選んだモデルであるClaude 3.7 Sonnetによって生成されました。実際のゲームまたはプロジェクトの計画はGPT-4.5によって作成されました。GPT-4.5はこの点でかなり優れていると感じています。私の考えでは、計画や非常に賢く革新的なアプリケーション開発方法を思いつくのに優れたモデルがあるのだと思います。これが私がテストしたかったことです。
このワークフローでは、GPT-4.5を使用して計画を作成し、Claude 3.7 Sonnetを使用してその計画を実行しました。ゲームを見てみましょう。クリックすると、新しいゲームが始まります。これは動作しています。
このここにある機能は、私のテストではそれほど上手く機能していません。これは確かに改善する必要がありますが、これはゲームを通じての進行状況を視覚的に表現したものです。ゲームのアイデアは非常にシンプルで、繰り返しになりますが、このアイデアは私が考えたものではなく、完全にGPT-4.5によって作成されました。ゲーム作成の計画も含めてです。
基本的にゲームは非常にシンプルです。目的地があり、これがそれになります。これはトピックで、このトピックはWikipediaで見つかるものです。ランダムに選ばれました。そして今、ランダムに選ばれた別のトピックも示されています。アイデアは、火星からCOVID-19パンデミックへの接続を見つける必要があるということです。ヒントをリクエストするためにLLMを使用することもできます。これもLLMによってパワーアップされています。
例えば、トピックを理解していない場合、次のステップやこの特定のトピックに到達するために私がクリックする必要がある次のリンクについての説明を求めることができます。例として、ここで私は「火星」にいます。火星とCOVID-19パンデミックの関係は何でしょうか?それがこのゲームの考え方です。他にも賢い戦略があるかもしれません。
スコアや移動回数、使用したヒント数などもあります。それらすべてが機能しているかどうかは確かではありません。必要であればLLMからヒントをリクエストすることができます。この場合、ここへ進むためにクリックしたいリンクが思いつかないので、ヒントが必要です。
非常に新しいトピックであるかもしれないので、ヒントをリクエストします。これもLLMに呼び出しを行い、そのコードはすべてClaude 3.7 Sonnetによって生成されました。ここにヒントがあります。このヒントは非常に簡単です。これが実際に何を意味するのかわかりませんが、とにかく簡単、中程度、難しいがあり、それが正確に何なのかを確認する必要があります。
「可能性のあるヒントの1つは、火星と目標記事の間の接続を見つけるために、COVID-19パンデミック中の宇宙探査を検索することです」と言っています。いくつかの提案をしてくれていますが、AIに特にここのトピックに焦点を当てるよう依頼することが改善点だと思います。それらのトピックに実際に焦点を当てているのか、それともこれが完全にランダムで、ここに実際には見つからないものなのかは完全には確かではありません。そうでなければ役に立たないでしょう。次のステップを取る必要があり、迷子になりたくないし、実際に接続を見つけるための進歩を遂げたいのです。
例として、ここで火星を選びます。火星からここへの接続が何なのか、あるいは何がそこに導くのか正確にはわかりません。おそらくCOVID-19パンデミックに私を導くかもしれないトピックがいくつかあるかもしれませんが、ここで何か見つけられるか見てみましょう。これが候補の一つかもしれません。実際にそれをクリックします。ここでもただ色々なことをテストしているだけですが、これがゲームの楽しい部分です。
それについてもっと読んで学び、そしてリンクをクリックします。再度、ゲームは完璧ではなく、これは最初のイテレーションです。常に改善することができます。様々なことを要求することができます。どうやらこれはゲームの第3フェーズのようです。もし私がそれほど詳しくない場合、例えばこれらのトピックの各々のプレビューを提供するなど、改善することを選ぶことができます。それは私の専門分野ではないので、わからないでしょうが、それは私にとって非常に役立つでしょう。少なくともそれがゲームのアイデアです。
ここで何を選べばいいのか見てみましょう。これがゲームの難しさです。これらのトピックのどれもが専門家ではないので、このトピックに近づくためにクリックすべきものが正確に何なのかわかりません。ここで何かを試してみます。このリンクをクリックします。これは「気候変動」です。
ここにもう既に来ていることがわかります。これがどのようにそれに接続されているのか完全には確かではありません。それがゲーム自体の興味深いところですね。トピックをクリックするときに運がよくなることがあります。私がこのトピックをクリックした理由は、これが高い論争のトピックだと考えたからです。それが私の接続の仕方で、COVIDもまた高い論争の一つだと思いたいと思ったのでそれを選びました。そしてそれはここにあります。
今、それをクリックすると、「ミッション達成、710ポイントのトータルスコア、3回の移動、1つのヒントを使用」と表示されます。ここからここまで3〜4ステップで進みました。これは私が初めてこれをやったときで、これはラッキーだったと思います。「あなたはナビゲーションの天才です」と言っています。何らかの理由でこれから脱出できませんが、それはデザイン的にあまり良くありません。
たぶんここに閉じる機能を追加できるでしょうが、少なくともゲームの基本機能は実際に動作しています。AIを使用し、Wikipediaと知識源を使用しています。すべてが機能しているようです、少なくとも最初の状況では。そしてこれは楽しいと思います。例えば知識を操作するための新しい経験を構築する本当に興味深い方法だと思います。
私はこの週末ずっとこれをプレイして、とても楽しかったです。多くの新しいトピックについて学びました。機能はもちろん改善できます。決して完璧ではありませんが、これはすでに非常に興味深いと思います。そして私は実際にコードに触れる必要がなく、すべてはエージェントと私が選んだ言語モデルによって行われました。
コードに戻って、プロンプトをお見せしましょう。これが最初のプロンプトです。「AIを使用してウィキペディアについて学ぶことを楽しくするような、斬新で創造的なゲームの設計を手伝ってもらえますか?いくつかのアイデアを提案してください」と言いました。
このアイデアは、コンテンツを消費し、トピックについて学ぶための楽しくて興味深い新しい方法を構築するためにAIを使用できるかどうかということです。他にも探究したいアイデアがありますが、私が考えている他のもっと真剣なプロジェクトにこれを統合できるように、うまく機能するワークフローを見つけられるかどうか確認したかっただけです。
ともかく、これをリクエストしました。ちなみに、ここで使用したモデルはGPT-4.5です。これが私が探求しているものです。ブレインストーミングなどの面での応答はGPT-4.5の方がはるかに優れていることに気づきました。私はそれがGPT-4.5の適切なユースケースだと思います。そして、それはすべてのこれらのアイデアを私に与えました。ちなみに、これらすべてが非常にクールなアイデアだと思います。しかし、これが私が選んだものです。これが私の注意を引いたものでした。
そしてそれを選択した後、「Wiki Explorerをどのように構築しますか?計画を作成できますか?」と伝えました。GPT-4.5を使い続けて計画を作成しました。これは計画の部分です。コピーペーストする代わりに、Windsurfにはエージェント機能もあるので、「このフォルダ内のplan.MDファイルにその計画を書くのを手伝ってください」と言いました。ここにあるこのフォルダです。そのファイルを作成し、編集し、ここにその要約を作成しました。
これが私たちが得たものです。プロジェクトのすべてのフェーズがあります。今のところ、この時点まで達成しています。まだゲーム化は行っておらず、これもまだ行われていません。プロジェクトを簡単にチェックしただけですが、バックエンドとフロントエンドがあります。バックエンドはFast APIを使用していると思います。デプロイメントについては、Vercelを選択したと思います。バックエンドについては、これを選択しました。AIについてはこれを選択しました。なぜ異なるオプションを提供したのかはわかりません。
しかし、すべてをそのままコピーペーストしました。何も明示的に指示しませんでした。はい、Wikipediaなどを使用しています。それが文字通りそこにあるスタックです。それが計画です。その後、「ゲームを構築しましょう」と言いました。そして今、Claude 3.7 Sonnetに切り替えました。これはコード全体、バックエンドとフロントエンドのコードを書くことについてです。
そこで私は「ここに計画があるので、ビルドを開始してください」と言いました。そして、ビルドを開始します。すべてが見えます。ファイルを作成しています。多くのファイル、多くのコードを作成しています。時々一時停止することがあり、その場合は継続するだけで、Windsurfは、ここで終わったことを認識して、プロセスを続行することができるほど賢いです。
異なるページをすべて構築し続けました。はい、いくつかのコマンドを実行しました。要約を提供し、その後、「実行を手伝ってください」と言いました。特定のスタックに詳しくない場合、この時点では実際にどのスタックを開発に選んだのかわからなかったので、「実行を手伝ってください」と言いました。そして実際に実行しようとしましたが、いくつかの問題に遭遇したと思います。
ここでいくつかのコマンドを拒否したようです。いくつかのものをインストールする必要がありました。それは手動で行いました。これはバックエンド用です。それから「もう一度実行してみましょう」と言いました。そして再び実行しようとしました。依存関係は既にインストールされていました。それは私が手動で行ったことです。そして再び試みて、最終的に動作させることができました。
「動作していますか?」と尋ねました。そして、フロントエンドを実行します。フロントエンドが実行されると、テストすることができました。「ゲームとその目的を説明してもらえますか?」と尋ねました。ゲームが何についてのものなのか確信が持てなかったので、簡単な説明を求めました。そして説明が得られました。または実際にコンテキストを使用しました。コンテキストにアクセスできます。
ファイルを分析すると、ファイルを分析したことを教えてくれます。それがWindsurfについて好きなところです。少なくともエージェントが正確に何をしているのかを教えてくれます。それから「記事のリンクはランダム化されるべきだと思います」と言いました。ゲームが奇妙な記事のリンクを提供しているのに気づいたので、少し改善するように言いました。それが私が行った唯一の改善です。
それからいくつかの最適化を行いました。非常に遅く実行されていたからです。「変更を適用してください」と言いました。そして「ゲームが超遅くなりました。スピードを改善するアイデアはありますか?」と言いました。再びClaude 3.7 Thinkyモデルを使用しています。そしていくつかのファイルを編集し、本当に速くなり、キャッシングを行っています。通常、ウェブアプリを構築する際に適用するような多くの異なるトリックを適用しています。本当にクールです。
最初のイテレーションでは非常に遅く、プレイすることさえできませんでした。URLに問題がありましたが、非常に簡単に修正しました。そして今、その問題は少なくなっています。明らかにまだやるべきことはたくさんありますが、完成するのに1時間もかからなかったと思います。しかし、このように構築するのは本当に楽しいです。
実は同じワークフローを息子と一緒に試しました。Windsurfの使い方を教えていて、一緒に素敵な3Dテトリスゲームを構築しました。3Dになるとゲームは超チャレンジングで、ゲームは本当に素晴らしいです。そして同じプロセスを使用しました。小さな計画があり、それはうまく機能します。本当にうまく機能します。
GPT-4.5はブレインストーミングを行うアシスタントになる可能性があると思います。意図を本当に理解し、必要ないあらゆる種類のコンテンツ、追加のタイプのコンテンツを削除し、手元のタスクに焦点を当てるのです。私がそれが好きな理由であり、このように使うことを選んだ理由です。
これらは私がこれらのモデルをどのように使用しているかについて共有したいいくつかのアイデアです。Windservとこれらの統合されたモデル、例えばClaude 3.7 Sonnet Thinkingで多くの楽しみを持っています。これが今や私のデフォルトモデルです。そして、Grok-3のような新しいモデルでもっと探求できることを本当に期待しています。まだここでの統合を待っています。そして探求し、私の発見についてもっと共有していきます。

コメント

タイトルとURLをコピーしました