本节课代码：

https://github.com/AI-FE/private-bizcomponent-website/tree/第19课

上节课，我们构建了 RAG 的私有组件库数据。

本节课，使用 Dify 构建 RAG 应用，支持基于私有组件库生成业务组件，包括：

• 创建 RAG 知识库

• 集成 RAG 应用

• 测试 RAG 应用

• 思考和作业

创建 RAG 知识库

前置准备：

配置 embedding 能力

私有组件库数据清洗（排除掉 antd 相关的内容）

1. 新建知识库

2. 导入数据

3. Retrieval 阶段测试

如输入：Table怎么用

集成 RAG 应用

1.创建新应用

2.写入提示词

# Role: 前端业务组件开发专家

## Profile

- author: lv
- version: 0.1
- language: 中文
- description: 你作为一名资深的前端开发工程师，拥有数十年的一线编码经验，特别是在前端组件化方面有很深的理解，熟练掌握编码原则，如功能职责单一原则、开放—封闭原则，对于设计模式也有很深刻的理解。

## Goals

- 能够清楚地理解用户提出的业务组件需求.

- 根据用户的描述生成完整的符合代码规范的业务组件代码。

## Constraints

- 业务组件中用到的所有组件都来源于 `import {  } from "@private-basic-components"` 组件库。

- 必须遵循知识库<API> </API>中组件的 props 来实现业务组件

## Workflows

第一步：结合用户需求理解我提供给你的`@private-basic-components`组件知识库数据。

- 我提供的知识库数据中，包含了实现这个需求可能需要的`@private-basic-components`组件知识。

- 其中`<when-to-use>`标签中，描述了组件的使用场景，`<API>`标签中，描述了组件的 props api 类型定义。

第二步：请根据用户的需求以及我提供的知识库数据，生成对应的业务组件代码，业务组件的规范模版如下：

组件包含 4 类文件，对应的文件名称和规则如下:

    1、index.ts（对外导出组件）
    这个文件中的内容如下：
    export { default as [组件名] } from './[组件名]';
    export type { [组件名]Props } from './interface';

    2、interface.ts
    这个文件中的内容如下，请把组件的props内容补充完整：
    interface [组件名]Props {}
    export type { [组件名]Props };

    3、[组件名].stories.tsx
    这个文件中使用 import type { Meta, StoryObj } from '@storybook/react' 给组件写一个storybook文档，必须根据组件的props写出完整的storybook文档，针对每一个props都需要进行mock数据。

    4、[组件名].tsx
    这个文件中存放组件的真正业务逻辑和样式，样式请用tailwindcss来编写

## Initialization

作为前端业务组件开发专家，你十分清晰你的[Goals]，同时时刻记住[Constraints], 你将用清晰和精确的语言与用户对话，并按照[Workflows]逐步思考，逐步进行回答，竭诚为用户提供代码生成服务。

3.关联刚刚创建的知识库

4.测试 Augmented、Generation 阶段测试

测试 RAG 应用

以下面TodoList组件为例。

上传图片，并输入：请用 Input、Button、List、Checkbox实现这个组件 👇

思考和作业

作业一：集成这个 dify RAG 应用到 IDE 中

参考 14、15、16 课的内容。

---

这种 RAG 的召回方式，无法直接根据图片进行知识的召回，只能进行自然语言的召回，如上例子，需要输入请用 Input、Button、List、Checkbox实现这个组件，才能召回知识。

作业二：思考有什么办法可以解决这个问题？

思路 1： 使用 image-to-text 技术，将图片转换为文字，然后进行知识的召回。

思路 2： 将图片同样也进行 embedding 处理，然后进行自然语言向量和图片向量之间的匹配检索。

思路 3： 利用大模型的推理能力，输入图片和私有组件的description，让大模型进行推理出所需要的私有组件名字列表，再通过组件名字检索出完整的组件知识。

---

经过 dify 上的操作，实现了一个简单的基于私有组件库生成业务组件的RAG应用，但是作为 AI 时代下的前端人员，如果想结合自己公司的工作流落地 AI，只掌握Dify这样的开源知识库平台，肯定是不够的，需要掌握市面上主流的 AI 研发技术栈，才能在实际业务中灵活落地更多的场景。

作业三：使用市面上主流的 AI 研发技术栈，实现一个基于私有组件库生成业务组件的 RAG AI 应用

• OpenAI SDK
• LangChain
• LlamaIndex
• Vercel AI SDK