00:00:0010年以上にわたり、数百万もの開発者がVercelのフロントエンドクラウドを活用してきました。
00:00:04個人プロジェクトからエンタープライズ向けソフトウェアまで、あらゆるデプロイにVercelが使われています。
00:00:10ユーザーやチームの負担を減らすために、エージェントやAI機能を構築する際、
00:00:15本番環境での複雑なメンテナンスは、最も避けたいことの一つでしょう。
00:00:21Vercelの「セルフドライビング・インフラ」は、DevOpsをデプロイと同じくらい簡単にします。
00:00:25コードを生成してエージェントを構築すれば、あとはVercelが自律的にグローバル規模のパフォーマンスを最適化し、
00:00:31コンピューティングのプロビジョニング、AIワークフローのオーケストレーション、さらには異常の調査まで行います。
00:00:38これらすべてに、設定は一切不要です。
00:00:40では、具体的にどういうことか、スピードランでお見せしましょう。
00:00:43既存のウェブアプリを移行するという課題に挑戦してみます。
00:00:46これは、焙煎所とカフェを運営する中堅コーヒー会社の採用プラットフォームのデモアプリです。
00:00:53フロントエンド、求人応募と履歴書を保存するデータベース、
00:00:58そして、選考を早めるためにカバーレターを要約するバックエンドサービスを備えたシンプルなアプリです。
00:01:03現在は、非常に古いホスティングプロバイダーを利用していますが（名前は伏せておきますが）、
00:01:07間違いなく近代化したいので、さっそくやってみましょう。
00:01:10Vercelに移行することで、機能開発、デプロイ、そしてコラボレーションが加速します。
00:01:17では、このアプリをVercelにインポートします。
00:01:19まずは、基本的なFastAPI Pythonサービスであるバックエンドから始めます。
00:01:24「Add New」をクリックして開始します。
00:01:26すでにGitアカウントを連携させているので、リポジトリが表示されています。
00:01:31APIリポジトリの「Import」をクリックします。
00:01:33インポート設定は、ビルドや出力の設定を含め、完全にカスタマイズ可能です。
00:01:38ですが、VercelはFastAPIなどのバックエンドフレームワークを標準でサポートしています。
00:01:44そのため、「Deploy」をクリックするだけで動作します。
00:01:46数秒足らずで、PythonバックエンドサービスがVercel上でデプロイされ、稼働しました。
00:01:52VercelはこのプロジェクトのURLを自動的に生成しました。
00:01:55次のアプリの環境変数として追加するために、これをコピーしておきます。
00:02:01別の新規プロジェクトを追加し、次のアプリで「Import」をクリックします。
00:02:05Supabaseと通信できるように、このアプリの環境変数をインポートします。
00:02:11これでアプリがSupabaseと通信できるようになりました。次にFastAPIの変数として、
00:02:15先ほどコピーしたURLを貼り付け、アプリをデプロイします。
00:02:20Vercelがプロジェクトのビルドとデプロイを行っています。
00:02:23これは、数百万ものサイトやアプリを支えるものと同じインフラ上で動作します。
00:02:27Vercelの世界126拠点のプレゼンスにより、コンテンツは自動的にユーザーの近くに配置されます。
00:02:33つまり、常に圧倒的なスピードが維持されるということです。
00:02:37アプリのデプロイが正常に完了したことが確認できます。
00:02:40中身を見てみましょう。
00:02:42求人一覧が表示され、ダッシュボードではPythonによる要約機能を備えたバックエンドが確認できます。
00:02:49本番環境に移行すれば、アプリ全体を監視できるようになります。
00:02:53今は、ライブデータを確認できる別のプロジェクトに移ってみましょう。
00:02:57ウェブ分析、Speed Insights、ログ、クエリ可能な可視化ダッシュボードで全体像を把握できます。
00:03:04例えば、これはエージェントのスキルを探すサイト「skills.sh」の分析データです。
00:03:11詳細なトラフィックやリファラルサイトを含む参照元情報を確認できます。
00:03:15ここで「Speed Insights」をクリックすると、Core Web Vitalsが表示されます。
00:03:19これにより、速度や負荷の問題を診断し、修正することができます。
00:03:23「Observability」をクリックするとダッシュボードが表示され、アプリのあらゆる診断情報を探索・照会できます。
00:03:29ログ、関数、エッジリクエスト、データ転送など、すべてが対象です。
00:03:34さて、ここからは要約機能を、採用担当者にとってより便利なものにしていきたいと思います。
00:03:38現在は、FastAPIがPythonライブラリを使ってカバーレターを要約しているだけです。
00:03:43ですが、カバーレターとPDFの履歴書の両方を分析するシンプルなエージェントを構築できます。
00:03:48職務内容と比較して候補者の初期評価を行い、
00:03:52採用担当者が送信するためのメールを生成させることができます。
00:03:56リポジトリはすでにローカルにクローンしてあるので、ディレクトリに移動して必要なツールをインストールします。
00:04:01次に、Vercel CLIを使用してローカルプロジェクトをVercelに接続します。
00:04:06CLIを使えば、コマンドラインから直接Vercelプラットフォームを簡単に操作できます。
00:04:11まずは「vercel link」から始めます。
00:04:14はい、このローカルプロジェクトをリンクします。
00:04:16組織は「Vercel demo」、プロジェクトは「coffee shop jobs」です。
00:04:21すぐに見つかりました。
00:04:22そして環境変数をプルします。
00:04:24完了しました。
00:04:25「vercel dev」を実行すれば、Vercelのデプロイ環境をローカルで再現してアプリを動かすこともできます。
00:04:31試してみましょう。「vercel dev」です。
00:04:34サーバーを起動して、さっそくテストしてみます。
00:04:37うまくいきました。
00:04:38いい感じですね。
00:04:40では、エージェントの構築に必要なAIツールをインストールしましょう。
00:04:43Vercelは、機能やエージェントの構築に必要なすべてのAIツールを提供しています。
00:04:47まず、要約用の実際のAIモデルを統合する必要があります。
00:04:51Vercel AI Gatewayを通じて数百もの異なるモデルを使用でき、
00:04:55「vercel dev」を実行していればOIDCトークンで自動アクセスできるのが素晴らしい点です。
00:05:00次に、テキスト要約などのAIプリミティブのフルセットを提供するAI SDKをインストールします。
00:05:07「pnpm install ai」を実行します。
00:05:12よし。
00:05:13続いて、エージェントの各ステップを堅牢に調整する「Workflow Dev Kit」をインストールします。
00:05:21もしアプリがコードを生成するものであれば、Vercel Sandboxを使って安全に実行することも可能です。
00:05:26今回はシンプルな要約エージェントなので、Sandboxは不要です。
00:05:31最後に、フロントエンドはNext.jsです。
00:05:34フロントエンドをクリーンで高速に保つために、「React best practices」スキルをプロジェクトに追加します。
00:05:40「skills.sh」を使います。
00:05:43サイトにアクセスして、「React best practices」を検索します。
00:05:47インストール用のコマンドをコピーします。
00:05:50できました。
00:05:53clog codeなどのために、忘れずにインストールしておきましょう。
00:05:56グローバルではシンボリックリンク版が好みなので、そちらでインストール完了です。
00:06:01では、エージェントを作り上げていきましょう。
00:06:02非常にシンプルなので、clog codeにプロンプトを出すだけです。
00:06:06これが最初に使ったプロンプトです。
00:06:08カバーレターとPDFの履歴書を要約し、要約を組み合わせて職務内容と比較、
00:06:12初期の推奨事項を作成し、フォローアップメールを生成するようエージェントに指示しています。
00:06:20もちろん、clogを使ってこれをワンショットプロンプトに磨き上げるのに少し時間をかけました。
00:06:25それを今からclog codeに貼り付けて、実行させます。
00:06:29ビデオデモの魔法を使って、clogのプロンプトを試行錯誤し終えたことにして、
00:06:35その出力結果が含まれる別のディレクトリを開きます。
00:06:39よし、デプロイしましょう。
00:06:41変更をコミットして、作業中のブランチをプッシュします。
00:06:47するとVercelの「セルフドライビング・インフラ」がAIワークロードを自動的に認識し、
00:06:51それらの計算ジョブ用のインフラをプロビジョニングします。
00:06:55ここで「Active Compute」プライシングが非常に役立ちます。
00:06:57モデルAPIの応答を待っている間ではなく、実際の計算時間にのみ課金されるからです。
00:07:03さて、アプリを確認しましょう。ダッシュボードから新機能と応募内容を見てみます。
00:07:10実際に、この応募に対する不採用通知のテキストと、生成された不採用メールが表示されています。
00:07:17プレビュー環境の最高の利点は、チームの誰もがアプリのあらゆる部分にコメントできることだと思います。
00:07:24今すぐやってみましょう。エリックにボタンを追加するように頼んでみます。
00:07:31いいですね。これはVercel Toolbarの機能の一つに過ぎません。
00:07:34フラグのテスト、アクセシビリティ監査、トレースの実行なども可能です。
00:07:38プレビュー環境は本番と同じインフラで動作するため、
00:07:42ここでテストしたものは、本番でエンドユーザーが目にするものと全く同じです。
00:07:46エージェントを追加しましたが、チームの他のメンバーもUIを改善できるようにしたいですね。
00:07:52v0を使えば、ウェブベースの開発環境で他のメンバーも簡単にプロジェクトに取り組めますが、
00:07:57Gitワークフローを通じて、すべてがバージョン管理され安全に保たれます。
00:08:01これは本当に素晴らしい機能です。
00:08:03GitHubプロジェクトをインポートし、メインブランチをベースに選択すると、v0がプロジェクトをセットアップします。
00:08:13ご覧の通り、環境変数も一緒にインポートされました。
00:08:19これで1分も経たないうちに、アプリがv0上で動作しています。
00:08:23既存のプロジェクトなので、v0はコードを実行するためにサンドボックスを起動します。
00:08:28これは、隔離された環境を構築するためにVercelで使用できるのと同じサンドボックスの仕組みです。
00:08:33「Git」をクリックすると、v0が作業用の新しいブランチを自動的に作成したことがわかります。
00:08:39求人ページのデザインを少し調整したいですね。
00:08:42突拍子もないかもしれませんが、求人カードをページいっぱいの幅にしてみましょう。
00:08:50v0が仕上げてくれましたが……うーん、この選択はあまり良くなかったかもしれません。デザインチームの意見を聞いてみましょう。
00:08:57このv0のチャットをチームに送って作業を続けてもらうこともできますし、
00:09:00プルリクエストを作成して、プレビュー環境を共有しコラボレーションすることもできます。
00:09:06アプリをデプロイしてグローバル規模で提供する場合、Vercelはデフォルトでセキュリティを確保します。
00:09:13アプリを動かしているのと同じ「セルフドライビング・インフラ」が、エッジでもアプリを保護します。
00:09:18これは私たちのNext.jsサイトのファイアウォール画面です。
00:09:20多くのトラフィックがありますが、すべてが良いトラフィックとは限りません。
00:09:24Vercelのウェブアプリケーションファイアウォールは、悪意のあるリクエストをアプリに届く前にエッジで自動的に検査し、遮断します。
00:09:33「Bot ID」は、実際のユーザーと自動トラフィックを静かに判別し、CAPTCHAのような負担をかけることなく不正なボットをブロックします。
00:09:40Vercelのグローバルエッジネットワークは、大規模な攻撃を自動的に検出・緩和し、高負荷下でもアプリの応答性を維持します。
00:09:49移行、AIワークフロー、コラボレーション、セキュリティ。これらすべてが、インフラ設定なしで一つのプラットフォーム上で実現しました。
00:09:59それが「セルフドライビング（自動運転）」の意味するところです。
00:10:01プラットフォームが邪魔をしないので、皆さんは開発と提供に集中できるのです。
00:10:05プロジェクト数は現在1,100万件を超え、今も増え続けています。
00:10:08次は、あなたの番です。