見出し画像

Cursorを使って月収100万円のアプリを作る方法（ステップバイステップ）

AGIに仕事を奪われたい

33,559 文字

私の名前はデイビッド・アンドレで、現在月に7,000ドルを稼いでいるアプリをCursorを使って構築しました。この動画では、どのように作ったのかを正確にお見せします。
必要なのはこの3つのAIツール、Cursor、Claude、そしてVealだけです。プログラマーである必要はなく、ビジネス経験も必要ありません。そしてAIの専門家である必要も全くありません。この動画を最後まで注意深く見ていただければ、あなた自身のAIスタートアップを構築するために必要な全ての知識を得ることができます。
スタートアップを作るには、まずアイデアが必要です。問題を解決するアイデアが必要なのです。「何がクールな製品になるだろう」と考えるのではなく、既存の問題を見つけ、その解決策を考えることが重要です。後ほど、その具体的な方法をお見せします。
この動画では、明確なトレンドがあります。それはディープリサーチです。非常に深い調査を行うAIツールへの関心と需要が急上昇しています。これはGoogleトレンドのグラフからも見て取れます。最初はGeminiでした。GoogleのGeminiは12月にディープリサーチをリリースし、それは彼らの最高のAIツールでした。というのもGoogleは少し後れを取っているからです。
そして2月初めに、OpenAIは彼らのディープリサーチをリリースしました。これはGoogleのものよりもかなり優れていました。そしてたった15時間前、つまり文字通り昨日、Perplexityもディープリサーチ機能をリリースしました。これは現在、主要な3つのAIリサーチツールが全てディープリサーチ機能を持っているということを意味します。
しかし問題は、OpenAIは月額200ドルを請求しており、現在OpenAIが最高のものを持っているということです。しかしこの動画では、DeepSeek-1を使って、1ドル未満で独自のディープリサーチツールを構築する方法をお見せします。基本的にAPIコストだけをカバーすれば良いのです。そしてそれを実際のサイズの製品に転換し、月7,000ドル以上まで拡大できる方法をお見せします。
これから説明する機会は、本質的にどのニッチでも機能します。スタートアップのアイデア自体はとてもシンプルです。特定のニッチ向けに特化したディープリサーチツールを構築するのです。それが医師などの医療専門家であれ、弁護士やパラリーガル、銀行家や金融業者であれ、調査を必要とするどのニッチでも、特化したディープリサーチツールを構築し、月額10ドルほどを請求して、月数千ドルの収益まで拡大することができます。
この動画では、このディープリサーチのトレンドを活用し、月数千ドルを稼ぐ独自のAI SaaSを構築するために必要な全てのステップを、順を追ってお見せします。AIに真剣に取り組み、今後このような動画をもっと見たい方は、ぜひチャンネル登録をお願いします。完全に無料で、2秒しかかかりません。
まず最初に必要なのは、Cursorをインストールすることです。cursor.comにアクセスし、ダウンロードをクリックしてください。Cursorの素晴らしい点は、無料で始められることです。上級プランの2週間トライアルも含む、かなり充実した無料プランがあります。しかし、本気でスタートアップを作りたい場合は、月額20ドルのプランをお勧めします。
Cursorをインストールすると、フォルダが開いていない状態でこのように表示されるはずです。プロジェクトを開くをクリックし、フォルダを選択します。空のフォルダを作成し、「code」と名付けて開きましょう。
コマンドLまたはコントロールLを押すようにしてください。デフォルトではファイルが左側にあり、チャットが右側にあります。これを見てパニックにならないでください。完全に正常で、全て同じように機能します。私はカメラがチャットを邪魔しないように、左側に配置することを好んでいます。
これがコンポーザーです。これはCursorのメイン機能で、ここでアプリを構築するためにタイプしていきます。ご覧のように、通常モードとエージェントモードの2つのメインモードがあります。エージェントモードを使用したいと思います。なぜなら、後ほどご覧いただけるように、より多くのことができるからです。
これは恐らく最も重要な部分で、適切なAIモデルを選択することです。まず上部の設定をクリックし、Cursor設定をクリックして、モデルをクリックします。ここでどのAIモデルを使用するかを選択できます。
確実にClaude 3.5 Sonnet 2024-10-22を選びたいと思います。これはCursorが中心に据えているAIモデルで、多くの機能がこの特定のモデルで最もよく機能します。そしてもちろんDeepSeek-1も必要です。Geminiを使いたい場合は、これら2つとO3 miniを有効にすることができます。
それを行ったら、ここで選択することを確認してください。これは同じモデルではありません。後ろに2024-10-22が付いている必要があります。これは古いバージョンです。代わりにこちらを使用してください。
コンポーザー内では、平易な英語でタイプするだけで、アプリを構築してくれます。そして正直に言って、私は経験から話しています。なぜなら、それが私がVectalを構築した方法だからです。Vectalは現在月に約7,000ドルを稼いでいる私のAIスタートアップですが、CursorにただCursorに英語でタイプして話しかけ、Cursorにコードを書かせただけで構築しました。
私は以前SaaSを作ったことがなく、確かに天才的なプログラマーでもありませんでしたが、アイデアがあり、それを実現したかったので、これらのAIツールを使って実際に実現させました。そして、それが私がこの動画でお見せしようとしていることです。アイデアを取り上げ、それを完全な製品に構築し、人々が購読してお金を支払ってくれる公開製品にする方法です。
さあ、このタスクに取り掛かりましょう。Cursorでディープリサーチツールを構築します。これはかなり大きなタスクなので、Vealに分解してもらいましょう。「ディープリサーチ構築タスクを5つの小さなステップに分解してください」
最初の頃、完全な初心者だった3、4ヶ月前には、どのテックスタックを使用すべきかさえ分かりませんでした。Python、Next.js、FastAPIを使うべきかなど、分かりませんでした。そこで私は、ClaudeとCursorを使ってVectalを構築しました。それは今や私が毎日使用している、大量の時間を節約してくれるAIツールです。
まず、テックスタックを選択する必要があります。「フロント、データベース、API構造を考慮し、React、Next.js、潜在的なバックエンドオプションを検討してください」と言ってみましょう。
そこで私は、DeepSeek-1を有効にしてこう尋ねてみます：「どのテックスタックをお勧めしますか？投資家向けの特化したディープリサーチ機能を構築したいだけです」これが私が選ぶニッチです。そして続けて「フロントエンドにシンプルなチャットボットと、バックエンドに最小限のAIロジックが必要です」と付け加えます。
つまり、アプリのアイデアを説明し、Vectalが何を推奨するか見てみましょう。DeepSeekモードなので、DeepSeekは私のプロンプトについて推論を始め、非常に関連性が高く特化した回答を提供してくれるはずです。
これは興味深いですね。Vercelを推奨しています。Vercelは基本的にフロントエンドとバックエンドの両方を担当します。これは私にVercel AI SDKのことを思い出させました。「Vercel AI SDKとは何ですか？簡単な言葉で説明してください」
これがこのような動画を見る価値です。私が何時間もウェブで探し回って見つけなければならなかった、このような小さなヒントとショートカットを得ることができます。
Vercel AI SDKは、AIツールに接続できるツールキットです。GoogleでVercel AI SDKと入力すると、最初のリンクがまさにそれです。
下にスクロールすると、あらゆる種類の異なるモデルをサポートしていることが分かります。OpenAI、Azure、Anthropic、Perplexity、Groq、本当に多くのモデルをサポートしています。
私たちの独自のディープリサーチを構築するために、DeepSeekを使用したいと思います。しかし実はプロのヒントとして、もしデータを中国に送りたくない場合は、Together AIを使用することをお勧めします。ここには本当に多くの異なるモデルがあります。DeepSeek V3やDeepSeek-1も提供しています。
これはヨーロッパとアメリカでホストされているAIサービスクラウドサービスなので、データはCCPに行くことはありません。これは他の方法では学べないもう一つのプロのヒントです。
基本的に、SDKを見てみましょう。Perplexityは、スタートアップやSaaSを構築する際に間違いなくお勧めできるもう一つの素晴らしい機能です。検索を可能にしてくれるのです。Perplexity、Cursor、Vectal、これが本当に必要な全てです。
フロントエンドでNext.jsを使用することが既に分かっているので、Cursorに始めてもらいましょう。「シンプルなNext.jsプロジェクトを作成し、デフォルトの設定とオプションを選択してください。クリーンでミニマルなAIリサーチツールを構築しています」と入力します。
エンターを押して、エージェントモードであることを覚えておいてください。エージェントは行動を起こすことができます。このようなコマンドを実行できるのです。npx create latestを実行し、プロジェクトの作成を開始します。
インストール中にYを押す必要があります。実際に自分で行う必要があります。インストール中に、TypeScriptを使用しますか？などの質問に対してはい/いいえを選択する必要があります。私はYesを選択します。
ESLintもYes、srcディレクトリもYes、appルーターもYes、いいえ、インポートエイリアスのカスタマイズはNo。そして次に進みます。
Next.jsプロジェクトを作成しています。その間に、Perplexityのリサーチを見てみましょう。Vercelは、JavaScriptとTypeScriptを使用してアプリケーションを構築することを非常に簡単にするツールキットだと説明しています。これは私たちが始めるのに理想的な状況だと思います。
正直なところ、私はこれまでに使用したことがありません。ですので、私がリアルタイムで学んでいく様子を見ていただけます。Perplexity、Veal、Cursorを使って、これまでに行ったことのないことをどのように行うのかを見ていただけます。Vercel SDKを使用したことはなく、ディープリサーチツールを構築したこともありません。
実際、私はVectalに追加したいと思っています。現在、私たちはO3 miniとDeepSeek-1を持っていますが、間もなくこれら2つよりもはるかに強力な機能のバージョンが登場する予定です。これはディープリサーチのバージョンを持つことになります。
さて、Cursorで何が起こったか見てみましょう。基本的に、Cursorエージェントはターミナルを使用できます。これは大きな超能力です。多くの初心者の方々は、ターミナルの使い方を知りません。私も確かに知りませんでした。Cursorエージェントがそれを処理してくれます。
右側のコードフォルダには、プロジェクトの構造が表示されています。srcフォルダをクリックすると、ページやグローバル、レイアウトなどのメインファイルが表示されます。
とりあえず、現時点では特に何もないかもしれません。実際に試してみることができます。「フロントエンドを起動して、どのように見えるか確認してください」と言ってみましょう。実行できるかどうか分かりませんが、試してみましょう。
開発サーバーを起動します。npm run devコマンドを実行しますが、繰り返しますが、そのコマンドを知る必要はありません。
ターミナルで実行されるので、実際にローカルホスト3000をクリックすると、Next.jsアプリが表示されます。
このファイルを編集する必要があることは明らかです。Cursorに移動し、実際に「パネルにターミナルを移動」をクリックします。ターミナルはあるべき場所である下部に移動します。
これが現在のアプリの見た目です。デフォルトのものです。実際にすでに始めることができます。トピックを切り替える際のグッドプラクティスは、新しいコンポーザーを作成することです。ここでコンポーザーの履歴を確認できるので、必要に応じて前に戻ることも簡単です。
しかし、今は別のことをしたいので、新しいコンポーザーを作成し、アップデートします。そしてファイルにタグを付けます。これは非常に重要です。コードの書き方を知らなくても、各ファイルが何をするのかについて良い考えを持つべきです。
Next.jsの構文は確かに私も知りませんが、Global.cssはスタイリング、layoutはアプリのレイアウト、pageは実際のページの見た目を示しています。これは少なくとも、各ファイルが何をするのかを理解する必要がある最低限のことです。コードを理解する必要はありませんが、ファイル構造を理解する必要があります。
そして、常にCursorに思い出させることができます。「page.tsxを更新して、非常にクリーンなAIリサーチツールを作成してください。ChatGPTやPerplexityのようなものですが、さらにミニマリストにして、投資家に訴求することが目標です」と入力します。
調理させましょう。このファイルを開いて、コードを書きます。その間に、Vectalに戻って、このSDKについて、これが良いかどうかを議論しましょう。
Perplexityの検索結果をここにコピーして、Vectalに貼り付けて、「これは私たちが必要としているものに役立ちますか？より速く構築するためにVercel SDKの使用を検討しています」と尋ねてみましょう。
Vercel AI SDKは、私たちが必要としているものに完璧であるようです。その場合、タスクを適切に更新するようにVectalに伝えましょう。何をするのか分かりませんが、見てみましょう。
Cursorにいくつかの変更があります。npmの開発サーバーの美しさは、変更をリアルタイムで確認できることです。ローカルホストに移動すると、これが現在の見た目です。たった1つのプロンプトで、92行のコードを書き、88行のコードを削除し、このようなアプリになりました。
明らかにこれを受け入れます。もちろん、後で変更を読むべきでしょう。盲目的に受け入れるのではなく。しかし、開始時点ではリスクは小さいです。アプリには何もないからです。
このVercel SDKをどのように実装するかを理解する必要があります。Perplexityに戻って、「Next.jsフロントエンドアプリにVercel SDKをどのように実装しますか？Together AI APIを使用して研究を行うAIエージェントのチームを構築したいのです」と尋ねてみましょう。
基本的に、これらのプロバイダーの中から任意のものを選択できますが、私はDeepSeek-1を使用したいと思います。明らかにOpenAIやClaudeはDeepSeek-1をホストしていないので、それを提供するものを使用する必要があります。
Together AIをクリックすると、200以上のオープンソースモデルをサポートしていることが分かります。インストール方法も実際にここにあります。
正直なところ、これは私がすべきだったことです。Perplexityを使う必要はありませんでした。ほとんどの場合、ドキュメントで時間を節約できます。スキップしたくなる誘惑がありますが、そうすべきではありません。
全てをコピーする必要はないかもしれません。画像モデルは必要ありません。ここまでにしておきましょう。Cursorに戻ってコンポーザーに貼り付け、「AIロジックを処理する新しいファイルを実装してください。AIエージェントのチームが必要です」と言います。
今、ディープリサーチのロジックを説明する必要があります。研究を行うAIエージェントのチームが必要ですが、まず、必要な全てを処理するシンプルなファイル構造を設計してください。最も重要なのは、Vercel SDKを使用してTogether AI APIをインポートすることです。シニア開発者のように深呼吸して進めてください。
これが現在のアプリの見た目です。明らかに問題は、機能がないことです。「テスト」と入力しても、AIレスポンスで応答しません。機能を与える必要があります。
AIを得るために、APIキーが必要です。ドキュメントに従って、もしドキュメントが混乱するなら、ドキュメントは初心者向けに書かれているので混乱するべきではありません。多くの初心者はドキュメントをスキップしたくなります。プログラマー向けだと思うからですが、実際にはドキュメントは何をすべきかを明確に示しています。
初心者であればあるほど、ドキュメントを使用すべきです。しかし、それでも混乱する場合は、サイト全体をコピーして、VectalまたはCursorに貼り付けて説明してもらうことができます。
「Cursorで独自のディープリサーチツールを構築する」という大きなタスクがあります。そしてテックスタックを選択しました。ファイル構造を設定する必要があります。「テックスタックを選択し、Vectalはすでに認識しています」と言います。これは問題が完了したことを意味し、タスクを完了としてマークします。
次に、「最小限のファイル構造の設計を手伝ってください」。O3 miniを使用します。これが私がVealを使用する理由です。世界で最高の3つのAIモデルを切り替えることができるからです。現在持っているものを説明しましょう。グローバル、ページ、新しいファイルを作成しましたか？まだ構築中です。
package.json、chat.ts...いくつかのファイルがあります。Services.tsもあります。「ディープリサーチツールを作成するための最小限のファイル構造を設計するのを手伝ってください。現在はデフォルトのNext.jsプロジェクトだけを持っています」と言います。そうすれば、それが何を意味するか理解するでしょう。
エラーがありますが、これは予想されることです。チャットを実装しようとしていますが...index.tsが一度に多くのことを行おうとしています。すでに分かります。そこで、そのすべてを行う代わりに、プロンプトを変更しましょう。
これは非常に一般的です。最初の試行で成功することは実際にはまれです。シンプルなものなら可能かもしれませんが、Cursor内でプロンプトを変更して戻ることは非常に一般的です。
現在、4つのファイルを一度に変更しようとしています。これは非常にリスクが高く、何かが間違う可能性が非常に高いです。代わりに、「AIロジックを処理する新しいファイルを実装する必要がありますか？」と尋ねましょう。
深呼吸して、シニア開発者のように答えてください。まだコードを書かないでください。ただ答えてください。これは非常に一般的です。時には、コードを書く前に答えを得て、明確になってからコードを書く方が良い場合があります。
Cursorが提案したのは、app、page、layout...APIチャットルート、チャットルートのメインAPIエンドポイント、そしてlib、AIconfig、agents...これは再び複雑すぎます。必要なのは、クライアントから安全に離れた場所でAIロジックを処理する1つか2つのファイルだけです。そして、それらのAPIエンドポイントをpage.tsxから呼び出す必要があります。
これが、AIが言うことを盲目的に受け入れるべきではない理由です。何かが複雑すぎると感じる場合、通常はそうです。もちろん、経験が増えれば増えるほど、より良くガイドできますが、開始時点では何が真実かを知るのは難しいです。
しかし、これが複数のAIツールを持つ理由です。Perplexity、Cursor、Vectalを使用して、ダブルチェックするか、異なるモデルに切り替えて、DeepSeekが何を提案するか見ることができます。
シンプルな構造を見てみましょう。page、index、search...はい、これはもっと良く見えます。研究フォーム、研究結果...これは良さそうです。Cursorが提案するものを見てみましょう。
「その通りです」と言うのは面白いですね。これらのAIモデルは、わずかな反論に対してもまったく賛成に回ります。これがAIで構築する際の危険です。AIはあなたが望むことを行います。たとえあなたが正しい道にいても、完全に間違った道にいても、指示に従うだけです。
app、API、chat...これは新しいAPIフォルダが必要だということを意味します。「良いでしょう、では必要なファイルとフォルダを作成してください」と言います。
エージェントはターミナルを使用できるので、ファイルを作成できますが、時々承認が必要です。ファイルを削除したり更新したり、承認なしにコマンドを実行したりすることはできません。
これを許可しましょう。新しいディレクトリAPIとchatを作成し、このディレクトリ内に新しいファイルを作成しようとしています。できました。新しいファイルを作成しました。38行ほどのコードですね。
AI SDK、Together AI...それをインストールする必要がありますね。ドキュメントに戻りましょう。pnpm...このコマンドは正しそうです。実際にいいえ、oh、npm...はい、npm installですね。実際には、このコマンドです。
これが正しいコマンドなので、修正しましょう。これがドキュメントを使用すべき理由です。修正して、実行させましょう。
AIからのストリーミングレスポンス...それが必要なのか、それともボーナスなのか...言語モデルを見てみましょう。AIからのストリーミングレスポンス...うーん、ストリーミングレスポンスが必要なのかどうか見てみましょう。AIからのテキスト生成...確認しましょう。
ストリーミングテキストレスポンス...本当にここにありますか？ストリーミングテキストレスポンス...ありますが、別のインストールとしてではありません。これはメインのものかもしれません。メインのSDKかもしれません。いいえ、しかし特化しているように見えます。
繰り返しますが、これを以前に構築したことがないので、ご覧のように...Vercel AI SDKでのストリーミング...そうですね、これを実行する必要があります。Cursorの言うことを聞いてみましょう。間違っているかもしれませんし、正しいかもしれません。テストするのが最善の方法ですが、本当に...
AI SDK...npm install ai...はい、これを実行する必要があります。ストリーミングテキストレスポンス...うーん、これは使用していないと思います...始めましょう。ストリーミングを見てみましょう。
ストリーミングにはここに何が必要でしょうか？ああ、stream-textですね。
とにかく、これをコピーします。誤ったものを使用しているからです。エラーにすでに気付いていましたが、気付いていなかったとしましょう。これをコピーして、「公式ドキュメントに従っていることを確認してください」と言います。
その間に、Together AI APIキーを取得するために戻る必要があります。Together AI versus Vercel SDKと入力します。Together AIに戻って、実際にAPIキーを取得する必要があります。
Together AIは基本的に、説明にあるように、オープンソースモデルをホストしています。2ドルほどをチャージして、使用した分だけ支払えば良いのです。ディープリサーチを月に数回使用する場合、1ドル未満のコストで済みます。これは素晴らしいことです。OpenAIは200ドルを請求するのですから。
ログインする必要があります。私はすでにアカウントを持っていますが、アカウントを持っていない場合は、Gmailなどを使用して非常に簡単に作成できます。
アカウントに入ったら、右上をクリックし、左側のAPIキーをクリックします。ここで新しいAPIキーを作成する必要があります。新しいキーを作成し、「deep-research」と名付けて、キーを作成します。そしてそれをコピーします。これを保存する必要があります。
.envファイルはありますか？...これを素早く受け入れましょう。多分ないでしょう。「新しい.envファイルを作成し、route.tsxがそれを使用することを確認してください。Together AI APIキーをそこに置きます」と言います。
安全のためにAPIキーを環境ファイルに置くのは良い習慣です。ここでいくつかの変更があります。基本的に何かをインポートしようとしています。とりあえず受け入れましょう。.envファイルに移動します。
node環境...これはデフォルトだと思います。それは必要ありませんが、基本的にここにAPIキーを貼り付ける必要があります。コントロールVを押して保存します。繰り返しますが、APIキーはパスワードとして扱われるべきです。この動画をアップロードする前に自分のものを削除します。APIキーは誰とも共有しないでください。
route.tsxがこのAPIキーを使用するように更新する必要がありますね。使用しない場合はエラーを投げます。しかし、まだエラーがあります。エラーがある場合、実際にそれを強調表示してコンポーザーで修正をクリックすると、Cursorは最善を尽くして修正してくれます。
このエラーが何なのか見てみましょう。Together AI SDKに従ってフォーマットする必要があります。良いヒントを差し上げましょう。頻繁に使用する必要のあるドキュメントがある場合、実際にこれには「docs」機能があります。
私たちは本当にVercelからTogether AI SDKが必要です。これをコピーして、今回は全てをコピーしましょう。「docs」を追加して、「新しいdocsを追加」します。これはちなみにCursorのネイティブ機能です。
実際にはURLが必要ですので、URLを貼り付けて、「TO_GA_AI_VEREL_SDK_CONFIG」と名付けましょう。これで簡単にタグ付けできるようになりました。
しかし、まず何が起こっているのか確認する必要があります。フォーマットエラーを修正しようとしています。「公式ドキュメントに従っていることを確認してください」と言って、docsをタグ付けし、「Together AI versus Vercel SDK」と入力してエンターを押します。
これが良いかどうか見てみましょう。しかし、ストリーミングレスポンスについては、別のものが必要です。AI SDKのドキュメントに戻って、ストリーミングのセクションに移動しましょう。これをコピーする、いや、URLが必要ですね。
再度「docs」を使用して、新しいdocsを作成し、URLを貼り付けてエンターを押します。これがVercelストリーミングの設定です。ちなみに、Cursorの設定でdocsを確認できます。インデックスが作成されたら更新できます。
これは貴重なヒントです。とにかく、エラーが修正されたかどうか見てみましょう。実際に、前に言ったように、プロンプトを編集します。「公式ドキュメントとストリーミングドキュメントの両方に従ってください」と言って、「Vercelストリーミング」とタグ付けします。
これで両方のドキュメントページを一度に送信しているので、route.tsxのエラーが解決されることを期待しましょう。公式ドキュメントを見て、routeを更新しましょう。
まだストリーミングレスポンスを使用しようとしています。どこにも言及されていないのに...このような場合、ドキュメントを使用していない場合、私はそれをコピーしてフォルダを作成することを好みます。
「docs」というフォルダを作成し、その中に新しいファイル「streaming.md」を作成して、そこに貼り付けます。実際にコメントを追加して「トークンストリーミングのための公式Vercel SDKドキュメント」と書きます。
チャットを停止しましょう。完全に混乱しています。これは時々起こることです。コンポーザーをリセットする方が良い場合があります。コンポーザーをリセットして、落ち着いていることを確認する必要があります。
まず、Cursorには2つのモード、チャットとコンポーザーがあるので、チャットに切り替えて、ストリーミングファイルを適切なマークダウンでフォーマットします。「何も変更せず、フォーマットだけを更新してください」と言います。
実際に動作することを確認する必要があります。APIキーを入力し、動作することを確認したいのです。選択しようとしているモデルが完全に間違っています。
これは狂っています。コンポーザーに入れてみましょう。なぜこのように動作しているのか分かりませんが、これがCursorで構築する現実です。完璧ではありませんが、試す意欲を持つ必要があります。
ただ、これを更新して、将来AIモデルから呼び出される際に読みやすくなるように、きれいにフォーマットしたかっただけです。
再び新しいコンポーザーを作成します。古いコンテキストが私がやろうとしていることに影響を与えないようにしたいからです。
とにかく、route.tsxにエラーがありますね。これをコピーして、「公式ドキュメントに従っていることを確認してください」と言います。
Cursorのdocs機能は、私の経験では最高ではありません。具体的にファイルを作成する方が好みで、これはより信頼性が高いです。
ストリーミングについてはすでに行いました。Together AIについても同様に行う必要があります。「Together AI」を再度確認し、全てをコピーします。これは私の経験では、より信頼性が高くなります。
再び間違っているかもしれませんが、新しいファイル「together-ai.md」を作成し、ここに貼り付けます。前のコンポーザーに戻って、「Together AIにも同じフォーマットを実装してください」と言います。
これで、これをコピー＆ペーストする必要はなくなりました。docsフォルダからファイルを呼び出すことができ、これはより信頼性が高いです。
ファイルをフォーマットしようとしています。100行以上あるので、基本的にCursorの動作方法として、まず新しいコードを生成し、その後適用します。そのため、長いファイルの場合は時間がかかります。
これを受け入れましょう。route.tsxはまだ狂っていますね。新しいコンポーザーを作成して、「route.tsxのエラーを修正し、公式ドキュメントに従ってください」と言います。ストリーミングとTogether AIの両方をタグ付けして、それを行わせましょう。
その間に、正しいモデル名を見つける必要があります。Together AIに移動し、docsの人気モデルを確認します。DeepSeek-1...プレイグラウンドで開いて、そこからAPIをクリックします。
これがモデル名で、再びコピー＆ペーストできます。TypeScriptを使用しているので、TypeScriptをクリックします。これらのパラメータは全て有効というわけではありません。モデル名を選択するだけで十分です。
モデル名を正確にコピーして、ここで置き換えます。まだ...はい、これはひどいです。これは非常に危険な兆候です。現在行っていることには意味がありません。ここで止めましょう。
まず、モデルを保存します。これは確実に分かっていることだからです。次に、プロンプトの問題が何なのか確認する必要があります。
プロンプトを奇妙な方法で割り当てようとしています。実際に推奨事項に戻って、プロンプトの扱い方を確認しましょう。プロンプト...
プロンプトの扱い方を繰り返しましょう。これ全体をコピー＆ペーストしましょう。Vercel AI SDKの美しさは、全てのプロバイダーで動作することです。Together AIからOpenAIやAnthropicに切り替えたい場合でも、非常に簡単に行えます。
ここで新しいファイルを作成しましょう。プロンプトですね。新規ファイルprompt.MDを作成します。フォーマットコンポーザーを開いて、これは非常に長いですね。同じMarkdownフォーマットに従うようにプロンプトを更新してみましょう。内容は変更せず、何も書き直さずに、きれいにフォーマットするだけです。
現在、エラー修正が最大の問題です。アプリをリロードすることはできますが、このエラーではメッセージを送信できません。何が起こるか見てみましょう。考え中という表示が出て、そのまま消えてしまいます。これを解決する必要があります。そのためには、文字列が割り当てられないのに割り当てようとしている理由を突き止める必要があります。
本質的な問題は、Cursorがオフラインで動作していることです。素晴らしい新モデルのClaude 3.5 Sonnetを使用していますが、リアルタイムのウェブアクセスができません。Cursorにはウェブ機能がありますが、ウェブ検索に最適なのはPerplexityやOpenAI Deep Research（これは非常に高価です）、あるいは理想的にはここで構築しようとしているDeep Researchです。
ロジックの設計を始めるためには、まずモデルから成功したレスポンスを得る必要があります。prompt.MDを見てみましょう。ファイル全体が更新されたようですね。46個の編集があります。受け入れて、長さが大体同じかクイックチェックしましょう。良さそうです。
次はroute.DSです。プロンプトの公式ドキュメントに従うようにroute.DSを確認しましょう。このモデルに関してはprompts.MDを全く使用しません。temperatureやMax tokensは不要です。Together AIプロバイダーを見てみましょう。Cursorの中にはありますが、ここではモデルに対して見やすく表示されています。
ツールストリーミングはDeepSeek-1では利用できませんね。これでは解決できません。上で貼り付けた公式ドキュメントに厳密に従ってR.Sを書き直しましょう。必要なモデルを正確に表示しているのは素晴らしいですが、プロンプトが正しく渡されていないようです。
これが私の初めてのVercel SDK使用なので、見て分かる通り初めてです。でも、これこそが重要なんです。数時間かけて準備したとしても、それは本物ではないと思います。関連性もないでしょう。なぜプロンプトがこのように挿入されているのか、何かが完全に間違っています。
分かりませんが、何かを誤って生成しているようです。とにかく、これを正確にコピーして、これは別の機能だと言います。コードの特定の部分をハイライトするとき、これはcommand+Kです。公式ドキュメントに従って書き直すように指示しましょう。
受け入れて、stream textを使います。importする必要がありますね。Tabを押して、stream textがレスポンスを返すという問題があります。エラーは解消されましたか？まだエラーはありますね。
アプリに戻ってリフレッシュして、レスポンスが得られるか確認しましょう。page.TSXが適切にrouteを使用して呼び出しているか確認してください。現在メッセージを送信しても何も起こりません。Cursorが何が起きているか分かるかもしれません。
page.TSXはrootAPIチャットをインポートしています。それが機能するか見てみましょう。何も起こらないと説明しました。リロードをテストしてみましょう。メッセージバブルが消えて、問題は依然として存在します。
デバッグログを追加しましょう。pageとRouteにいくつかのデバッグログステートメントを追加して、何が起きているか分かるようにしましょう。また、AIレスポンスのメッセージバブルがこんなに早く消えないようにする必要があります。現在は消えてしまいます。
AIツールが助けてくれないと感じている人が多い理由は、必要なコンテキストを提供していないからです。関連するコンテキストを与えれば、助けてくれるはずです。
よし、rootに7つのデバッグログステートメントを追加しました。これは良いですね。そしてpage.TSXにも追加しています。
これでファイル構造が完成し、Vectalでタスクを完了としてマークできます。ちなみにVectalは現在無料です。Vect.aiに行けば、Claude mini、DeepSeek-1の制限付きアクセスで無料で使えます。世界中のAIツールで、これら3つの最高の無料モデルへの制限付きアクセスを提供できるものはありません。
Vectを試してみてください。世界最高のAIパワードタスクマネージャーです。多くの時間を節約できます。作成した新しいタスクは、他のアクティブなタスクやユーザーコンテキストに基づいて自動的にリストに振り分けられます。チャットエージェントと協力して、新しいタスクを作成したり、タスクを移動したりできます。Vectを試してみてください。失望することはないと約束します。
Cursorが何を用意したか見てみましょう。たくさんのデバッグステートメントが追加されていますね。受け入れましょう。一部は、このターミナルに表示されます。リフレッシュして、メッセージを送信してみましょう。「テスト」と入力して、何が起こるか見てみましょう。
考え中と表示され、チャットエラーが発生しました。onSubmitを見てみましょう。人間の研究者に何を探すべきか伝えるように書かれた1段落の検索クエリ、これが与えられる全てのコンテキストです。他には何もせず、プロジェクトの技術的詳細を全て含む1段落だけを出力します。
これで非常に最適化された検索クエリが作成され、Perplexityを使ってさらに深く掘り下げることができます。Perplexityに貼り付けて、Deep Researchを使うこともできますが、まずこれを動作させる必要があります。これが動作しなければ、独自のDeep Researchの設計を始めることができません。
Perplexityでのディープリサーチの仕組みは、入力を分析して考え始め、その考えに基づいてウェブ検索を行うというものです。これがディープリサーチの力であり、違いです。検索の間に推論を行い、私たちもそのように設計していきます。
素晴らしいですね。現在、ChatGPTが最高だと思いますが、彼らは何をしているのか隠しています。Perplexityはより明確に何をしているのか示しているので、それが好きです。もちろん、OpenAIは有名なクローズドソースですね。OpenAIという名前の会社からすると皮肉ですが、まあそういうものです。
「でもデイビッド、どうやってこのようなプロンプトを書くことを知ったの？」と疑問に思うかもしれません。Perplexityを使ってこのような詳細な段落を得て、それをCursorに入れてこれらの問題を解決するなんて、どうやって知ったのかと。
正直なところ、知りませんでした。これはVectalを構築する数百時間の試行錯誤から学んだことです。確かに現在Vectalは月7,000ドル以上を稼いでいますが、最初からそうだったわけではありません。最近になって無料プランを追加しました。1週間ほど前のことです。今では2,000人近いユーザーがいますが、そこに到達するまでに4ヶ月かかりました。
しかし、幸運なことに、AIスタートアップを始めたい方は4ヶ月もかける必要はありません。アイデアの選択からCursorでのプロジェクト構築、フロントエンドの追加、Vectalのデプロイ、リリース、Stripe決済の追加、最新のアップデートとしての無料プランの追加まで、すべてのステップを文書化しているからです。
これらすべてはNew Societyのクラスルームでアクセス可能です。独自のAIスタートアップを構築したい場合、すべてを見ることができ、テンプレートやプリセットなども利用できます。実際にここにスタートアップのアイデアリストもあります。利用可能なドメインもあります。スタートアップ用に最適化された108のドメインが、すべてクラスルームで利用可能です。New Societyは動画の下にリンクがあります。興味のある方はぜひご覧ください。
さて、Deep Researchが完了したか確認してみましょう。完了したようですね。30の異なるソースを検討しました。これはOpenAIのDeep Researchが考慮する数よりも多いです。答えを見てみましょう。
下にスクロールすると、非常に詳細な回答ですが、不必要に長くはありません。OpenAIのDeep Researchは不必要に長いと感じますが、Perplexityはいいバランスを取っています。
これを貼り付けて、検索結果のTL;DRサマリーを求めましょう。ここで重要なのは、「ただし、しばしば危険な誤った手がかりが含まれているので注意してください」と付け加えることです。もしこれを含めないと、ランダムな内容に気を取られてしまう可能性があります。
その場合、深呼吸して、10倍のエンジニアのようにこの修正を実行しましょう。route.TSとPageをタグ付けします。コードの行数は少ないほうが良いです。
今、誤った生成をしているので、ここで止めましょう。「ここで止めて、問題点を明確に説明してください」と言います。その後、フォローアップのウェブ検索を行います。Deep Researchを行う必要はありません。通常のPerplexity検索を行いましょう。
ここでProサーチを使用します。ウェブを有効にして、インポートの問題について... 新しい1段落の検索クエリを作成しましょう。私たちが何をしていて、どんな問題に遭遇したのかを説明します。それ以外は何もしないでください。段落だけをください。
このようなループに入っているとき、そのまま実行させるのはほとんど良いアイデアではありません。多くのファイルを変更し始め、様々なものをインポートし始め、制御不能になります。一旦止めて、「一時停止して、問題点を説明してください」と言い、ウェブ検索を行って、Perplexityがウェブ上の実際の情報に基づいて何を言うか見て、それから現実に戻すのが良いでしょう。
リンターエラーがあってそれを1回チェックして修正するのは問題ありません。よくあることです。しかし、1つのエラーを修正すると別のエラーが発生するようなループに入った場合、それを止める必要があります。受け入れることはできません。
さて、ここまでで半分くらいですね。一旦止めて、このサーチクエリの結果を見てみましょう。Deep Researchを使わなかったので、かなり速かったです。これを貼り付けて、「検索結果のTL;DRを教えてください。問題点は何ですか？」と聞きましょう。
インポートに問題がありました。すべてはAIパッケージから直接来るべきで、インポートとエクスポートを追加する必要があります。実行しましょう。これは奇妙ですね。AIはNextJS 14からのstream textを使用していますが、私たちはNextJS 15を使用しています。
これが問題です。注意深く見ていた人なら、ここでのローンチの際にNextJS 15があったことを知っているはずです。これはプロンプトにありましたか？待ってください、それが問題かもしれません。見てください、これが注意を払う必要がある理由です。NextJS 15を使用しているので、これは完全に無効です。これらすべては重要ではありません。
見て分かる通り、またループに入っています。これが注意を払う必要がある理由です。AIは誤った方向に導くことがあります。NextJSパッケージ15を使用していて、14に関するウェブ検索を行いました。同じかもしれませんが、このように不注意にはなれません。コードをすべて理解していなくても、プロンプトが何を言っているのかに注意を払う必要があります。
ここでプロンプトを編集しようと思います。これらすべては完全に無関係というわけではありませんが、お分かりだと思います。送信して、元に戻しましょう。
まずroute.TSで動作させて、コンソールに出力するのが良いかもしれません。新しいコンポーザーを使って、「route.TSがページと通信できるようにするのに苦労しています。TSファイルでDeepSeek AIモデルを実装して、コンソールに出力するだけにして、動作するか確認してみましょうか？」と聞いてみましょう。
私はTypeScriptやNextJSに関して完全な初心者なので、これが可能かどうか分かりません。問題が見えてきました。「これは可能ですか？まだコードは書かないでください。答えだけください」と言います。性急になっていて、印象付けようとしているようです。
はい、簡単なテスト実装を作成できます。その場合、Together AIと注意深く従うようにしましょう。また、Together AIとproを使います。
Vercel SDKの基本的なドキュメントがあるはずですが、今、問題はrouteとページの間の接続にあるようです。しかし、その前に、単に動作させて成功したレスポンスを得る必要があります。
「Together AIに注意深く従い...」とし、AIパッケージから以下の2つのパッケージをインストールしましょう。これがデフォルトのものです。npmでAIをインストールします。素晴らしい！これは持っているはずですが、おかしいですか？AI is Together AI...おそらく正しくインストールされていませんでした。
では、route.TSを更新して、AIレスポンスをターミナルに出力するようにしましょう。超シンプルに従います。基本的なTogetherを使用してみましょう。routeを大幅に簡略化し、すべてをコンソールにログ出力します。
これをどうやって実行するのでしょうか？問題は、デバッグ用にDeepSeek-1は適していないことです。時間がかかりすぎます。より高速なモデルに切り替えましょう。DeepSeek V3を使用し、のちにR1を使用します。ただし、デバッグには30秒や1分待つことはできません。
ここではDeepSeek V3を使用しましょう。ストリーミングは必要ありません。新しいコンポーザーを使って、「route.pageがAI完了のためにroute.TSXを正しく呼び出せることを確認し、route.TSXはTogetherAI APIから返されたらメッセージを完全に返すようにしてください。まだトークンストリーミングは不要です」と指示します。
複数のターミナルが開いているのが問題です。これを閉じて、これを再起動する必要があります。npm devで再起動します。コマンドが分からない場合でも、ターミナルと入力すればCursorは簡単に使用できます。
いくつかの変更を提案していますが、DeepSeek V3を使用していることを確認したいだけです。それは正しいです。page.TSXにいくつかの変更を加えています。動作するか見てみましょう。リロードして「test」と入力し、送信します。考え中...
これは進展です。前回のようにクラッシュしませんでした。エラーが出ました：「Fail to parse stream string」。しかしこれは良い兆候です。Cursorに貼り付けて、ターミナルを開きます。レスポンスが得られたようです。チャットレスポンスが来ました。素晴らしい！
これをコンポーザーに入れて、「APIが動作しているようです。しかし、まだエラーが出ています。エラーを説明して修正してください」と言います。これはフロントエンドの問題のようです。Vercelはレスポンスがストリーミング形式であることを期待しています。
はい...ここで再び問題に巻き込まれるかもしれません。エラーが出ています。エラーが何かを説明し、人間の研究者に可能な限り多くのコンテキストを与えるように1段落の検索クエリを書いてもらいましょう。
ループに入る前に、この問題についてPerplexityで簡単な検索を行いましょう。全体をコピーしてここに貼り付けます。実際に推論を使おうと思いましたが、この場合は通常の検索モデルの方が良いかもしれません。
これは説明が難しいですが、正直なところ、私の直感はスタートアップを構築した数百時間から培われてきました。時には推論モデルの方が良いと分かることもありますが、この場合は通常のモデルの方が良いと思います。推論モデルは問題に巻き込まれる可能性があります。
これは別の問題です。NextJS 13以上を使用しているとありますが、どういう意味でしょうか？NextJS 15を使用していると保存...実際にこれを更新し続ける必要があります。新しいファイルを作成すべきです。
ここでcursor_rulesを作成し、そこにtextタグを作ります。右下で、プレーンテキストからマークダウンに切り替えます。このファイルで何が起こっているのかを説明する必要があります。NextJSを使用していることと、正確なバージョン15を記載する必要があります。
textタグ：NextJS 15。ロジックにはVercel AI SDKを使用し、AIプロバイダーとしてTogether AIを使用、モデルはDeepSeek V3です。
これは重要な情報です。cursor_rulesファイルは基本的にCursorとチャットするたびに呼び出されます。このテキストを含めなかったのは私のミスでした。ここにあるべきです。textタグは1つのことだけですが、「プロジェクト概要」など他のこともできます。現在はtextタグだけにしておきます。これが必要だからです。
毎回自分でチェックする必要がある場合は、おそらくcursor_rulesに入れるべきです。とにかく、これをコピーして、「問題は何かTL;DRを教えてください。私たちの問題に関連していますか？簡潔に答えてください」と言います。
generate textは使用されていないので、ビルド時にリンターエラーが出ますが、今は気にする必要はありません。アプリに移動しましょう。Advanced AI research assistant...「test」と入力してみましょう。
できました！これはDeepSeek V3です。R1を試してみましょう。リロードして「AIとは何ですか？」と入力します。まだ考え中です。thinkingトークンが表示されていないのかと思います。
今動き始めました。これがDeepSeek R1です。良いですね。これは強力な大規模モデルです。次にウェブ検索を実装する必要があります。これだけでも十分ですが、十分ではありません。
thinkタグが表示されているのが分かります。これが推論です。これはデザインしませんが、重要ではありません。これが推論の終わりです。これをDeep Researchにするには、ウェブ検索が必要です。現在、モデルはただのモデルだからです。
デバッグのために、これをコピーペーストして、V3に切り替えましょう。「開発のためには、高速なV3モデルを使用したいと思います」と書きます。これをここに残しておきましょう。
これは素晴らしい進展です。次にフッターとヘッダーを削除できます。新しいコンポーザーを使用します。これは全く異なるタスクなので、新しいコンポーザーを使います。「フッターとヘッダーを削除して、チャットエリアをメインにしてください」と指示します。
これがどのように見えるか確認しましょう。これから面白くなります。npm dev開発サーバーを実行しているので、変更はリアルタイムで反映されます。この側にいて、何も承認する必要がなく、ここに反映されます。
Cursorが変更を適用しています。生成中で、生成が完了したらここで見ることができます。できました。削除されました。問題は、入力が下部にあるべきということです。
次にそれを言いましょう。受け入れて、「チャット入力テキストフィールドが常に下部に表示され、メッセージ履歴のみがスクロール可能な領域になるようにしてください」と指示します。現在、ページ全体がスクロール可能なのが問題です。これだけをスクロール可能にし、これは常に下部に追加されるようにしたいです。
これは良いチャットボットではありません。うまくいくか見てみましょう。また、このテキストは左側にあっても良いですね。いいえ、これでは不十分です。ページ全体をスクロール可能にしたくありません。
実際にはレイアウトに問題があるのかもしれません。レイアウトもタグ付けしましょう。「チャットメッセージ履歴とユーザー入力フィールドは全て表示され、常に下部に固定されているべきです。スクロール可能な領域には入れません」。
これには、scroll areaなどのフロントエンド用語を知っていると役立ちますが、正直なところ、普通の英語で説明できれば十分です。欲しいものを説明できれば良いはずです。
今、レイアウトを調整しています。それが問題かもしれません。おっと、スクロールできなくなりました。それは良いですが、入力フィールドが見えません。おそらく、ページ全体を再構築しているのでしょう。
レイアウトが必要ですね。ページも...あ、できました！入力フィールドが常にあり、メッセージ履歴があります。もしかしたら...分かりません。research assistantは正直左側にあっても良いですし、これを削除してもいいかもしれません。
とにかく受け入れましょう。page.TSXで、AI research assistantを「Deep Research」に変更します。スクロールエリアがここにあり、メッセージがあります。良いですね、かなり solid です。UIにこだわる必要はないと思います。約束のある見た目になっていることを確認したいだけです。
ルートモデルV3を使用していますね。次にロジックの設計を始める必要があります。ロジックを説明して、cursor_rulesで説明した方が良いかもしれません。「Deep Researchロジック」と書きましょう。
ユーザーが研究して欲しい質問をします。クイックAIエージェントを起動して、最適化された検索クエリを作成します。DeepSeek V3を使用するディープエージェントがフォーマットを行います。
Deep Researchについて考えてみましょう。コアロジックについては、AIに尋ねることもできますが、自分が何を構築したいのか知っている方が良いです。これは理解しなければならないことですが、AIは超創造的で革新的なソリューションが苦手です。
Deep Researchには、ユーザーがクエリを送信する必要があります。直接検索エンジンに行くことができますが...いいえ、DeepSeek R1に行く必要があります。そこでフォーマットを行い...はい、DeepSeekを使用して...何でもいいです。特定の使用方法は後で決めましょう。
オープン検索クエリで、次にTavily APIを使用して実際にウェブを検索します。結果はDeepSeekに戻り、AIエージェントは情報量、ユーザープロンプトとの関連性、次に何を検索する必要があるかを検討します。
それからTavily APIを再度呼び出します。ちなみに、Tavily APIを知らない場合は、チャットやVectalが完璧です。「実際のウェブ検索に使用できるAPIは何がありますか？LMM自体にはウェブ検索機能がないので」と尋ねることができます。
Microsoft Azure Bing API、Google Custom Search、Serp API、Tavilyなどのオプションがあります。これらのAPIについて知らない場合は、Vectalに尋ねてください。Claude miniやDeepSeek-1を無料で使用できます。もちろん使用量は制限されていますが、有料プランなら無制限です。
これが重要なポイントです。Vectalはあなたの全てのタスク、作業中の全てを把握しているので、コンテキストを繰り返す必要がありません。全ての情報を入力し、10分かけてVectalに全てを入力する人々は、みんな製品を気に入っています。
APIを再度使用し、最後にDeepSeekを呼び出して全てを要約し、ユーザーへの回答を書きます。これは単純な説明方法だと思います。
明らかにDeep Researchにはいくつかのループが必要になりますが、これを次のように言うことができます。これは研究ループであり、これら全てをループの中に入れます。
まず第1に、これはCursorの素晴らしい点ですが、Tabを押すだけで何が必要か分かってくれます。まず一番目にDeepSeekを使ってAIエージェントを起動し、tavil APIを呼び出します。そしてプロセスを繰り返します。プロセスをn回繰り返し、nは簡単に設定できます。
エージェントを起動します。最初に検索クエリを最適化するエージェントを起動し、次にリサーチループを開始します。APIを呼び出してウェブ検索を実行し、再度DeepSeekを呼び出して、エージェントに情報がどれだけ必要か、次に何を検索すべきか考えさせます。リサーチループが完了したら、DeepSeekを呼び出して全てを要約させます。
いいですね。これで、リサーチループができました。nの値を簡単に変更できるようになりました。新しいコンポーザーを作成して、route.tsxを更新してこれを実現させましょう。Cursorで示したDeepResearchのロジックに従って適切に更新します。
tavil APIキーが必要ですね。ログインして...私のGoogleアカウントの1つを使います。ログインしたので、新しいAPIキーを作成します。プラスをクリックして、DeepResearchと名付けます。1分あたり100リクエストに制限されていますが、私たちには十分です。
DeepResearchを作成し、これをコピーし、環境ファイルを開いて、TAVIL_API_KEYと貼り付けます。次にrootに戻る必要がありますが、その前にwebを開いてドキュメントのクイックスタートを見てみましょう。これがtavil APIですね。
これをdocsの新しいファイルtavil.mdにコピーして貼り付けます。そして適切なマークダウンでフォーマットするよう指示します。情報は変更せず、テキストも書き直さず、きれいにフォーマットするだけです。
前のコンポーザーに戻って、公式ドキュメントに従うように指示し、mdファイルをタグ付けして、APIキーも.envに追加したことを伝えます。
見ての通り、私のプロンプトは簡潔ですが、4つの異なるファイルをタグ付けしました。これでカーソルエージェントが魔法を働かせるはずです。t.jsをインストールする必要がありますが...あ、これは私のミスでした。Python実装をコピーしてしまいました。
このミスを見せられてよかったですね。TypeScriptかJavaScriptを使っているので、これをJavaScriptに変更する必要があります。ここで元に戻して、もう一度送信します。きれいに見せて...これが問題です。プロンプトを変更すると、以前加えた変更が元に戻ってしまうので注意が必要です。
これはCursorが改善できる点かもしれませんが、使用しているテキストタグを意識して、正しい例をコピーする必要があります。ここに戻って、新しいコンポーザーを作成し、きれいにするために同じプロンプトをコピーします。これでJavaScriptに従うはずです。
まずパッケージをインストールする必要があります。importがないので実行する必要があります。AIが何をしているのかチェックするのは良いことです。全てを理解していなくても、頭を使わない人にはならないようにしましょう。できるだけ多くを理解するよう努めてください。
route.tsを更新します。ウェブ検索のループを作成し、AIエージェントにウェブ検索について考えさせ、ユーザーが言ったことを考慮して、再度ウェブ検索を呼び出します。主なポイントはここでロジックを構築することです。
どのニッチでもカスタマイズできます。今回は投資家向けを選びましたが、どのニッチをターゲットにするにしても、ロジックとプロンプトをカスタマイズすることで、そのニッチにより関連性の高いものにできます。
このビジネスチャンスを追求したい場合は、理解のあるニッチを選んでください。もし全てを自分で構築したくない場合は、デバッグなどの手間を省きたい場合は、New Societyにコードを提供する予定です。
教室のテンプレートとプリセットセクションには、私の動画のコードやプロンプト、自動化、AIエージェント、チェックリスト、テンプレートなど、全てのコードを提供しています。簡単にコピーできるようになっています。New Societyへのリンクは下に表示されます。
これは大きなリファクタリングですね。異なるファイルに分割した方がいいかもしれません。APIキーはこれでよさそうです。Cursorの適切な使い方をお見せしましょう。すべてを受け入れるのではなく、1つずつ確認していくべきです。
ailのインポートは正しいですね。少なくとも正しく見えます。クライアントの初期化も理にかなっています。環境キーが見つからない場合にエラーを投げるのも良いですね。
これは良くないですね。理由もなく私たちのモデルを削除しようとしています。却下して...コメント行は失われましたが、簡単に変更できます。
多くのロジックがあり、おそらく1つのファイルには多すぎます。150行は大したことないですが、明確さが失われ始めています。関心の分離が十分ではありません。
フロントエンドをリロードすると、動作しない可能性が高いですね。「サム・アルトマンとイーロン・マスクについてのニュースを探して」と入力してみましょう。エラーが出ました。
これらの変更を元に戻します。この変更は大きすぎます。120行の新規コード、19行の削除、そしていくつかの問題がありました。
クイックウェブ検索を追加することから始めて、そのウェブ検索の結果をDeepSeekエージェントに送り、後でループを追加します。一度に多くのことをしようとしていますが、簡潔に保ち、制御下に置く必要があります。
一歩ずつ進めていく必要があります。多くの方が同じ問題を抱えています。大きな目標を設定しても、それを段階に分解する方法が分からないのです。これがvectalの主な価値提案の1つです。大きな目標を記述し、それを段階に分解することができます。
APIの統合やCのコンポーネントがあり、次にロジックを設計する必要があります。大きなタスクがある場合は、vectalに記述して「これを4つの小さな段階に分解して」と指示すれば、タスクを作成して完了を支援してくれます。
DeepSeer one または o3 miniモードを切り替えて、一段階ずつ進めることができます。これは全て正しく見えます。そしてウェブ検索を行います。なぜこんなに複雑なんでしょう。
別のヒントを出します。深呼吸して、シニア開発者のように進めましょう。コードは少なければ少ないほど良いです。一度に多くのことをしようとしています。tavil APIは、ドキュメントを見れば分かるように、とてもシンプルなのに、多くのことをしようとしています。
これは小さくなりましたね。基本的な検索の深さは...まだ同じ間違いを繰り返していますが、正しい方向に向かっています。これもまだ長すぎるように見えます。チャットAIがウェブ検索を実行しています。基本的な検索は何でも...アプリをリロードして見てみましょう。
「イーロンについてのニュースを探して」と入力します。あ、「JDvanceについて...ミュンヘンでの彼のスピーチは素晴らしかった。信じられないほどのスピーチです。ぜひ見ることをお勧めします」。
何が起きているか見てみましょう。「上院を辞任」...これはニュースじゃありませんね。代わりに、route.tsxを更新して、単にtavilウェブ検索を実行し、結果を生のままコンソールに出力するようにしましょう。何が起きているのか見たいです。
これは必要なことです。応答をログに記録したいです。これは良いですね。更新して、「2025年2月のヨーロッパの最新ニュースは？」と入力してみましょう。関連する情報が得られるはずです。
コンソールを見てみましょう。基本からAdvancedに切り替えることができます。そうですね、それが良さそうです。応答は得られていますね。「現在の出来事の最新ニュースブリーフィング」...「ウクライナについて簡潔で明確に説明して」...
同じプロンプトをもう一度試してみると...より簡潔になりました。2月13日、これは良いですね。Advancedを使っているので、より多くのクレジットを使用することになります。6クレジットですが、これは良いですね。
ロジックが形になり始めています。ターミナルを見ると応答が見えます。「委員会が新しい欧州委員会を歓迎」など、関連性のスコアもあります。もう少しテストしてみましょう。
「2023年10月23日時点のアメリカの政治に関する最新ニュースを教えて」と入力します。これが問題ですね。なぜ10月23日を検索しているのでしょう。プロンプトを更新して、今日の日付もコードから取得するようにしましょう。モデルは今日が何日かを認識していないのです。
なぜこんなに凝ったことをしようとするのでしょう。コードは少なければ少ないほど良いのに。今日の日付...はい、ずっと良くなりました。これが公式の日付です。今日は...検索結果はこちらです。
ここで、ダッシュを追加して...「この情報に基づいて、ユーザーの元のプロンプトに関連する簡潔で明確な要約をtl;drで提供してください」。これで答えています。
latest_message_contentはこのように削除できます。良さそうです。プロンプトエンジニアリングは本当にアートですね。芸術でもあり科学でもあります。時間とともに上達していきますが、これでAIモデルが混乱する問題は防げるはずです。
日付を提供し、今日は何日かを伝えています。実は、なぜDeepCar 1を使わないのでしょうか。これを削除して...保存してリロードします。「アメリカの政治に関する最新ニュースを教えて」と入力してみましょう。
これはDeepCar 1です。タグを見ればそうだと分かります。「検索で提供されたのは...Politicoが必要...AP News...トランプに関する複数のAR...訴訟、プーチン、tl;dr...トランプの説明」など。これらは最新のものですね、良いです。
これが機能することが分かりました。でも、ループを実装する必要があります。研究ループを実装する時が来ました。まずは2回の反復から始めましょう。Cursorのルールで説明されているように...深呼吸して...
現在のコードをできるだけ多く保持してください。深呼吸して、シニア開発者のように進めましょう。現在のコードは機能しているからです。tavil検索を実行し、DeepCar 1にそれについて推論させています。
ただループに実装する必要があります。DeepSeekが検索について考え、「これがあるけど、ユーザーはこれを求めている。他に何か見落としている部分があるかもしれない」と考え、それに基づいて検索を続けるようにします。
プロンプトがどのように生成されるか見てみましょう。なぜインポートを変更しようとするのでしょう。研究ループのパワーをフロントエンドで設定できるようにするのは良いかもしれません。まずはこれを受け入れて、機能するか見てみましょう。
「Project Targateとは何ですか？」と入力してみましょう。エラーが出ました。これは明らかにエラーになると予想されました。「コードは少なければ少ないほど良い」と言います。また、変更しすぎようとしているからです。
必要なのはループに変えることだけです。その上に他の機能を追加していけます。これを却下して、「一度に多くのことをしようとしています。Cursorのルールを見て、route.tsxで次に必要な小さな変更を教えてください。最終的なロジック、最終的なビジョンに一歩近づくために」と言います。
コードは書かずに、まず答えてください。なぜこんなに長い回答なのでしょう。長い回答は嫌いです。簡潔に答えてください。
「現在、DeepSeekの質問フォーマットを使用して検索クエリを最適化する必要があります」。そうですね、Cursorのルールを見直すと、そうする必要があります。
同意します。ただし、すでにrouteにある動作するコードを活用しましょう。深呼吸して、シニア開発者のように進めます。コードは少なければ少ないほど良いです。実は、その前にDeepSeek V3に切り替えて、開発を速めましょう。V3...保存します。
ユーザーから入力を取得し、それに基づいて...なぜまたテキストを生成しようとするのでしょう。最大トークン数は200で十分です。受け入れて...まずユーザーのメッセージを処理し、それから検索を送信します。
これが機能するか見てみましょう。正直なところ、フロントエンドに何が起きているのかを送信すべきです。routeとページを更新して、簡単なメッセージバブルをフロントエンドに送り、デバッグログを表示するかのようにユーザーに何が起きているかを更新します。基本的に、これらをAIの応答であるかのようにチャットで表示する必要があります。
「可能な限り最もシンプルな方法でこれを実装してください。現在の実装は失敗し、まったく機能しません」。route.tsxを使用し、多くの行があります...これは素晴らしいですね、すごいです。
これを実現する最もシンプルな方法は何でしょうか。まだコードは書かないでください。ただ答えてください。なぜこれが苦手なのか分かりません。私には結構シンプルに思えます。
「これを実現してください。コードは少なければ少ないほど良いです」。実は、ベストな方法を提案するよう求めると、異なるアプローチを示すのが興味深いですね。コードを書くように言うのではなく、ベストな方法を提案するよう求めると、異なる結果が得られます。とても興味深い仕組みです。
何ですか、これは...なぜですが、「現在のロジックは削除せず、その上に追加してください」。新しいコンポーザーを使う時が来たようです。モデルが狂い始めたら...既存のものを保持しましょう。
私にはこれはかなりシンプルなはずに思えるのですが、なぜ最初から作り直そうとするのでしょうか。これは謎です。これらのモデルを使用することは本当に奇妙です。時々、触る必要のないものに干渉しようとすることがあります。
「コードの行数を少なく」...「変更は最小限に」...「完全なリファクタリングではなく、最小限の変更を」...「ステータスストリームを作成」...これが機能するか興味があります。これは驚きです。
「ヨーロッパのニュースを教えて」...機能していますね、これは良いニュースです。「最新の更新」とは何でしょう。これは完全に古いですね。APIの設定に問題があると思いますが、とりあえず置いておきましょう。
チャット履歴を処理し、全てのロジックを管理する別のTSXコンポーネントを作成し、routeからクリーンでモジュラーな関数を呼び出すのはどうでしょうか。そうすれば、フロントエンドで何が起きているのか明確に理解できます。どう思いますか。まだコードは書かないでください。ただ答えてください。
どこにいますか...では、新しいファイルをどこに作成すべきでしょうか。構造を送ります...新しいTSXコンポーネントはどこに配置し、どのように名付けるべきでしょうか。
appの中に新しいディレクトリ、新しいフォルダcomponentsを作成し、research-chat...research-chat.tsxという新しいファイルを作成します。
「ファイルの場所をコメントとして上部に記載するのが良い習慣です」。ファイルを作成しました。research-chat...さて、このリファクタリングをどのように実行しますか。段階的に行う必要があります。
route.tsxを更新して、クリアでモジュラーな独立した関数を持つようにする必要があります。それから、Cursorのルールで説明された新しいresearch-chatファイル内にロジックループを構築し、新しいファイルを使用するようにページをリファクタリングする必要があります。
ただし、これを一度に全て行うことはできません。あなたの仕事は、理にかなった3〜4段階のプロセスを提案することです。まだコードは書かないでください。ただ答えてください。
ちなみに、OBSが私の人生の40分を無駄にしたところです。完成までの作業を録画したのですが、動画が固まってしまいました。そこで、私が行ったことをお見せしましょう。
ロジックを3つの異なるファイルに分割しました。以前はroute.tsxが1つだけでしたが、今は3つの異なるroute.tsxファイルがあり、それぞれが異なることを行います。
これは推論するもので、プロンプトについて考え、何が不足しているか、次の検索クエリは何にすべきかなどを考えます。次に検索用のものがあり、明らかにtavilでAdvanced設定でウェブ検索を行います。今月のみ、10件の結果で、これは本当に深く掘り下げます。
それからマネージャーがあります。これは2つの方法で使用されます。最初は初期の検索クエリを最適化するために使用され、最後に受け取ったパラメータに基づいて要約を提供します。検索結果が提供された場合、最終的な要約を生成します。
これが3つの異なるrouteで、ロジックはこのコンポーネントresearch-chatで処理されます。「ああ、デイビッド、私は混乱してきた」と思われる方には、New Societyにコードを提供します。
テンプレートとプリセットで、以前の動画のコードと同様に、この動画のコードも全て入手できます。プロンプトと指示も同様です。ここにデイビッドのコード、プロンプトと指示があります。
これはNew Societyで提供する多くのものの1つに過ぎません。おそらくこの動画に最も関連する主なものは、スタートアップの構築方法です。私は1日目から全ての舞台裏、ミス、学んだことを全て文書化し、最近の更新でvectalを無料で追加しました。
これら全てにアクセスしたい場合は、New Societyに参加してください。とはいえ、お見せしましょう。このファイルは現在、必要に応じてこれら3つの異なるAPIルートを呼び出します。
現在、Cursorのルールで説明したこのループ、このループのロジックを、元々R.Sにあったものをresearch-chat.tsxコンポーネントに移動しました。
おそらくこれがベストプラクティスではないかもしれません。ClotやChatGPTに聞いてみてください。でも、これは基本的に機能します。「Project Targateとは何ですか？」と入力すると...最初から見てもらえるようにリセットしましょう。
「Project Targateとは何ですか？」と入力すると、「質問を最適化しています」と表示されます。そこにありますね、超高速です。Project Targateの目的、歴史、詳細を最適化しました。ウェブ検索では、見てください、とても高速です。
1ラウンド目、3ラウンド中です。実際にラウンド数を設定できます。より深く掘り下げたい場合は、反復回数を5回、7回、10回など設定できます。APIコストのみを支払えばよいので、DeepSeekを非常に安価で実行できます。tavilも非常に安価です。
結果を分析しています。これが1回目です。次にウェブ検索の2ラウンド目に進み、再び検索結果を分析します。これが3ラウンドまで続き、最後に要約者が最終的なエージェントの要約を提供します。
このツールは作るのに2時間ほどかかりましたが、New Societyのテンプレートがあれば、もっと短時間で構築できます。その後、Vercelにデプロイするだけです。
方法が分からない場合は、「NextJSとTypeScriptでDeepResearchツールの構築が完了しました。Vercelにデプロイする方法を教えてください」と入力すれば、vectalでステップバイステップの指示を作成してくれます。
この恐ろしいタスクを分解できます。何もデプロイしたことがない場合は「ああ、どうやってやるんだろう」と思うかもしれませんが、vectalではタスクを作成できます。完了としてマークし、「よし、これら5つのステップそれぞれにタスクを作成して」と言えます。
これがvectalを使用する主な理由です。これは多くの機能の1つに過ぎませんが、要点は分かると思います。デプロイしたい場合は指示に従い、何かで行き詰まった場合は、より多くのパワーが必要なら o3 miniを使用し、さらにパワーが必要な場合はDeepCar 1を使用します。
これらは全て無料プランで利用可能です。明らかに制限付きですが、この動画で見たように、私は頻繁に使用していましたが、制限にすら達していません。無料プランはかなり寛大です。
いずれにせよ、このディープサーチを税理士、弁護士、銀行家、医師など、ウェブ検索が必要な職業向けにカスタマイズできます。IT専門家、マネージャー、HR、フィットネストレーナー、パーソナルトレーナー、インフルエンサー、コンテンツクリエイターなど、何らかのウェブ検索が必要な多くの異なるニッチや産業があります。
プロンプトをカスタマイズし、そのニッチに特化した方法でループをカスタマイズすれば...これらのPRは非常に一般的ですが、弁護士のみに特化し、素晴らしいプロンプトを書くのに数時間かけ、テストし、無料で数人の弁護士に提供してフィードバックを得て実装すれば、どのニッチでも本当に素晴らしい特化型のディープリサーチツールを構築できます。
ターゲット層にお金がある市場に焦点を当てることをお勧めします。月額10ドル、15ドルを請求すれば、思っているよりもずっと早く月数千ドルまでスケールできます。
この動画でコードを一切書くことなく、これを構築しました。TypeScript、JavaScript、NextJSのコーディングは一切していません。それらについて何も知りません。ただCursorを使用し、プレーンな英語で構築したいものを説明し、フィードバックとコンテキストを提供し、現在起きているトレンドを活用しただけです。
経験に基づいて話しているのであって、これをやったことがないわけではありません。過去4ヶ月間、自分自身でこれを行ってきました。毎月、これらのAIツールのおかげでvectalは大幅に改善されています。
始めたい場合は、これが可能だということを知っておいてください。シニアプログラマーである必要は全くありません。この動画を見るだけで自分でできます。
より多くの情報が必要で、本気でスタートアップを構築したい場合は、New Societyに参加して、私が自分のスタートアップを構築する過程を見ることを強くお勧めします。vect.aiにアクセスして試してみてください。完全に無料です。
ToDoやNotionを置き換え、これを使用してください。時間を節約してくれる組み込みのAIエージェントがあります。
以上です。ご視聴ありがとうございました。素晴らしく生産的な1週間をお過ごしください。試してみてください。

いいなと思ったら応援しよう！