DifyをAIが操作する【中小企業のAI活用実践塾 #5】

前回Difyで作った中小企業相談チャットボットを、今回はClaude Codeでカスタマイズしていきます。まずはDify標準の埋め込み機能でWordPressサイトに設置して動きを確認したあと、「入力欄を大きくしたい」「社内向けにアプリ集を作りたい」といったニーズに応えるため、Claude Codeにオリジナルのフロントエンド（見た目）を作ってもらいました。 途中では、APIキーをフロントに置かずバックエンド（PHP）や環境変数で管理する考え方、Geminiのジェム＋ノートブック連携でナレッジ付きボットを作る方法との違いも紹介。完成したファイルはFTPでレンタルサーバーに上げ、ブラウザのコンソール（F12）を使ったエラー調査を経て、実際に動くところまでお見せしています。 後半では、DifyのDSL（YAMLファイル）をエクスポートしてClaude Codeに渡すと、質問の振り分けやナレッジ検索を含むノード構成そのものを自動で作ってくれる、という最近できるようになったワークフローも実演しました。 ※Claude Codeは、ターミナルから自然言語で指示してコードの生成・編集・デバッグができるAnthropic製のAIコーディングツールです。 動画では、実際に画面を見せながら次の流れを実演しています： ・前回作ったDifyチャットボット（中小企業相談＋ナレッジ検索）のおさらい ・Difyの埋め込みコードをWordPressに貼って動作テスト ・Claude Codeに依頼してDify接続用のオリジナルUI（フロントエンド）を作成 ・APIキーの安全な保存方法（フロントに置かない・バックエンド／環境変数で管理） ・Geminiのジェム＋ノートブック連携との違いを比較 ・DifyのAPIキーとURLを取得してフロントエンドと接続 ・PHPバックエンドをFTPでレンタルサーバーにアップロード ・ブラウザコンソール（F12）を使ってエラーを調査し、動作するまで修正 ・DifyのDSL（YAML）をエクスポート→Claude Codeにノード構成を自動生成させてインポート 【目次】 0:00 オープニング 0:23 前回のおさらい：Difyボット 2:11 公開してサイトに埋め込み 6:01 Claude CodeでUIを自作 8:14 APIキーの安全な扱い方 13:10 Geminiのジェムとの比較 21:27 DifyのAPIキー取得と接続 30:59 FTPでサーバーへアップ 33:24 エラー調査から動作確認まで 42:41 Difyのノードも自動生成 ――――――――――― 毎週水曜 19:00〜 ライブ配信中。1回1テーマでお届けします。 ライブにご参加いただいた方には、配信後に質問タイムを設けています。ぜひご参加ください。 #ClaudeCode #Dify #チャットボット #ノーコード #AI活用 #中小企業 #生成AI #業務効率化 #Gemini #RAG