[Dify]webapp-conversationでUIをカスタマイズする

みなさんこんな便利なテンプレートがあるのはご存知ですか？

これを使うことでDifyで公開しているアプリのUIをカスタマイズできます。
カスタマイズができると何がいいかというと

• 好みのUIを作成できる
• 認証をつけることができる
  などなどです。

では使ってみましょう。

テンプレートを用意

まず以下でテンプレートをクローンする

 git clone [e-mail]:langgenius/webapp-conversation.git

次に.envを作成する。Difyで公開しているアプリのAPIのID、URL、APIKeyをここに入れる

# APP ID
NEXT_PUBLIC_APP_ID=
# APP API key
NEXT_PUBLIC_APP_KEY=
# API url prefix
NEXT_PUBLIC_API_URL=

必要であればconfig/index.tsも入力しておく。私はとりあえずlanguageをenにしておきます。

export const APP_INFO: AppInfo = {
  title: 'Chat APP',
  description: '',
  copyright: '',
  privacy_policy: '',
  default_language: 'en'
}

export const isShowPrompt = true
export const promptTemplate = ''

以下で依存インストールして

npm install
# or
yarn
# or
pnpm install

以下で起動しましょう。

npm run dev
# or
yarn dev
# or
pnpm dev

そうするとhttp://localhost:3000/で開けます。

カスタマイズしてみる

たとえばこん感じで緑色にできたりします。

他にも色々できますが、今回は特にやりません。みなさん一度カスタマイズしてみてください！

（補足）dify-clientでAPI連携している

このテンプレートでDifyのAPIを実行するのにdify-clientというライブラリをつかっています。
テンプレート使わずにdify-clientで全部やってしまった方が実は楽しいかもしれませんね

最後に

Xやってるので気になる方はフォローお願いします。
https://x.com/hudebakonosoto