> ## Documentation Index
> Fetch the complete documentation index at: https://enterprise-docs.dify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 基于前端模板再开发

如果开发者是从头开发新产品或者在产品原型设计阶段，你可以使用 Dify 快速发布 AI 站点。与此同时，Dify 希望开发者能够充分自由的创造不同形式的前端应用，为此我们提供了：

* **SDK**，用于在各种语言中快速接入 Dify API
* **WebApp Template**，每种类型应用的 WebApp 开发脚手架

WebApp Template 是基于 MIT 协议开源的，你可以充分自由的修改并部署他们，以实现 Dify 的所有能力。或者作为你实现自己 App 的一份参考代码。

你可以在 GitHub 中找到这些 Template：

* [对话型应用](https://github.com/langgenius/webapp-conversation)
* [文本生成型应用](https://github.com/langgenius/webapp-text-generator)

使用 WebApp 模板最快的方法就是在 GitHub 中点击「使用这个模板」，它相当于 Fork 了一个新的仓库。随后你需要配置 Dify 的 App ID 和 API Key，类似这样：

````javascript theme={null}
export const APP_ID = ''
export const API_KEY = ''
```

More config in `config/index.ts`:
```js
export const APP_INFO: AppInfo = {
  "title": 'Chat APP',
  "description": '',
  "copyright": '',
  "privacy_policy": '',
  "default_language": 'zh-Hans'
}

export const isShowPrompt = true
export const promptTemplate = ''
````

> App ID 可以在 App 的 URL 内获取，其中的长串英文字符为唯一的 App ID。

每一种 WebApp 模板都提供了 README 文件，内含部署方式的说明。通常，WebApp 模板都包含了一个轻后端服务，这是为了确保开发者的 API KEY 不会直接暴露给用户。

这些 WebApp 模板能够帮助你快速搭建起 AI 应用原型，并使用 Dify 的所有能力。如果你基于它们开发了自己的应用或新的模板，欢迎你与我们分享。

<CardGroup cols="2">
  <Card title="编辑此页面" icon="pen-to-square" href="https://github.com/langgenius/dify-docs-mintlify/edit/main/zh-hans/guides/application-publishing/based-on-frontend-templates.mdx">
    通过直接提交修改来帮助改进文档内容
  </Card>

  <Card title="提交问题" icon="github" href="https://github.com/langgenius/dify-docs-mintlify/issues/new?title=文档问题%3A%20-on-frontend-templa&body=%23%23%20问题描述%0A%3C%21--%20请简要描述您发现的问题%20--%3E%0A%0A%23%23%20页面链接%0Ahttps%3A%2F%2Fgithub.com%2Flanggenius%2Fdify-docs-mintlify%2Fblob%2Fmain%2Fzh-hans/guides/application-publishing%2Fbased-on-frontend-templates.mdx%0A%0A%23%23%20建议修改%0A%3C%21--%20如果有具体的修改建议，请在此说明%20--%3E%0A%0A%3C%21--%20感谢您对文档质量的关注！%20--%3E">
    发现错误或有改进建议？请提交问题反馈
  </Card>
</CardGroup>