《前端 + AI 转型探索营》文档

本节课代码：https://github.com/AI-FE/private-component-codegen/tree/第22课

上节，介绍了项目的技术架构，以及整个项目的演示。

本节，开始基于 OpenAI SDK 实现代码生成器。

Embedding

RAG 回顾

Embedding 实现

1.切换到 init 的分支

该分支包含最基础的模版：

整个项目的基础架构，依赖包，基础工具
私有组件知识文档
项目中用到的业务组件（见 storybook 文档）

不包含：

OpenAI SDK 、LangChain 、LlamaIndex 、Vercel AI SDK 的 RAG 实现
对接不同 RAG 逻辑的页面层

2.环境变量初始化

bash

cp .env.example .env

3.OpenAI Embedding 数据表初始化

让 cursor agent composer 基于以下 prompt 生成代码：

使用 drizzle-orm/pg-core 创建一个 PostgreSQL 数据表 schema，用于存储 OpenAI embeddings。表名为 'open_ai_embeddings'，包含以下字段:

- id: 使用 nanoid 生成的主键，varchar(191) 类型
- content: 文本内容，text 类型，不允许为空
- embedding: 向量类型字段，维度为 1536，不允许为空

同时需要创建一个使用 HNSW 算法的向量索引，用于余弦相似度搜索。

执行数据库同步命令：

bash

pnpm db:generate
pnpm db:migrate

注意：如果遇到以下错误：
bash
PostgresError:type "vector" does not exist
请在 supabase 的 sql 编辑器中执行以下命令：
sql
CREATE EXTENSION IF NOT EXISTS vector;

3.OpenAI Embedding 数据库 action

让 cursor agent composer 基于以下 prompt 生成代码：

创建一个 server action function，能够接收外部的数据源，保存到 db 中，function 入参是：embeddings: Array<{ embedding: number[]; content: string }>

4.编写脚本，将私有组件知识库中的内容转换为 embeddings，并保存到数据库中

让 cursor agent composer 基于以下 prompt 生成代码：

使用 OpenAI SDK 创建一个函数，将输入的文本字符串转换为向量嵌入（embeddings）。支持将文本按特定分隔符分块处理，每个文本块都生成对应的 embedding 向量，并返回包含原文本和向量的结果数组。

RAG 回顾 ​

Embedding 实现 ​

RAG 回顾

Embedding 实现