v0でも出来る外部API呼び出し - LayerX エンジニアブログ

はじめに

こんにちは、LayerX AI・LLM事業部のソフトウェアエンジニアのyudetamagoです。

AI・LLM事業部では現在「Ai Workforce」というプロダクトを開発しているのですが、フロントエンドの開発効率化のためにv0を活用しています。

v0は画面のモックアップの作成のために使うことが多いと思いますが、プロンプト次第では外部APIの呼び出しも行うことが出来ます。そこで、外部APIを呼び出す時に

リクエストに何を含めるか
レスポンスを画面上のどこに表示するか

をプロンプトで楽に指定出来たらv0上でモックアップだけではなくある程度バックエンドも含むプロトタイプが作れるのではないかと思い試したみたという内容をご紹介したいと思います。
（試行錯誤的な内容なのでベストプラクティスではなくもっと良い方法もあるかもしれません。）

v0のプロジェクト設定

外部APIとしてDifyのworkflowを題材としてv0から呼び出すことを考えてみます。 v0には関連するチャット履歴をまとめて管理したり生成したUIを即座にVercelにデプロイ出来るプロジェクト機能があり、こちらを利用しました。

プロジェクト機能のうち今回は

環境変数
Instruction（プロジェクト全体で共通で使いたいカスタムの設定）

を使いました。

v0の各プロジェクト画面の右上にある設定アイコン（歯車アイコン）を押すとプロジェクトの設定画面を開くことが出来ます。

まず、DifyのworkflowのようなプライベートなAPI（=API Keyが必要なAPI）を呼び出すために、Dify上で取得したAPI Keyを環境変数（Environment Variables）に設定します。

そして今回は外部API呼プロジェクト設定び出しはDifyに対してしか行わないので、プロジェクトのInstructionsに以下のようなテキストを入れました。最初はAPI呼び出し部分のコードもプロンプトで自動生成していたのですが、あまり安定しなかったので直接コードを記述する形にしています。（DifyのAPIのURLやリクエストボディなどはDifyのドキュメントに記載があります）

# API呼び出し

## 指示

APIを呼び出す時は以下の「コード」と「引数」を使って実行してください。

## 引数

* apiKey: 環境変数のAPI_KEYを利用
* type: 指定された文字列を利用
* input: 指定されたデータを利用

## コード

export const callAPI = async (apiKey: string, type: string, input: any) => {
  // API呼び出し
  console.log(`API ${type} start`)
  console.log("API: input: ", input)
  const response = await fetch("https://api.dify.ai/v1/workflows/run", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      inputs: {
        input: JSON.stringify(input),
        type: type,
      },
      response_mode: "blocking",
      user: "test-user",
    }),
  })

  if (!response.ok) {
    throw new Error("API呼び出しに失敗しました")
  }

  const data = await response.text()
  console.log("API Response:", data)
  const parsedData = JSON.parse(JSON.parse(data).data.outputs.text)
  console.log("API Parsed Data:", parsedData)
  console.log(`API ${type} end`)

  return parsedData
}

v0のプロジェクトの設定はここまでで完了です。

v0でのモックアップ作成

簡単なサンプルですが、アイデアを入力すると「商品名」と「値段」を考えてくれるアプリを作成します。

実際に生成された時のイメージは以下です。

これを実際にDifyのworkflowを呼び出したときのレスポンスを使って表示出来るようにします。

Dify側の設定

Dify側のworkflowもとてもシンプルなものですが、以下のようなイメージで設定しました。（細かいですが「終了」ノードの型は「Object」などに整形して返したかったのですが、実行するとエラーになってしまい上手くいかず一旦JSONを文字列として返す形になっています）

DifyのLLMのノードに指定したプロンプト

# 指示

{input} を元に商品名とその値段を10個考えてください

# 出力フォーマット

JSONで出力してください

# 出力例

{
"products": [
{
"商品名": "UVカットサングラス",
"値段": "2500円"
},
{
  …(中略)
},
{
"商品名": "UVカットパラソル",
"値段": "4500円"
}
]
}

まとめ

このサンプルはAPIのリクエストがフォーム1つしかない簡単なものでしたが、複数フォームなどの場合であってもプロンプトで「XXのフォームとYYのフォームの内容をJSONにしてIinputに含めて」といったような形で指定することにより対応することが出来ました。

ただしレスポンスに関しては画面上のどこに表示するかはv0が上手くやってくれるのですが、レスポンス例を上手く作らないと実行時にマッピング出来ずエラーになってしまうので、ちょっと工夫が必要でした。具体的には

v0でモックアップの画面を作る
モックアップに含まれる画面に表示したい項目の名称（今回の例でいうと「商品名」や「値段」）の一覧を作り、Dify上で一度workflow(LLM)を実行してレスポンス例のJSONを生成する
v0で、生成しておいたレスポンス例のJSONを使ってAPIからのレスポンスを画面の対応する要素に表示するようにプロンプトに指示する

といった流れで作成しています。

今回はレスポンス例のJSONを直接プロンプトに含める形にしたのでレスポンス例を作るところの手間だけ発生してしまっていますが、もしAPIのスキーマファイルなどが自動生成されているのであればそれをInstructionsに含めることにより外部API呼び出しもかなり楽に行えそうなことが分かりました。