Claude Code で実現する Dify バイブコーディング

この記事は、スタンバイ Advent Calendar 2025 の18日目の記事です。

TL;DR

• Dify は GUI ベースなのでバイブコーディングしづらい
• 既存の Dify DSL（YAML）を GitHub に自動保存し、Claude Code に DSL を読ませて、自然言語からワークフローを生成
• 最初は動かなかったが、CLAUDE.md に DSL 生成ルールを追加 & 公式ワークフローテンプレートの DSL をコンテキストに渡すことで実用レベルに

はじめに

こんにちは。プロダクト部 SEO グループの伊田です。普段は、生成 AI を駆使した仕事を中心に幅広く担当しています。

最近、社内で SEO 合宿という、1泊2日で大阪に出向き、SEO に関する施策をワイワイ議論・開発するイベントがあり、その中で Dify を使ってワークフローを作る機会がありました。

Dify はノーコードで、ワークフローを作成可能な便利ツールなのですが、普段 Claude Code を使ったバイブコーディングに慣れていると、GUI でノード設定して、パラメーターを設定して...という作業をもどかしく感じる瞬間があり、「ワークフロー作成をどうにかしてバイブコーディングに落とし込めないかな？」と考えるようになりました。

この記事では、Dify でバイブコーディングを実現するまでに至るまでの一連の過程を紹介します。

最初の発見

他のツールと違い Dify のワークフローは、YAML 形式の DSL（Domain Specific Language）でインポート/エクスポートできることを知りました。

「ワークフローをコード化（DSL）できるのであれば、この DSL を使って AI にワークフローを生成させられるのでは？」

そう思い、バイブコーディングする方法を模索し始めました。

既存 DSL を Claude Code のコンテキストに含めたい

Claude Code で Dify DSL を生成するには、まず、既存の動作確認済みワークフロー全てを Claude Code にコンテキストとして読み込ませる必要があります。そのために、既存のすべての DSL を GitHub リポジトリに保存する仕組みを作ることにしました。

（こちらの仕組みは、単純に DSL のバックアップ目的及び、GUI での変更を取り込む同期目的も兼ねています）

• 日時エクスポートスクリプト

# scripts/export-workflows.py（抜粋）
def export_workflows(dify_url: str, api_key: str, output_dir: str):
    """全ワークフローをエクスポート"""

    # アプリ一覧を取得
    apps = get_apps_list(dify_url, api_key)

    for app in apps:
        app_id = app['id']
        app_name = app['name']

        # DSL をエクスポート
        dsl_content = export_app_dsl(dify_url, api_key, app_id)

        # ファイルに保存
        dir_name = sanitize_filename(app_name)
        workflow_file = Path(output_dir) / dir_name / 'workflow.yml'
        workflow_file.write_text(dsl_content)

        # メタデータも保存
        metadata = {
            'id': app_id,
            'name': app_name,
            'mode': app.get('mode', 'unknown'),
            'description': app.get('description', ''),
            # ...
        }
        metadata_file = Path(output_dir) / dir_name / 'metadata.json'
        metadata_file.write_text(json.dumps(metadata, indent=2, ensure_ascii=False))

こちらのスクリプトを GitHub Actions で定期実行することにより、Dify DSL を定期的に GitHub リポジトリに取り込むことができるようになりました。

実際にバイブコーディングしてみた

最初の挑戦

GitHub に DSL が溜まってきたので、いよいよ Claude Code でバイブコーディングを試してみました。

プロンプト

> ユーザーの問い合わせを受け取り、その問い合わせに関する社内 Confluence のドキュメントリン
クをリストアップするワークフローを Dify DSL で作成

生成された DSL を Dify にインポート...

結果：Syntax エラーで全然インポートできない！

生成された DSL を見てみると：

  # Claude Code が生成した DSL（問題あり）
  graph:
    edges:
    - data:
        sourceType: start
        targetType: llm
      id: start-to-keyword-extractor
      source: 'start'                    # ← 文字列ID
      target: 'keyword-extractor'        # ← 文字列ID
      type: custom
    nodes:
    - data:
        title: Start
        type: start
      id: 'start'                        # ← 文字列ID
    - data:
        prompt_template:
        - id: system-prompt              # ← edition_type がない
          role: system
          text: |
            あなたは...

Claude Code は「それっぽい」DSL を生成してくれますが、Dify の内部仕様を完全に把握しているわけではないため、細かいフィールドの誤りが多発しました。

【改善1】 CLAUDE.md に DSL 生成時のルールを記載

Claude Code に DSL 生成時のルールを認識してもらうために、CLAUDE.md を調整：

# Dify Workflows リポジトリ

このリポジトリは Dify ワークフローの DSL を管理しています。

## ディレクトリ構造

```
production/           # 本番環境のワークフロー
├── {app-name}/
│   ├── workflow.yml  # DSL ファイル
│   └── metadata.json # メタデータ
templates/            # Dify 公式テンプレート（参照用）
```

## Dify DSL 生成ルール

DSL を生成・編集する際は、以下のルールを厳守すること。

### 1. ノード ID
- **必ず数字の文字列**を使用する（例: `'1734567890001'`）
- ❌ `'start'`, `'llm-node'` などの文字列 ID は不可
- ✅ `'1734567890001'`, `'1734567890002'` など

### 2. Edge（接続）の必須フィールド
```yaml
edges:
- data:
    isInIteration: false  # 必須
    isInLoop: false       # 必須
    sourceType: start
    targetType: llm
  id: 1734567890001-source-1734567890002-target
  source: '1734567890001'
  sourceHandle: source
  target: '1734567890002'
  targetHandle: target
  type: custom
  zIndex: 0               # 必須
```

### 3. ノードの必須フィールド
```yaml
nodes:
- data:
    # ... ノード固有のデータ
  height: 88
  id: '1734567890001'
  position:
    x: 80
    y: 300
  positionAbsolute:       # 必須（position と同じ値）
    x: 80
    y: 300
  selected: false
  sourcePosition: right
  targetPosition: left
  type: custom
  width: 242
```

### 4. LLM ノードの prompt_template
```yaml
prompt_template:
- edition_type: basic     # 必須
  id: a1b2c3d4-e5f6-7890-abcd-ef1234567890  # UUID 形式
  role: system
  text: "プロンプト内容"
- id: b2c3d4e5-f6a7-8901-bcde-f23456789012
  role: user
  text: "{{#1734567890001.query#}}"
```

### 4.1 LLM モデル設定（AWS Bedrock / Amazon Nova）
```yaml
model:
  completion_params:
    temperature: 0.7
  mode: chat
  name: amazon nova
  provider: langgenius/bedrock/bedrock
```

### 4.2 依存関係（AWS Bedrock）
```yaml
dependencies:
- current_identifier: null
  type: marketplace
  value:
    marketplace_plugin_unique_identifier: langgenius/bedrock:0.0.49@8bca05c0cfdbc60cc824b18410dea65ad6e1303099bcaa768a9de20971e3eaf4
    version: null
```

### 5. LLM ノードの追加必須フィールド
```yaml
structured_output_enabled: false  # 必須
vision:
  enabled: false                  # 必須
```

### 6. 変数参照の形式
- `{{#ノードID.変数名#}}` の形式を使用
- 例: `{{#1734567890001.query#}}`

### 7. 参照すべきテンプレート
新しい DSL を生成する前に、`templates/` ディレクトリ内の公式テンプレートを参照すること。
特に使用するノードタイプに近いテンプレートを確認する。

【改善2】 公式ワークフローテンプレートもコンテキストに追加

また、Dify には、公式のワークフローテンプレートが用意されています。これらは：

• 正しい DSL 形式で書かれている
• 様々なノードタイプを網羅している
• ベストプラクティスが詰まっている

このような特徴を持つため、コンテキストに追加すれば、さらに精度が上がるはずです
ということで、リポジトリにいくつかワークフローテンプレートの DSL を追加してみました。

Dify ワークフローテンプレート一覧

再挑戦

プロンプト

> ユーザーの問い合わせを受け取り、その問い合わせに関する社内 Confluence のドキュメントリン
クをリストアップするワークフローを Dify DSL で作成

作成された DSL を Dify にインポート...

結果：一発でインポート成功！

動作確認してみます

数回のトライアンドエラーの後に、うごきました！
ちゃんと与えたキーワードに関連する社内ドキュメントが取得できています！
内容も良さそうです！

まとめ

結論

Dify × Claude Code でバイブコーディングは可能！

ただし、以下が必要：

• DSL の Git 管理基盤
• CLAUDE.md での形式ルール明文化
• 公式ワークフローテンプレートの DSL をコンテキストに投入

GUI でポチポチする時代から、「〇〇作って」で AI がワークフローを生成する時代へ。
ぜひ試してみてください！!