# 项目简介

**Dify App Hub**，一个基于 Dify API 的 AI Web 应用，提供开箱即用的应用配置管理功能，支持运行不同类型的 Dify 应用，适配深度思考、思维链、图表等多种丰富的输出形式。

如果你觉得这个项目还不错的话，请动动你的小手指点个 Star ⭐️ 吧～

![Dify App Hub](/banner.png)

## 为什么选择 Dify App Hub

如果需要使用 Dify, 但官方 Web 应用的功能不满足需求，或者需要自定义界面，你会怎么选？

- 在源码上二开？如果你后续有对 Dify 进行升级的需求，那么每次升级时的代码合并都会让你心力交瘁
- 基于官方模板二开？模板中提供的功能早已过时，完全无法跟上 Dify 最新版本的功能
- 由于以上两者都是基于 Next.js 构建，且没有针对 Turbopack 优化，非常吃内存，热更速度慢。所以你可能会选择自己从零开始。但是为了复刻官方 Web 应用的功能，你可能需要花费大量的时间和精力。

Dify App Hub 围绕以下几个关键特性进行设计：

- **开箱即用**
- **完全开源**
- **灵活架构**
- **主题定制**
- **响应式设计**
- **丰富的内容支持**

### 开箱即用

仅需一个命令即可完成所有安装和启动工作，无需复杂配置。你要做的只是：运行启动命令，填入 Dify API Key，直接开始使用。

### 完全开源

Dify App Hub 采用 MIT 开源协议，所有源代码完全开放。你可以：

- **Fork 仓库**：在 GitHub 上 Fork 原仓库，获得完整的项目代码
- **自由修改**：根据业务需求修改界面、添加新功能或优化现有逻辑
- **二次开发**：基于现有架构进行深度定制，打造专属的 AI 应用平台
- **贡献代码**：将改进的功能通过 Pull Request 回馈社区，帮助项目持续完善

### 灵活架构

Dify App Hub 是一个基于 Next.js App Router 的全栈应用，集成了应用配置管理、用户认证、Dify API 代理等功能：

- **用户端**：提供直接与 Dify 应用交互的聊天界面，支持 Chatflow、Workflow 等多种应用类型
- **管理端**：提供应用配置的增删改查、用户管理等功能，适合对安全性、稳定性要求更高的场景

两者共享同一套代码和部署，无需额外的服务拆分。

### 主题定制

Dify App Hub 基于 TailwindCSS 和 Ant Design 构建，提供了灵活的主题定制能力，让你可以根据品牌需求或个人喜好轻松调整界面风格。

### 响应式设计

Dify App Hub 采用响应式设计理念，支持桌面端、平板和移动设备访问，确保在不同屏幕尺寸下都能提供一致的用户体验和功能表现

### 丰富的内容支持

Dify App Hub 支持多种内容类型的渲染，让 AI 的回复更加生动和实用：

**图片和视频渲染**：支持渲染图片和视频内容，在进行内容表达时，丰富多彩的图片和动态视频往往比文字更加深入人心，特别适合教程、演示等场景。

**代码高亮**：内置代码语法高亮功能，支持多种编程语言，让代码展示更加清晰易读，提升开发者的使用体验。

**图表可视化**：支持各种类型的图表渲染，如 Mermaid、Echarts 等，帮助用户更好地理解和分析数据。

**交互式元素**：支持表单等交互组件，让用户可以直接在对话界面中执行操作，提升交互效率。

丰富的内容支持让你可以在 Dify 应用中进行任意编排，以最适合的方式表达信息，无论是技术文档、数据分析报告，还是创意内容创作，都能得到最佳的展示效果。

## 技术栈

- React v19
- Next.js v16 (App Router)
- Drizzle ORM + MySQL
- Ant Design v6
- Ant Design X v2
- Tailwind CSS v4
- TypeScript v5
- pnpm v10
