チュートリアル 簡単なAIチャットアプリ作成

このチュートリアルでは、簡単なAIチャットアプリを作ります。入力欄に「こんにちは」と打つと、AIが応答を返してくれる、いちばん小さな構成のアプリです。

このチュートリアルでは、AIモデルに Gemini 3.5 Flash-Lite を使います。 お使いの環境で同じモデルが選べないときは、AIモデルの一覧から選べるモデルに読みかえてください（モデルの選び方は第4章4-2）。

第 2 章「最初から作成の手順」を読んだあと、ここで手を動かしながら「ノード」がどんなものか確認できます。アプリの種類は チャットフロー を使います。会話のやりとりをするアプリを作るためです（種類ごとの違いは序章 0-2 を参照してください）。所要時間は約 10 〜 15 分です。目標は「まず動かし、指示文で応答を変え、ノードを 1 つ足す」の 3 つを体験することです。

0-0. このチュートリアルについて

このチュートリアルは、第 2 章「最初から作成の手順」を読んだ方が、実際に画面を操作してみるための 3 ステップです。第 2 章で読んだ手順を、実際にやってみます。最後には、「ノードをつなぐとこうなるのか」という実感が得られます。

• 第 2 章を読んでいることを前提とします。
• 3 ステップの前に、準備として「ステップ 0：ログインする」を置いています。すでにログインしている場合は、ステップ 1 から始めてください。
• 画面の細かい操作や、ノードの種類ごとの設定は、第 7 章（ノードの配置と接続）と第 10 章（ノードの種類）で詳しく説明します。ここでは「全体の流れ」を掴むことが目標です。
• このあと第 8 章でもう 1 つの作り方「テンプレートから作成」を学ぶと、2 つの作り方の使い分けが分かります。

0-1. 準備するもの

このチュートリアルを進めるには、次が必要です。

• ログインに必要な URL とアカウント（メールアドレスとパスワード）を、情報担当部署または管理者から受け取っていること（ログインの操作はステップ 0 で行います）
• 使えるAIモデルが、ワークスペースのモデルプロバイダーに登録されていること
• ブラウザ（Google Chrome・Firefox・Safari など）

一般に、DifyでAIモデルを使うには、OpenAI API キーなどをワークスペースの「モデルプロバイダー」に登録する必要があります。ただし、本書が想定する庁内での利用では、この登録は管理者があらかじめ済ませているため、自分でAPIキーを取得・設定する作業は不要です。登録済みのモデルをそのまま使ってください。モデルが選べない・応答が返らない場合は、ワークスペースの所有者または管理者に確認してください。

0-2. 3 ステップで簡単なAIチャットアプリを作る

では、実際に作ってみましょう。完成形は「利用者が何かを入力 → LLM が応答を生成 → 回答を表示」という、チャットの 1 往復ができる最も基本的な形です。

ステップ 0：ログインする（準備）

3 ステップに入る前の準備です。すでにログインしている場合は、ステップ 1 に進んでください。

1. お使いの環境の情報担当部署から案内された URL を、ブラウザで開きます。クラウド版（Dify Cloud）の URL は cloud.dify.ai です。庁内に置いた環境では、案内された URL を開きます。
2. ログイン画面で、メールアドレスとパスワードを入力し、ログインします。メールアドレスとパスワード以外の方法（組織のアカウントでのログインなど）を使う環境では、お使いの環境の案内に従ってください。

完了した状態：ワークスペースの画面が開き、左側に「スタジオ」「ナレッジ」などのメニューが表示されています。

アカウントが無い、またはログインできない場合：ワークスペースの所有者または管理者に、招待（アカウントの発行）を依頼してください。メンバーの追加は所有者・管理者の作業で、招待の案内はメールで届きます。招待の案内には有効期限（72 時間）があるため、届いたら早めに手続きしてください。

ステップ 1：アプリを作ってそのまま動かす

まず、アプリを作り、何も手を加えずに動かしてみます。

1. ステップ 0 でログインしたワークスペース画面で、左メニューの「スタジオ」を開きます。
2. 左上の「アプリを作成する」の「最初から作成」ボタンを押します。
3. アプリの種類を選ぶ画面が出ます。ここで「チャットフロー」を選んでください。会話のやりとりをするアプリを作るためです。
4. アプリ名を入力します。ここでは「テスト 01」と入力してください。（何でもよいですが、後から見て何か分かるような名前がお勧めです）
5. 「作成」ボタンをクリックします。

スタジオの「アプリを作成する」で「最初から作成」を選ぶところ

6. 編集画面が開きます。キャンバスを見てください。「スタート（ユーザー入力）→ LLM → 回答」の 3 つのノードが、最初から線でつながった状態で置かれています。LLM ノードには、使うAIモデルも設定済みです。

ここが 1 つ目の学びです。この 3 つのノードだけで、「利用者の入力を受け取る → LLM が応答を生成する → 回答を返す」というチャットの 1 往復ができています。

7. 何も変えずに、画面右上の「プレビュー」を押します。
8. 表示された入力欄に「こんにちは」と入力して送信します。少し待って、AIの応答が返ってきたら成功です。

完了した状態：何も手を加えていないアプリが、プレビューで「こんにちは」に応答を返しています。

ステップ 2：LLM ノードの中を見て、指示文（プロンプト）で応答を変える

次に、このアプリの中心である LLM ノードの中を見てから、AIモデルへの指示文（プロンプト）を書いて、応答の変わり方を確かめます。

1. キャンバスの「LLM」ノードをクリックします。右側に設定パネルが開きます。

2. まず、設定パネルの主な欄を確認します。ここを掴んでおくと、この後の操作の意味が分かります。

   欄	何をする欄か
   AIモデル	応答を作るAIモデルを選ぶ欄。庁内では、登録済みのモデルから選びます（0-1 参照）
   SYSTEM	指示文（プロンプト）を書く欄。アプリの役割・答え方をここで決めます
   USER	利用者の入力がAIモデルに渡る部分。最初から「query」（利用者の入力文）が設定されています
   コンテキスト	ナレッジ（保管庫）をつないで、回答の根拠を与える欄。本チュートリアルでは使いません（知識検索は第5章で説明します）
   メモリ	前のやりとりを覚えたまま応答させる設定。チャットフローが会話を続けられるのは、この設定によります

   各欄の詳しい意味と、このほかの設定項目は、第 10 章（LLM ノード）で説明します。

3. 設定パネルの「SYSTEM」欄（「ここにプロンプトワードを入力してください」と表示されている欄）に、指示文を書きます。例として、次のように入力してください。

   あなたは庁内の案内係です。敬語で、3行以内で答えてください。

4. もう一度「プレビュー」を押し、「こんにちは」と入力します。ステップ 1 のときと応答の調子がどう変わったかを確かめてください。

ここが 2 つ目の学びです。アプリの性格（話し方・答え方）は、指示文で決まります。指示文の書き方の詳細は、第 10 章（LLM ノード）と第 12 章で説明します。

完了した状態：指示文に合わせて、応答が敬語・短めに変わっています。

ステップ 3：ノードを 1 つ足してみる

最後に、ノードを 1 つ追加して、「前のノードの出力を次のノードが使う」ことを体験します。応答の末尾に、固定の一文を付けてみます。

1. キャンバスの「LLM」と「回答」をつなぐ線の上にマウスを載せると、「＋」ボタンが表示されます。これを押すと、この位置にノードを追加できます。
2. ノードの一覧から「テンプレート」を選びます。LLM と回答の間にテンプレートノードが挟まります。
3. テンプレートノードの設定で、LLM の出力（生成された文章）を受け取る変数を追加し、本文にその変数{{ arg1 }}と固定の一文（例：「※この回答はAIによる自動応答です」）を書きます。
4. 「回答」ノードをクリックし、参照する変数を LLM の出力からテンプレートの出力に切り替えます。回答ノードは指定した変数の中身を表示するため、この切り替えが必要です（変数の受け渡しの詳細は第 7 章で説明します）。
5. 「プレビュー」で「こんにちは」と入力し、応答の末尾に固定の一文が付いていたら成功です。

うまくいかない場合は、追加したテンプレートノードを削除して「LLM」と「回答」をつなぎ直せば、元の 3 ノードの構成に戻せます。壊してしまう心配はいりません。

ここが 3 つ目の学びです。ノードは線の上の「＋」から追加でき、前のノードの出力を次のノードが受け取って使います。

完了した状態：応答の末尾に固定の一文が付くアプリができています。

0-3. できました！

おめでとうございます！今作ったものが、チャットフローで作った簡単なAIチャットアプリです。

ここで確認したこと：

• チャットフローを「最初から作成」すると、「スタート（ユーザー入力）→ LLM → 回答」の 3 ノードが最初から置かれていて、この 3 つでチャットの 1 往復ができている。
• アプリの性格（話し方・答え方）は、LLM ノードの指示文で決まる。
• ノードは追加・接続でき、前のノードの出力を次のノードが使う。

これからの学習の進め方：

1. チュートリアル やさしい日本語ワークフロー作成 では、今度はワークフローを、ノードが無い状態から自分で組みます。ここで体験したノードの追加・接続を、最初から自分で行います。
2. 第 8 章 では、もう 1 つの作り方「テンプレートから作成」の手順を学びます。続く「チュートリアル テンプレートから作成」で、実際に試せます。
3. 第 7 章 では、ノードの配置・接続・設定の細かい操作を詳しく説明します。

次は、チュートリアル やさしい日本語ワークフロー作成 に進み、ゼロから組む体験をしてください。そのあと 第 8 章 テンプレートから作成の手順 と チュートリアル テンプレートから作成 で、もう 1 つの作り方を試せます。ここで作ったアプリと比べながら読むと、作り方の違いが分かります。

トラブルが出た場合：

• エラーメッセージが表示された場合は、エラーになったノードがキャンバス上で赤く表示されます。そのノードをクリックして開き、設定欄の上部にある「最後の実行」タブに切り替えると、エラーの内容と、そのノードに入ってきた値・出した値を確認できます。ノードごとの成否は、結果パネルの「実行追跡」タブでも一覧できます（詳しくは第 4 章 4-3・第 7 章 7-5）。詳しい対処方法は第 14 章「トラブルシューティング」で説明します。
• ステップ 3 で動かなくなった場合は、追加したテンプレートノードを削除して、元の 3 ノードの構成に戻してください。戻してからプレビューで動きを確かめ、もう一度ステップ 3 をやり直せます。
• 画面の表示が異なる場合は、お使いの Dify のバージョンが異なるかもしれません。序章「本書の確認環境」と公式ドキュメント（docs.dify.ai）で最新の情報を確認してください。

出典一覧

本チュートリアルの記述の根拠です（確認日は各行に記載）。

※ログイン画面の入力項目（メールアドレス・パスワード）や、組織のアカウントでのログインの有無は、上記の確認日時点の公式ドキュメントでは確認できませんでした。本チュートリアルでは断定せず、お使いの環境の案内に従う旨を記載しています。

※次の点は、公式ドキュメント（docs.dify.ai）では確認できなかったため、実機確認（確認日：2026-09-02・クラウド版）を根拠としています：アプリの作成が画面左上の「アプリを作成する」から行えること／チャットフローを「最初から作成」すると「スタート（ユーザー入力）→ LLM → 回答」の 3 ノードが接続済みで置かれること／ワークフローを選ぶとユーザー入力ノード（ユーザー入力かトリガーか）を選択する画面が出ること／実行ボタンの表示が「プレビュー」であること／LLM ノードの設定パネルの欄の表示名（AIモデル・コンテキスト・SYSTEM・USER・メモリ）と、USER に「query」が設定済みであること／SYSTEM 欄に「ここにプロンプトワードを入力してください」という案内が表示されること／ノードをつなぐ線の上やノードの端に表示される「＋」からノードを追加できること。画面の名称・構成はバージョンにより変わることがあります（序章「本書の確認環境」参照）。