こんにちは。

今日はFlutterFlow x AI（ChatGPT）で、料理レシピ提案アプリを作ってみます。

ただ、食材を入れてレシピを答えてもらうだけなら結構簡単ですが、今回はChatGPTのFunction Calling（ファンクション コーリング）の仕組みを使う練習をしてみたいと思います。

では始めましょう。

ChatGPTのFunction Calling（ファンクション コーリング）とは？

Function Calling（ファンクション コーリング）とは、ChatGPTのFunction（関数）をCalling（呼び出し）できる仕組みです。
説明が難しいのでうまく言えないのですが、

例えば、ChatGPTに、

食材が以下の時におすすめのレシピを教えて！返却は以下のようなフォーマットで答えて。

## 食材

- たまご

- お米

- たまねぎ

- 鶏肉
  

## 出力するレシピのフォーマット

- title: 卵かけご飯

- category: 和食

- recipe: まずお米を洗いご飯を炊いたら卵を...

のように指示すると、title、category、recipeが上記フォーマットで返してくれることもありますし、なんか文章でずらずら説明されたりすることもありますよね。

これはchatgptのブラウザで使ってる時であれば何度もやり直せばいいだけなので問題ないですが、APIとして使いアプリに組み込むときは、そのブレがあると困ります。

これを明示的に指定できる方法がfunction callingです。

ChatGPTのFunction Callingの使い方

使い方は割と簡単です。でもあまりわかりやすく説明してるところが見つからなかった...
特にノーコードで使ってるような記事が少ないのでわかりにくい方もいらっしゃるかもしれません（私はよくわからなかった汗）。

Function Calling 使い方

まず例を書きますと、こんな感じになります。

　　{
  "model": "gpt-3.5-turbo",
  "messages": [
    {
      "role": "system",
      "content": "You are a helpful assistant."
    },
    {
      "role": "user",
      "content": "<prompt>"
    }
  ],
  "functions": [
    {
      "name": "get_recipe",
      "description": "材料をもとに作れるおすすめの料理とその作り方を１つ教えてください。",
      "parameters": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string",
            "description": "料理名を表示する。例）カレーライス"
          },
          "category": {
            "type": "string",
            "enum": [
              "和食",
              "洋食",
              "中華"
            ]
          },
          "recipe": {
            "type": "string",
            "description": "レシピの内容を数行程度で表示する。例）まず野菜を洗い、次にお鍋に油を引いて準備します。その次は..."
          }
        },
        "required": [
          "title",
          "category",
          "recipe"
        ]
      }
    }
  ]
}

最初のmodelやmessageまでは普通にChatGPTのAPIを利用する時と同じですよね。
modelと送信するメッセージを書きます。

次のfunctionsのところがfunction callingの仕組みです。
nameでこのfunctionの関数名を定義します。get_recipeとしてみました。

  "functions": [
    {
      "name": "get_recipe",
      "description": "材料をもとに作れるおすすめの料理とその作り方を１つ教えてください。",
      "parameters": {



次に、
"description": "材料をもとに作れるおすすめの料理とその作り方を１つ教えてください。"
と設定しました。
これにより、材料を渡された時にはこの関数を呼び出してくれるように、なるんだと思います。

そしてその関数の返却値は、parametersの中に定義しています。

"parameters": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string",
            "description": "料理名を表示する。例）カレーライス"
          },
          "category": {
            "type": "string",
            "enum": [
              "和食",
              "洋食",
              "中華"
            ]
          },
          "recipe": {
            "type": "string",
            "description": "レシピの内容を数行程度で表示する。例）まず野菜を洗い、次にお鍋に油を引いて準備します。その次は..."
          }
        },


title、category、recipeの型を定義しました。

また、categoryの場合はenumとして和食、洋食、中華のどれかが表示されるようにしてみました。このような構造体的な書き方もできるんですね。

FlutterFlow側でのAPI設定

FunctionCallingの仕組みがなんとなくわかったところで、FlutterFlow側でAPIの呼び出しの実装を行います。
先述のプロンプトのFunction Callingの部分以外は設定はほとんど一緒です。

これでテストしてみると、以下のように表示されます。

返却値は以下です。

"arguments": "{\n  \"title\": \"チキンとトマトの炒め物\",\n  \"category\": \"中華\",\n  \"recipe\": \"1. フライパンに油を熱し、鳥肉を炒めます。\\n2. 鳥肉が色づいたら、トマトを加えて炒めます。\\n3. トマトが柔らかくなったら、レタス、アスパラガス、ナスを加えて炒めます。\\n4. 野菜がしんなりしたら、溶き卵を加えて全体を混ぜます。\\n5. 卵が完全に火が通ったら、塩・こしょうで味を調えて完成です。\"\n}"

argumentsというところに、title、category、recipeというそれぞれの項目にフォーマット通りに値が入ってることが確認できると思います。

ただ、この文字列から値を抽出して使うためには、このエスケープの「\（バックスラッシュ）」や改行コード「\n」を何とかしてあげて、title、category、recipeをparseして構造体(data type)に入れてあげるようなcustom functionは書く必要がありそうです。

Data TypeとAppState

私の場合は、Recipeという名前のDataTypeを用意し、GPTから受け取ったレスポンスをそのDataTypeに入れてApp Stateに保存するようにしてみました。

Custom Function（カスタムファンクション）

次に、さっき言ったように、GPTから取得した値をDataTypeに入れるため、変換するCustom Functionを書いてみました。

というよりChatGPTに書いてもらいました。ChatGPT、ほんとありがたいです。

GPTから返却された"argument"の部分の文字列を渡して、data type型に変換するようにしています。

UI作成

UIはこんな感じでとてもシンプルなものを作りました。
ユーザーが食材を記入するためのinput boxと、実行ボタン。
そして出力先はタイトル、カテゴリ、レシピをそれぞれ別領域に分けています。

ボタンアクションでAPI呼び出し

APIの呼び出し部分のアクションはこんな感じです。
APIを読んで、その結果をapp stateに入れてます。
その際に、さっき作ったcustom functionでjsonをpurseしています。

AIレシピ提案アプリの完成！

これで完成です！

以下のように、レシピを入力してボタンを押すと、タイトル、カテゴリ、レシピを書いてくれました！

FlutterFlowでAIレシピアプリ（FunctionCalling使用）を動画で確認したい方はこちら

AIレシピアプリとFunction Callingの使い方について動画でも解説しているので、興味がある方はこちらもどうぞ。

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。