langgenius / webapp-conversation

Dify Cloud · Self-hosting · Documentation · Enterprise inquiry

Dify is an open-source LLM app development platform. Its intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production. Here's a list of the core features:

1. Workflow: Build and test powerful AI workflows on a visual canvas, leveraging all the following features and beyond.

optimized_workflow_intro.mp4

2. Comprehensive model support: Seamless integration with hundreds of proprietary / open-source LLMs from dozens of inference providers and self-hosted solutions, covering GPT, Mistral, Llama3, and any OpenAI API-compatible models. A full list of supported model providers can be found here.

3. Prompt IDE: Intuitive interface for crafting prompts, comparing model performance, and adding additional features such as text-to-speech to a chat-based app.

4. RAG Pipeline: Extensive RAG capabilities that cover everything from document ingestion to retrieval, with out-of-box support for text extraction from PDFs, PPTs, and other common document formats.

5. Agent capabilities: You can define agents based on LLM Function Calling or ReAct, and add pre-built or custom tools for the agent. Dify provides 50+ built-in tools for AI agents, such as Google Search, DALL·E, Stable Diffusion and WolframAlpha.

6. LLMOps: Monitor and analyze application logs and performance over time. You could continuously improve prompts, datasets, and models based on production data and annotations.

7. Backend-as-a-Service: All of Dify's offerings come with corresponding APIs, so you could effortlessly integrate Dify into your own business logic.

Feature comparison

Feature	Dify.AI	LangChain	Flowise	OpenAI Assistants API
Programming Approach	API + App-oriented	Python Code	App-oriented	API-oriented
Supported LLMs	Rich Variety	Rich Variety	Rich Variety	OpenAI-only
RAG Engine	✅	✅	✅	✅
Agent	✅	✅	❌	✅
Workflow	✅	❌	✅	❌
Observability	✅	✅	❌	❌
Enterprise Features (SSO/Access control)	✅	❌	❌	❌
Local Deployment	✅	✅	✅	❌

Using Dify

• Cloud
  We host a Dify Cloud service for anyone to try with zero setup. It provides all the capabilities of the self-deployed version, and includes 200 free GPT-4 calls in the sandbox plan.

• Self-hosting Dify Community Edition
  Quickly get Dify running in your environment with this starter guide. Use our documentation for further references and more in-depth instructions.

• Dify for enterprise / organizations
  We provide additional enterprise-centric features. Log your questions for us through this chatbot or send us an email to discuss enterprise needs.
  

  For startups and small businesses using AWS, check out Dify Premium on AWS Marketplace and deploy it to your own AWS VPC with one-click. It's an affordable AMI offering with the option to create apps with custom logo and branding.

Staying ahead

Star Dify on GitHub and be instantly notified of new releases.

Quick start

Before installing Dify, make sure your machine meets the following minimum system requirements:

• CPU >= 2 Core
• RAM >= 4GB

The easiest way to start the Dify server is to run our docker-compose.yml file. Before running the installation command, make sure that Docker and Docker Compose are installed on your machine:

cd docker
cp .env.example .env
docker compose up -d

After running, you can access the Dify dashboard in your browser at http://localhost/install and start the initialization process.

If you'd like to contribute to Dify or do additional development, refer to our guide to deploying from source code

Next steps

If you need to customize the configuration, please refer to the comments in our .env.example file and update the corresponding values in your .env file. Additionally, you might need to make adjustments to the docker-compose.yaml file itself, such as changing image versions, port mappings, or volume mounts, based on your specific deployment environment and requirements. After making any changes, please re-run docker-compose up -d. You can find the full list of available environment variables here.

If you'd like to configure a highly-available setup, there are community-contributed Helm Charts and YAML files which allow Dify to be deployed on Kubernetes.

• Helm Chart by @LeoQuote
• Helm Chart by @BorisPolonsky
• YAML file by @Winson-030

Using Terraform for Deployment

Azure Global

Deploy Dify to Azure with a single click using terraform.

• Azure Terraform by @nikawang

Contributing

For those who'd like to contribute code, see our Contribution Guide. At the same time, please consider supporting Dify by sharing it on social media and at events and conferences.

We are looking for contributors to help with translating Dify to languages other than Mandarin or English. If you are interested in helping, please see the i18n README for more information, and leave us a comment in the global-users channel of our Discord Community Server.

Contributors

Community & contact

• Github Discussion. Best for: sharing feedback and asking questions.
• GitHub Issues. Best for: bugs you encounter using Dify.AI, and feature proposals. See our Contribution Guide.
• Discord. Best for: sharing your applications and hanging out with the community.
• Twitter. Best for: sharing your applications and hanging out with the community.

Star history

Security disclosure

To protect your privacy, please avoid posting security issues on GitHub. Instead, send your questions to [email protected] and we will provide you with a more detailed answer.

License

This repository is available under the Dify Open Source License, which is essentially Apache 2.0 with a few additional restrictions.

webapp-conversation's Issues

请问如何将此应用编译成静态网页，使用客户端渲染？

我想要将此应用编译成一个静态的网页，去掉其原有的 api，使用自己的后端 api 替代。

这样前端就无需发送 app_id 和 api_key，这些信息保存在自己的后端服务器，根据后端设置决定是否允许前端请求。

但如果我在 next.config.js 中加上 output: 'export' 后，npx run build 报错：

Build error occurred
Error: Page "/api/conversations/[conversationId]/name" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

去掉 app/api 目录后，编译还是报错：
Generating static pages (0/4) [== ]a [Error]: Page with dynamic = "error" couldn't be rendered statically because it used cookies.

能否指导一下这个需求如何实现？谢谢。

Can I customize the embedded chat app？

Everything is perfect especially the embedded chat app, but if I customize the web app, I still have no idea how to embedded it on my website.

How to change lanague

I deplopyed webapp using this and it seems to be in chinese.

local api 404 || 本地部分接口404

需要nextjs转发

Coding Error - Word Case

code file=关联文件

const openstatement = {
      id: `${Date.now()}`,
      content: calculatedIntroduction,
      isAnswer: true,
      feedbackDisabled: true,
      isOpeningStatement: isShowPrompt,
    }
    if (calculatedIntroduction)
      return [openStatement]   //  do u mean openstatement
```

启动后打开http://localhost:3000报错

系统: macos(12.2.1)
nodejs: v18.17.1
浏览器: chrome最新
npm install后npm run dev报错:

没有语音转文本的按钮

如题，部署模板里没有语音转文本的按钮

Issue with JSON on Vercel

Hello,

When pushing the repo to vercel I can type a chat message, seldom it does deliever an answer and mostly an JSON error appears:

"SyntaxError: Unterminated string in JSON at position 129"

This error always pops up when I want to type something, why is that so? Please help me.

删除会话的功能还是无法使用

删除会话的功能还是无法使用

# Feature Request: Display Opening Questions in UI

Feature Request: Display Opening Questions in UI

Description

Currently, the front-end application using Next.js does not display the opening questions that are provided by the backend as JSON. While the opening text message is displayed correctly, the buttons for the opening questions are not present in the UI, even though they exist in the JSON data.

Expected Behavior

The UI should display the opening question buttons as provided in the JSON data from the backend. Each button should be clickable and should function according to the logic defined in the application.

Actual Behavior

The UI currently displays only the opening text message. The opening question buttons, though present in the JSON data, are not visible or interactive in the UI.

JSON Data Example

Here is an example of the JSON data received from the backend:

//Response of route http://localhost:3000/api/parameters
{...
suggested_questions: [
    "ХЗТТ-д ямар хүн үйлчлүүлэх боломжтой вэ?",
    "ХЗТТ гэж юу вэ?",
    "ХЗТТ нь ямар үйлчилгээ үзүүлдэг вэ?",
    "Холбоо барих мэдээлэл",
    "Салбаруудын жагсаалт харах"
]
...}

Steps to Reproduce

1. Configure dify backend endpoint, secret keys
2. Launch the front-end application.
3. Start new conversation
4. Observe the opening text message displayed in the UI.
5. Check the JSON response from the backend and notice the presence of opening questions.
6. Observe that the opening question buttons are not displayed in the UI.

Proposed Solution

Modify the front-end code to render the opening question buttons as specified in the JSON data. Each button should be styled consistently with the rest of the UI and should be clickable, triggering the appropriate actions.

Additional Information

Framework: Next.js
Issue Found in Version: [0.1.0]
Browser: [Microsoft Edge]

throw this error when build after add Environment Variables in vercel

网站聊天没回应，但dify日志能看到回应

在vercel部署的网站聊天经常没回应，但在dify的日志里却能看到生成的对话，不知道哪里出问题了。vercel的log如下：

RangeError: Incorrect locale information provided
at Intl.getCanonicalLocales ()
at CanonicalizeLocaleList (/var/task/.next/server/chunks/183.js:60105:17)
at match (/var/task/.next/server/chunks/183.js:60365:108)
at getLocaleOnServer (/var/task/.next/server/app/page.js:359:63)
at LocaleLayout (/var/task/.next/server/app/page.js:373:20)
at X (/var/task/.next/server/chunks/183.js:61941:13)
at Na (/var/task/.next/server/chunks/183.js:62109:21)
at Array.toJSON (/var/task/.next/server/chunks/183.js:61869:20)
at stringify ()
at da (/var/task/.next/server/chunks/183.js:61383:9)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '2702072224'
}

Security Issue: Internal API URL and Token exposed in client code.

Currently the env APP_URL is getting exposed directly on client side because webpack adds it to the bundle. This is an issue because it exposed information about internal infrastructure and even the token for acessing the API directly.

Has anyone encountered a GET/serviceWorker.js 404 issue?

Problem description

When I call APIs on the public network, although the terminal still reports an error GET /serviceWorker.js 404 in 102ms, this project is usable.
When I deployed Dify on the company's intranet and called the API, the terminal reported an error GET/serviceWorker. js 404 in 102ms and the browser displayed a 500 App is unavailable error.

Error displayed on the terminal

Attempt to solve

When I deployed Dify on the company's intranet and called the API,I printed error messages.


I shut down my proxy server and firewall, but it didn't work.

And I tried testing the '/v1/chat messages' and' v1/conversion 'interfaces in Apifox and everything went smoothly, but when it came to the browser, it showed a 500 App is unavailable error.

There was no error message on the console. I checked the network option and found that the responses for all four interfaces were empty data.

Can anyone who has encountered this problem help me?I don't know how to fix it.

Local environment configuration

Node.js: 20.9.0
OS: Windows_NT x64 10.0.19045

本地运行出错，需要自己手动修改依赖的引入

error - ./node_modules/.pnpm/[email protected][email protected]/node_modules/ahooks/lib/utils/lodash-polyfill.js:14:0
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

类似这样的错误，在install包之后，本地开始运行npm run dev就会出现。

举个例子, 其中底层是引用的lodash-es 库，比如node_modules.pnpm\[email protected][email protected]\node_modules\ahooks\lib\useReactive\index.js。这里引用了var _lodashEs = require("lodash-es");

这里会报错，报错原因和解决方式参考这个链接：
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. 官方解决

也就是require改为import。

还是不推荐开发者在下好依赖，还要手动修改依赖。期望修复或者有其他建议。

Embedding in an Iframe is not possible

The standard dify-web docker container allows to embed the Chatbot in an Iframe on a website.
As I needed to customize the frontend, I followed the instructions and deployed the webapp-conversations frontend on vercel.
It runs perfectly when I open the Vercel URL directly. As soon as I embed it into an Iframe, I always get the error, that the chatbot is still responding, when I try to send a second message.

Already tested:

• Using a Reverseproxy in front of Vercel
• Using Browser Dev Tools to find possible CORS Errors ect.
• Using other Browsers: Chrome, Safari -> Not working, Firefox-> Working

开场白的开场问题不显示

部署到Vercel上处于不可用的状态

填入了 API, ID KEY URL, 要么返回json错误, 要么直接504

500 App is unavailable

I've set the correct .env.local file correctly and after I run npm run dev
I got a 500 App is unavailable error on the localhost:3000.
I'm not sure where I went wrong with the configuration.
Can I see any logs?

ReferenceError: AbortSignal is not defined

next start -p 4000

ready - started server on 0.0.0.0:4000, url: http://localhost:4000
info  - Loaded env from /Users/macbook/Desktop/arthrv.com/arthrv/.env.local
ReferenceError: AbortSignal is not defined
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/request.js (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:7430:7)
    at __require (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:14:50)
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/index.js (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:7813:46)
    at __require (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:14:50)
    at Object.<anonymous> (/Users/macbook/Desktop/arthrv.com/arthrv/node_modules/next/dist/compiled/@edge-runtime/primitives/fetch.js:11638:28)

question: is this repo just a mirror of the main dify repo?

in the main repo, there is a sub-folder

https://github.com/langgenius/dify/tree/main/web

is the repo just a mirror? which one is more up-to-date?

代码是2个月前的 需要更新到最新代码

代码是2个月前的 需要更新到最新代码与在线界面保持一致

欢迎语出不来

返回一个[]，展示不出来第一句的欢迎语

无法对话，对话有错误提示。

错误提示：TypeError: Cannot read properties of undefined (reading 'replace)

Bot Replies Not Displaying

When deploying on Vercel, there is no reply from the bot. When I reload, the reply is displayed, and the following error appears in Vercel's logs:

    at consumeUint8ArrayReadableStream (/var/task/node_modules/next/dist/compiled/edge-runtime/index.js:1:15045)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async sendResponse (/var/task/node_modules/next/dist/server/send-response.js:42:34)
    at async doRender (/var/task/node_modules/next/dist/server/base-server.js:968:25)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/var/task/node_modules/next/dist/server/base-server.js:1159:28)
    at async /var/task/node_modules/next/dist/server/response-cache/index.js:99:36```

Cannot remove workflow and node information to be sent to the frontend.

Currently there is no option to eat the node/workflow events from getting to the frontend.

It is possible to use this webapp with an external application ?

It is possible to use this webapp with an external application ?. If so, any pointer is appreciated.

All i need is to send the incoming message to the external app as a webhook and receive messages from the external app via an api call ?

Thanks in advance

"500 App is unavailable" when fetching empty conversations

I pulled the repository to my local machine and set the required environment variables. After I started the project with
npm run dev
It starts and all the requests are 200 OK, but the whole screen is a big 500 App is unavailable.
I reversed engineered the issue and it seems this is happening due to an empty body of /conversations/ API request. Attaching screenshots with error, error logging and potential source of problem.





Screenshots show that the error is raised here:
const isNotNewConversation = conversations.some(item => item.id === _conversationId)
But gets muted and instead setAppUnavailable() is called.
The error reads "TypeError: Cannot read properties of undefined (reading 'some')
at eval (index.tsx:228:52)" meaning the supposed list conversations is undefined at the moment.

能否添加用户名和密码登陆

没有用户名和密码登陆，不敢对外开放给同事使用（只能公司内部），希望能添加多用户的功能，比如使用sqlite数据库。 还有一个疑问，要是dify 后端创建了2个APP应用，难道就需要运行2个webapp-conversation 程序，开2个网站吗？ 谢谢。

Change theme

How can i change the theme of the webapp in general?

Something wrong with locale?

Docker deployed，when APP is running， the error reporting on background

RangeError: Incorrect locale information provided
at Intl.getCanonicalLocales ()
at CanonicalizeLocaleList (/app/.next/server/chunks/757.js:60105:17)
at match (/app/.next/server/chunks/757.js:60365:108)
at getLocaleOnServer (/app/.next/server/app/page.js:359:63)
at LocaleLayout (/app/.next/server/app/page.js:373:20)
at X (/app/.next/server/chunks/757.js:61941:13)
at Na (/app/.next/server/chunks/757.js:62109:21)
at Array.toJSON (/app/.next/server/chunks/757.js:61869:20)
at stringify ()
at da (/app/.next/server/chunks/757.js:61383:9)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '4288037568'

SyntaxError: Unterminated string in JSON at position 135

SyntaxError: Unterminated string in JSON at position 135；对话的时候一直出现这个错误，然后对话终止。

local run error, /app/api/messages/ missing conversation_id

Can anyone help? Thank you very much!

(Vercel is ok.)

error - AxiosError: Request failed with status code 400
at settle (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:1628:16)
at IncomingMessage.handleStreamEnd (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:2506:21)
at IncomingMessage.emit (node:events:531:35)
at endReadableNT (node:internal/streams/readable:1696:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
at Axios.request (webpack-internal:///(sc_server)/./node_modules/axios/dist/node/axios.cjs:3148:49)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ChatClient.sendRequest (webpack-internal:///(sc_server)/./node_modules/dify-client/index.js:78:24)
at async GET (webpack-internal:///(sc_server)/./app/api/messages/route.ts:13:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37) {

data: {
  code: 'invalid_param',
  message: 'Missing required parameter in the query string',
  params: 'conversation_id'
}

it seems the onData() in handleSend in index.tsx is not triggered when locally deployed.

开场问题没展示出来啊，看了看代码也没找到

App is unavailable

It shown 500 | App is unavailable error on first time run, no error occured on console log, what happen

如何获取 API_KEY

generationConversationName接口怎么使用？

export const generationConversationName = async (id: string) => {
return post(conversations/${id}/name, { body: { auto_generate: true } })
}

这个是这个接口原本的样子，现在我想根据传递的name属性，去更改会话列表， 我在参数和body里面加了name，但是不好使啊，求助大佬 这是怎么回事啊

请问.env.local的这些参数是分别那个创建的应用的appid和apikey还有api地址吗

Support Multiple apps.

It would be nice if the app could support multiple applications

无法对话 一直报错 刷新后能看到响应内容

error - TypeError: This ReadableStream did not return bytes.