Vercel Workflow Development Kitで複雑なサーバーレスワークフローをシンプルに構築する方法

はじめに：複雑なワークフローをいかにシンプルにするか

こんにちは。Vercelのワークフローチームを率いているReneeです。Vercelには約4ヶ月になりますが、実は今回が初めてではありません。7年前、私は2018年にVercelで初めてのインターンとして参加し、Now 2.0（クラウドでDockerを実行するプロジェクト）をローンチした際のトークがインターンシップ最終日でした。

インターンシップ後、私はVercelを離れて自身のスタートアップを立ち上げ、YCに参加しました。その後5年間、さまざまなものを構築してきました。最初はコーディングエージェントから始まりましたが、当時は2018年でLLMは存在せず、手動で静的コード解析を行っていました。その後、スタートアップをピボットし、データ分析やビデオ生成ツールに取り組むことになりました。

私がこの5年間で構築してきたすべてのプロジェクトに共通していたのは、ホワイトボードに描くワークフローの図でした。これは、開発の各要素をどのように配置するかを示す標準的なエンジニアリング図です。しかし、この図が示す理想と、実際にコードを書いて実現する現実の間には常に大きなギャップがありました。

複雑なワークフロー構築の現実的な課題

1. ビデオ生成パイプライン「Windsor」の事例

私たちが開発したビデオ生成ツール「Windsor」は、まさにワークフローの塊でした。ビデオのリクエストを受け取り、オーディオファイルを生成し、FFmpeg処理を行い、ビデオを送信する、という一連のステップが含まれます。特に課題となったのは、GPU推論ステップでした。Vercel上ですべてをサーバーレスで完結させたいと考えていましたが、Vercelには長らくGPU機能がなかったため、このステップだけは外部で処理し、他のさまざまな関数と連携させる必要がありました。結果として、自分たちでワークフローのオーケストレーション（複数のサービスや機能を連携させて自動化するプロセス）を管理しなければなりませんでした。

また、高い堅牢性を確保するためにキューを導入したり、生成された各ビデオを人間がレビューするための手動の内部ツールを作成したり、3種類のデータベースをセットアップしたりと、多大な労力が必要でした。ユーザーには関係のない、内部管理ツールや監視のための状態管理も大量に発生しました。これらすべては、膨大な量のコードとして保守が必要となります。

もしWindsor全体がたった1つのファイルで済むようなシンプルなものであれば素晴らしいのですが、実際には多数のAPIルートとコンポーネントで構成されていました。この複雑さゆえに、新しいエンジニアが参加するたびに、ホワイトボードを使って同じアーキテクチャを何度も説明しなければなりませんでした。コード自体が、システムの全体像を理解しにくい状態だったのです。

2. AIエージェントSlack Bot「Story Time」の事例

最近、ワークフローチームで構築した「Story Time」というSlackボットも、同様の課題を抱えていました。これは、VercelのSlackチャンネルで「story time」を開始すると、新しい物語が生成され、チャンネル内の誰でもその物語に返信して共同で物語を構築できるAIエージェントです。物語が完成すると、対応する画像が生成されます。チームのNateが自分の子供のために作ったものです。

このボットのアイデアはシンプルですが、実装は非常に複雑でした。理想的な図を描いてから現実のコードに落とし込むと、やはりギャップが生じます。すべてがVercelのサーバーレス関数として実行されますが、これらを連携させるためには無数のキューを接続する必要があります。さらに、各LLMステップにはリトライ処理やレート制限を追加し、失敗した場合に備えてすべての状態を維持・クリーンアップし、入力と出力を検証しなければなりません。

また、単一のAPIルートでは対応できません。Slackボットを最初に開始するAPIルートと、ユーザーがスレッドに返信するたびにボットを再開し、状態を維持するためのAPIルートが必要です。このボットを構築するために、私たちは約12もの異なるサーバーレス関数を構築する必要がありました。これもまた、私が思い描いた理想の姿とはかけ離れていました。

Vercel Workflow Development Kit (WDK) の登場

私は、コードをワークフローとして捉え、ワークフローについて語ることが好きです。そして、「こうなったらいいのに」と常に考えていた、理想の擬似コードのようなワークフローを実現するために、**Workflow Development Kit（WDK）**を発表します。WDKは、私たちが思考する通りのワークフローを簡単に記述できるようにすることを目的としています。

ワークフローは非常に汎用性の高いパラダイムであり、AIエージェント、マイクロサービス、GPUビデオ生成パイプラインなど、さまざまなものを表現できます。

WDKによるワークフローの簡素化：バースデーカード生成アプリの構築

WDKの具体的な使い方を説明するために、バースデーカード生成アプリを構築する例を見ていきましょう。このアプリでは、メールアドレスとプロンプトを入力すると、バースデーカードが生成され、メールで送信されます。非常にシンプルです。

従来のNext.jsアプリでの課題

シンプルなNext.jsアプリでは、POSTリクエストハンドラでテキスト生成、画像生成、バースデーカード送信の各ステップを呼び出すことができます。しかし、エージェントが複雑になり、ウェブ検索やサンドボックスでのコード実行など、より多くのことを行うようになると、各部分が脆くなります。どのステップで失敗しても、それまでのすべてのトークンや状態が失われてしまいます。標準でリトライ機能や監視機能は備わっておらず、それらすべてを自分で追加し、連携させる必要があります。

さらに、この一連の処理全体を単一のサーバーレス関数で実行することはできません。

use step ディレクティブによるワークフローの分割

WDKを使用すると、これらのステップをそれぞれ独立したステップに分割することで、多くの作業を簡素化できます。ここで登場するのが**use step**ディレクティブです。これは、特定のステップをバックグラウンドで実行し、その前にキューを自動的に配置することを可能にします。

Next.jsをご利用の方であれば、use serverに馴染みがあるかもしれません。use stepも同様のディレクティブにインスパイアされていますが、Next.js、Nitroなど、あらゆるフレームワークで動作するように設計されています。WDKは、各ルートを独自のAPIルートにコンパイルし、キューの接続を自動的に処理します。

async/awaitで記述する新しいワークフロー

WDKを使用することで、ワークフローの記述は、まるで通常のJavaScriptでasync/awaitを使って関数を呼び出すかのようにシンプルになります。ワークフロー関数は少し異なりますが、WDKはワークフローを停止し、バックグラウンドでステップを実行できます。その後、ワークフローを再開し、状態を再水和（以前の状態を復元）して、中断した場所から処理を継続することが可能です。

まとめ

Vercel Workflow Development Kit (WDK) は、これまで複雑な手動オーケストレーションや大量のボイラープレートコードを必要としていた、AIエージェント、マイクロサービス、GPUビデオ生成パイプラインといった多様なワークフローの構築を劇的に簡素化します。理想的なワークフローの思考を現実のコードとして実現することで、開発者はより直感的かつ堅牢にアプリケーションを構築できるようになります。

参考動画

Vercel Workflow Development Kit: Writing Workflows the Way You Think