🐙

Dify APIを使ったフロントエンドを作ってみた

に公開
AI
API
Dify
Vibe Coding
tech

Dify APIでフロントエンドを作ってみた

イントロダクション

「AI で作ったチャットボットを自分のサイトに埋め込みたい」って思った瞬間、Dify の API が目に留まった。公式ドキュメントは結構分かりやすいし、Next.js でサクッと動かせる例があったから、すぐに手を動かすことにした。結果、10 分ほどで「質問すると返答が返ってくる」シンプルな UI が完成したので、その手順とちょっとした失敗談を共有する。

1. 環境構築と API キーの取得

  • Dify のコンソールでアプリを作成し、左メニューの「APIキー」から Public API Key をコピー。
  • プロジェクトは Next.js (create-next-app) で作成。npx create-next-app dify-demo でフォルダができたら、cd dify-demo。
  • 環境変数は .env.local に NEXT_PUBLIC_DIFY_API_KEY=取得したキー と書く。
    • ここで NEXT_PUBLIC_ を付け忘れるとクライアント側からキーが参照できず、リクエストが 401 になるので要注意。

2. API 呼び出しの実装

pages/index.tsx に以下の流れでコードを書いた。

import { useState } from 'react';

export default function Home() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');

  const fetchAnswer = async () => {
    const res = await fetch('https://api.dify.ai/v1/chat-messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.NEXT_PUBLIC_DIFY_API_KEY}`,
      },
      body: JSON.stringify({
        inputs: { query: question },
        response_mode: 'blocking', // すぐに結果が欲しいときは blocking
      }),
    });
    const data = await res.json();
    setAnswer(data.answer);
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Dify Chat Demo</h1>
      <input
        type="text"
        placeholder="質問を入力"
        value={question}
        onChange={e => setQuestion(e.target.value)}
      />
      <button onClick={fetchAnswer}>送信</button>
      {answer && <p>回答: {answer}</p>}
    </div>
  );
}
  • ポイント: response_mode に blocking を指定すると、API が完了するまで待ってくれるのでフロントだけで完結できる。
  • 失敗例: inputs のキーを question にしてしまい、API が { "question": "..." } を受け取れずエラーになった。公式サンプル通り inputs: { query: ... } にすれば解決。

3. UI と体感的な改善

最初はただのテキストボックスとボタンだったが、以下の小さな工夫で見た目がぐんと良くなった。

  • Loading 表示: fetchAnswer の前に setLoading(true)、完了後に setLoading(false)。ボタンを disabled にすると二重送信防止。
  • エラーハンドリング: if (!res.ok) throw new Error('API error') で例外を捕捉し、画面にエラーメッセージを出す。
  • スタイリング: CSS モジュールで button にホバー時の色変化を付けたら、使い勝手が向上した。

4. デプロイまでの流れ

ローカルで動作確認できたら、Vercel に GitHub リポジトリを連携。

  • ビルド時に .env.local の内容は自動で環境変数に変換されるので、Vercel のダッシュボードで NEXT_PUBLIC_DIFY_API_KEY を同じ値で設定すれば OK。
  • デプロイ完了後、実際にスマホでアクセスしてみると、PC と同じく質問できるのが意外に爽快だった。

まとめ

Dify API はシンプルな HTTP POST だけでチャット機能を呼び出せるので、フロントエンドの経験が浅くてもすぐに体験できる。今回のポイントは

  1. API キーのスコープ（NEXT_PUBLIC_ を付ける）
  2. リクエストペイロード（inputs: { query: ... }）
  3. ブロッキングモードで即時表示

だ。次は「会話履歴をローカルに保持」したり、Streaming モードでリアルタイムに文字が流れるようにしたりすると、さらに面白くなるはず。

今すぐできる一歩

  1. 公式ドキュメントの「Getting Started」セクションを開く
  2. npm i next react react-dom でプロジェクトを作り、上記コードを貼り付ける
  3. npm run dev でローカルサーバーを起動し、質問してみる

小さな成功体験が次の挑戦、まずは手を動かしてみよう。明日からは自分だけの AI アシスタントをサイトに埋め込んで、友達に自慢できるかもしれない。頑張れ！

Discussion