# Dify で使える実装Tips集

## Dify で使える実装Tips集

## はじめに

デジタルヒューマンとDify.ai（オープンソース版を含む）との接続で利用可能な機能について記載しています。

### 多言語対応

Difyの多言語対応は、Chatflowの初期パラメータを設定することで実現できます。

#### 設定手順

![](/files/2TS1XHM6ZztOJ8ANdg7X)

1. DifyのChatflowで初期パラメータ`lang`を設定します。`lang`パラメータをChatflowの入力フィールドに設定すると、[音声認識時に検出された言語コード](https://gitlab.digitalhumans.jp/docs/docs-digitalhumansjp/-/blob/main/development/README.md#speechrecognitionlocales)がデジタルヒューマン プラットフォームから自動的に渡されます。

![](/files/pGjBzXB97VxYCVkOVliK)

1. LLMのプロンプトで`lang`パラメータを挿入することで、応答する言語を制御できます。

### instructions生成

デジタルヒューマンのコンポーネントを制御するために、LLMにinstructions構文を生成させ、これをフロントエンドへデータとして渡して処理を行います。

#### **instructinos構文とは**

LLMに特定の文字列を出力させることで、Difyプロファイルでinstructionsとして解釈できる構文を生成できます。

```jsx
@{instructions-start}<instructions-json>@{instructions-end}
```

`<instructions-json>`に実際のJSONを生成させるように指示します。

#### **instructions構文の制約条件**

1. ストリーミング接続を使用している場合、構文内で区切り文字列を使うことはできません。区切り文字列を生成すると、その時点で発話要求が実行されてしまうため、区切り文字を含まないようにプロンプトで適切に制御する必要があります。
2. 構文の開始（`@{instructions-start}`）と構文の終了（`@{instructions-end}`）は、必ず正確にこれらの文字列を使用して生成してください。
3. `<instructions-json>`が有効なJSONとして解析できない場合、画面表示は行われません。

{% hint style="warning" %}
その他の推奨事項

・画面表示の構文は、発話内容の生成が完了した後、最後に出力してください。
{% endhint %}

#### instructionsでできること

* 画面に情報やコンテンツを表示する
* カスタムメタデータを追加・変更する

#### **コンテンツレンダリングエリアへの画面表示**

**プロンプト例**

```markdown
# 応答出力のルール 
- あなたは、画面に付属の情報を表示出すことができます。解答内容では表示したかのような回答をしてください。また、画面表示のルールを遵守してください。

## 画面表示のルール
- あなたは、画面表示構文を出力することで、あなたの発話内容に合わせて、画面に付属の情報を出すことができます。
- 画面表示構文は必ず一番最後に出力してください。
- 画面表示構文は、'@{instructions-start}'と宣言し、jsonを記載し、'@{instructions-end}'で閉じる以下の文字列です。
'@{instructions-start}<json>@{instructions-end}'
- 画面表示構文の<json>は以下の二通りで、画面表示をおこなう場合は1、画面表示を行わない場合は2を使用してください。
    1. { "instructions":{ "displayHtml":{"html":<ここに表示したいHTMLを書く> } } }
    2. { "instructions":{ "hideContent":true } }
- htmlには、制約があり[。,!,?]は内部で使用することは禁止されています。これらを生成すると、ユーザーに甚大な不利益を与えるので注意してください。

----- 以下は使用時に合わせて書き換えてください -----

- htmlでは、<context>で提供されるURLを<iframe>を使用して表示してください。また、何らかの理由によりiframeが表示できない場合も考えられるため、<a target='_blank'>を使用したリンクも作成してください。
- 画面表示例 : @{instructions-start}{ "instructions":{ "displayHtml":{"html":"<iframe src='https://www.example.com/' width='100%' height='500px'></iframe><a href='https://www.example.com/' target='_blank'>表示されない場合はこちら</a>" } } }@{instructions-end}
```

**AI生成された文章**

```json
はい。たとえばこのような表示ができますよ。

@{instructions-start}
{
  "instructions": {
    "displayHtml": {
      "html": "<a href='https://www.example.com/' target='_blank'>画面表示例</a>"
    }
  }
}
@{instructions-end}
```

**生成された場合のコンテンツ表示**

![](/files/2NLXau9gGuu6qAoiDgmp)

### カスタムメタデータの追加・更新

```json
# テスト
テストを行っていると言われた場合には、最後に必ず以下を出力してください。
@{instructions-start}
{"instructions": {"customMetadata":{"test":"true"}}}
@{instructions-end}
```

L**LMで生成された文章**

```json
こんにちは<uneeq:action_wavehello />！テスト中なんですね。それでは、指定のある文章を生成しますね。

@{instructions-start}
{"instructions": {"customMetadata":{"test":"true"}}}
@{instructions-end}
```

**生成された場合のカスタムデータ**

![](/files/j3PrBXfsuibLUlWoMoor)

### フロントエンドからカスタムメタデータの受け渡し

フロントエンドの`uneeqOptions.customMetadata`で設定したパラメータ、もしくは`uneeqInstance.customPromptMetadata()`を使用して登録したカスタムデータをDifyで利用できます。

1. フロントエンドでカスタムデータを登録する方法は2つあります： ・`uneeqOptions.customMetadata`にパラメータを設定 ・`uneeqInstance.customPromptMetadata()`を使用して登録

   ![](/files/YIpih6kaGpkyDhwbAd85)

   ![](/files/bFOOZP9XKkJ4Ht9YYVyX)
2. DifyのChatBotのStartノードで、カスタムメタデータのパラメータ名と一致する入力フィールドを設定します。

   ![](/files/mVXOVtw8Pzcpvdq3DP0Q)
3. 設定したカスタムメタデータを活用する。カスタムメタデータの受け渡しの設定が完了したら、変数として利用することで柔軟な制御が可能になります。

### サジェスト機能

デジタルヒューマンのフロントエンドにDifyのサジェステッドレスポンスを表示します。

#### 設定方法

1. フォローアップ機能設定

   botのOrchestrate画面より、右上の`機能`ボタンから「フォローアップ」機能を有効にします。

   ![](/files/Ka7auC13exWt0rjc6Vf6)
2. DIPのNLPアカウント画面で、サジェステッドレスポンスの表示方法（[`from_quick_reply_to_suggested_response`](https://gitlab.digitalhumans.jp/docs/docs-digitalhumansjp/-/blob/main/settings/README.md#fromquickreplytosuggestedresponse)）を指定します。

   ![スクリーンショット 2026-01-08 14.37.09.png](/files/hQxkp1O89vqVNfx764lN)

### VISION機能

Difyの画像アップロード機能とdhkk.jsで提供されるStillcam機能を利用することで、LLM画像認識を可能にします。

Difyの画像アップロード機能とdhx.jsで提供されるstillcam機能を利用することで、LLM画像認識を可能にします。

#### 設定方法

1. 画像アップロード機能設定

   botのOrchestrate画面より、右上の`機能`ボタンから「ファイルアップロード」機能（画像）を有効にします。

![スクリーンショット 2025-12-25 15.22.53.png](/files/v7vy1HEkl6by7HwH6RFA)

1. LLM設定

   使用するLLMモデルをVisionに対応しているモデルに設定・Vision機能を有効化します。

   ![スクリーンショット 2025-12-25 15.31.57.png](/files/nR9eySHQmHKHxBnof0Qb)

   ![スクリーンショット 2025-12-25 15.32.59.png](/files/qZkajjcPMxr0llAXGODX)
2. フロントエンド（`dhxOptions.stillcam`）設定

   ```jsx
   dhxOptions = {
   	...
   	stillcam: true,
   }
   ```

#### Vision使用時のサンプルプロンプト

```jsx
# 視覚認識機能
## 基本方針
画像提供時は、Webカメラでユーザーを直接見ているように自然に反応してください。

## 自然な反応例
- 「その青いシャツ<uneeq:action_thumbsup />、素敵ですね<uneeq:emotion_joy_normal />」
- 「眼鏡をかけていらっしゃるんですね<uneeq:action_understandnod />」
- 「明るいお部屋ですね<uneeq:emotion_joy_weak />」

## 避けるべき表現
- 「画像を見ると」「写真から読み取ると」
- 「送られた画像では」「画像分析の結果」
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalhumans.jp/ops/chatbot-integration/dify-implementation-tips.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.