企业官网建设流程全解析

一、前期准备：

飞书文档AI助手浏览器插件开发+飞书MCP体验，核心目标为：

1. 复刻腾讯文档小助手核心功能（文档总结、精读、思维导图、对话），开发为飞书适配的浏览器插件；

1. 学习飞书开放平台API调用、AI辅助写代码的方法；

1. 体验飞书MCP的配置与使用，了解MCP未来发展趋势。

1. 插件开发成果可用于文档类产品面试/项目参考，同时熟悉飞书MCP生态。

二、核心开发目标：飞书文档AI助手插件功能

插件为浏览器侧边栏（side bar）形式，仅在飞书文档页面生效，非飞书文档页面弹窗提示“插件不可用”，核心功能与腾讯文档小助手对标，包含：

1. 文档内容获取：调用飞书开放平台API，获取飞书文档的Markdown格式内容（保留超链接、表格、样式）；

1. 总结功能：含概要（快速提炼文档核心）、精读（详细解析文档内容）、思维导图（可视化文档结构）三个子功能，均支持流式响应；

1. 对话功能：以文档内容为常驻上下文，支持用户任意提问、多轮对话，流式返回答案；

1. 权限合规：仅获取用户有访问权限的飞书文档内容，通过飞书APP ID/Secret鉴权，非爬虫抓取（飞书文档做了反爬和实时加载限制）。

三、前置知识与工具准备

（一）基础工具

1. 浏览器：推荐Chrome（浏览器插件开发通用环境）；

1. 代码开发工具：可选用Cursor、Cloud Code、Trae（国产AI编程工具）、豆包Seed Code；

1. 飞书开放平台：飞书开放平台，用于创建应用、获取API凭证、调用云文档API；

1. AI大模型：支持API调用的大模型（用于实现总结、对话、思维导图功能，直播中用AI辅助生成代码+实现插件核心能力）；

1. 终端工具：任意终端（用于飞书MCP的安装、配置命令执行）。

（二）核心前置知识（零基础可边学边做）

1. 基础的浏览器插件开发常识：了解插件的侧边栏形式、manifest配置文件作用；

1. API调用基础：知道“请求-返回”逻辑、TOKEN/鉴权的意义；

1. Markdown格式认知：飞书新版文档为Markdown格式，需了解其基本语法（标题、表格、超链接）；

1. AI提示词基础：会写清晰的功能描述提示词，让AI辅助生成代码。

四、飞书文档AI助手插件开发全流程

步骤1：了解飞书文档的反爬限制与内容获取方式

飞书文档为防止信息泄露，做了反爬和实时加载限制，禁止爬虫直接抓取页面内容，核心限制点：

1. 内容边浏览边加载：页面仅渲染用户当前可见内容，未滑动的部分不会在控制台显示；

1. 权限管控严格：无复制权限的文档，手动/工具复制成本极高；

1. 常规网页的内容采集方法（检查/网络面板）对飞书文档无效，仅能通过飞书开放平台官方API获取内容。

步骤2：飞书开放平台API选型与调试（核心关键）

需在飞书开放平台调用云文档相关API获取内容，直播中对比了2种API，最终选用获取云文档内容（Markdown格式），零基础学员按以下步骤操作：

2.1 飞书开放平台入口

进入飞书开放平台-云文档API，重点看服务端API（客户端API为网页形式，服务端API更适配插件开发）。

2.2 API选型对比

2.3 新版飞书文档识别

飞书新版文档地址统一为wiki开头，原Docs（文档）、Sheet（表格）、Database（多维表格）均已升级为wiki后缀，文档ID不变，识别示例：

• 旧版：xxx.feishu.cn/docs/xxxxxxx

• 新版：xxx.feishu.cn/wiki/xxxxxxx

2.4 API调试步骤（零基础友好，平台自带调试台）

1. 进入获取云文档内容API页面，找到API调试台（飞书开放平台自带，无需本地代码）；

1. 准备2个核心参数：

• doc_token：飞书文档的ID，在文档地址栏中获取（新版wiki地址后一串22~27位的字符）；

• access_token：接口调用凭证，后续通过飞书自建应用获取（步骤3讲解）；

1. 配置调试参数：

• type：选markdown（仅支持该格式）；

• language：选0（默认中文，1为英文）；

• 其他参数默认；

1. 点击调试，成功后可在返回结果中看到data.content，即文档的完整Markdown内容（含表格、超链接）。

步骤3：飞书自建应用创建与鉴权凭证获取

调用飞书API需要鉴权凭证（APP ID/APP Secret/access_token），需在飞书开放平台创建自建应用，零基础按以下步骤操作，全程免费，非企业版也可使用：

3.1 创建自建应用

1. 飞书开放平台点击控制台-创建应用-自建应用，填写应用名称（如“飞书文档助手插件”），随意选择应用图标，点击创建；

1. 创建后进入应用详情页，可直接看到APP ID和APP Secret（后续配置到插件中，需妥善保存，避免泄露）。

3.2 应用权限配置

插件需要云文档的访问权限，需为应用开通权限，步骤：

1. 应用详情页点击权限管理-云文档，开通所有云文档相关权限（零基础直接全选，自己使用无风险）；

1. 权限开通后，必须将应用添加到需要访问的飞书文档中：打开飞书文档-分享-添加应用，选择刚创建的自建应用，否则应用无文档访问权限。

3.3 access_token获取（2种类型，插件开发选tenant_access_token）

飞书提供2种access_token，直播中因user_access_token需频繁刷新（30分钟失效），插件开发选用tenant_access_token（应用身份，一次获取长期有效），对比：

3.4 tenant_access_token获取

在飞书开放平台API调试台，调用获取tenant_access_token接口，输入APP ID和APP Secret，直接调试即可获取，该token为插件调用云文档API的核心凭证。

步骤4：用AI辅助生成插件代码（零基础核心技巧）

零基础无需手动写大量代码，通过清晰的提示词让AI（Cloud Code/Trae/豆包Seed Code）辅助生成，直播中实操的提示词编写逻辑为功能+交互+API调用逻辑+参数，零基础学员直接套用以下提示词模板，稍作修改即可：

4.1 核心提示词模板（直接复制使用，标注[]的部分需替换）

4.2 AI编程工具使用技巧（零基础友好）

1. 选用Cloud Code/Trae/豆包Seed Code（国产AI编程工具，对中文提示词支持更好，有免费额度）；

1. 工具中开启coding模式（编程模式），将上述提示词直接粘贴，AI会自动生成插件的全部代码（含manifest配置文件、侧边栏页面、API调用逻辑）；

1. 若AI生成的代码有报错，直接将报错信息粘贴给AI，让AI自动修复（直播中多次用此方法解决报错）。

步骤5：插件代码的调整与修复（直播实操踩坑要点）

AI生成的代码会存在小问题/报错，零基础学员无需手动修改，直接按以下方法处理，直播中常见报错及解决：

5.1 常见报错类型

1. ES6模块导出错误：AI使用了ES6语法，浏览器插件不兼容，让AI将代码改为普通JavaScript语法；

1. 正则表达式错误：识别飞书文档地址的正则写的不规范，让AI修正正则（匹配含wiki的飞书文档地址）；

1. CSP安全策略错误：浏览器禁止插件加载外部资源，让AI在manifest文件中添加CSP配置，允许加载外部资源；

1. 思维导图库导入错误：Markup开源库导入失败，让AI直接将库的代码内嵌到插件中，避免外部导入；

1. 配置页面入口缺失：AI未开发配置页面，让AI补充配置页面的代码，支持用户输入APP ID/Secret/大模型key。

5.2 核心修复技巧

将浏览器控制台的报错信息+插件的功能问题（如配置按钮无反应、侧边栏不显示）直接粘贴给AI，AI会自动定位问题并修复代码，零基础无需理解报错原理。

步骤6：插件的导入与测试

6.1 Chrome浏览器插件导入步骤

1. 打开Chrome浏览器，输入地址chrome://extensions/，进入扩展程序页面；

1. 开启右上角开发者模式；

1. 点击加载已解压的扩展程序，选择AI生成的插件代码文件夹，点击确认，插件即可导入；

1. 插件导入后，会在浏览器右上角显示图标，钉住图标方便使用。

6.2 插件测试

1. 打开任意飞书新版文档（地址含wiki），点击插件图标，调出侧边栏；

1. 在插件配置页面输入飞书APP ID/APP Secret/大模型API key；

1. 测试核心功能：点击“总结-概要”，看是否能生成文档概要；在对话框提问，看是否能基于文档内容回答；

1. 若功能无响应，打开浏览器开发者工具（F12）-控制台，复制报错信息给AI，让AI修复。

步骤7：插件的优化与延伸（可选）

零基础学员完成核心功能后，可根据需求让AI优化插件，直播中建议的延伸方向：

1. 适配WPS/Notion/腾讯文档，开发通用的文档助手插件；

1. 增加文档翻译/内容提取（提取表格/链接）功能；

1. 优化思维导图的样式，让其更贴合腾讯文档的思维导图效果；

1. 增加预设问题（如“文档的核心观点是什么？”“文档的结构是什么？”），提升使用体验。

五、飞书MCP配置与体验全流程

5.1 飞书MCP是什么？

MCP即API文档的MCP化，是飞书推出的生态能力，将飞书所有开放API封装为MCP工具，开发者可直接在AI工具（如Trae/Cursor）中调用MCP，无需手动编写API调用代码，未来大概率会成为开放平台的主流趋势（以Agent为核心的开发模式，直接调用MCP即可实现功能）。

核心优势：无需封装API，直接在AI中调用飞书的所有能力（创建文档、发送消息、获取通讯录等），适配AI开发场景，若想入职字节/飞书，需重点掌握飞书MCP。

5.2 飞书MCP配置步骤（零基础友好，全程实操）

飞书MCP分为云端版和本地版，云端版暂未完全开放（无权限可申请），直播中实操本地版，步骤如下：

步骤1：准备飞书自建应用（复用插件开发的应用，或重新创建）

1. 若已创建插件开发的自建应用，直接使用；若未创建，按四、步骤3重新创建，名称如“飞书MCP体验”；

1. 为应用开通更多权限（根据需求，直播中开通了云文档+消息+通讯录权限），步骤：应用详情页-权限管理-全选所需权限，点击保存。

步骤2：应用安全配置与发布

1. 重定向URL配置：应用详情页-安全设置-重定向URL，添加本地地址（如http://localhost:3000），用于用户授权获取凭证；

1. 创建应用版本并发布：应用详情页-版本管理-创建版本（如0.0.1），填写更新说明，点击发布（自建应用发布免审核，直接生效）；

1. 重置密钥：若APP Secret泄露（如直播中展示），点击重置APP Secret，保证应用安全。

步骤3：本地安装并配置飞书MCP

1. 打开终端工具，执行飞书MCP安装命令（直播中使用Trae的内置终端，零基础直接复制命令）：

1. 执行登录命令，配置飞书自建应用的APP ID和APP Secret：

1. 执行后会弹出飞书授权页面，扫码授权，授权成功后本地MCP即配置完成。

步骤4：在AI工具中调用飞书MCP

直播中使用Trae调用飞书MCP，步骤：

1. 打开Trae，进入MCP配置页面，添加飞书MCP工具；

1. 选择需要调用的MCP能力（如创建飞书文档、发送飞书消息、获取文档内容）；

1. 在Trae的对话框中输入指令（如“创建一个飞书文档，保存插件开发的总结内容”），AI会自动调用飞书MCP实现功能。

5.3 飞书MCP实操踩坑要点（零基础重点注意）

1. 权限问题：调用MCP的某功能时，若提示“无权限”，需回到飞书开放平台，为自建应用开通对应权限，并重新创建版本发布（权限开通后必须发布新版本才生效）；

1. 文档创建问题：MCP创建飞书文档后，仅生成文档ID，未自动写入内容，需让AI补充“将内容写入创建的文档”的指令；

1. 身份问题：MCP默认以应用身份创建文档，普通用户无访问权限，需将应用添加到文档中，或改用用户身份（user_access_token）；

1. 工具调用错误：AI会错误调用MCP工具（如创建多维表格而非文档），需明确指令（如“使用document相关MCP工具，创建飞书文档（docx）”）。

5.4 飞书MCP的核心能力与延伸

飞书MCP已封装飞书所有开放API，核心能力包括：

1. 云文档：创建/编辑/获取文档、表格、多维表格内容；

1. 消息：发送单聊/群聊消息、批量发消息、撤回消息；

1. 通讯录：获取部门/用户信息、组织架构；

1. 工作台：调用飞书工作台的应用能力。

零基础学员可尝试用MCP实现简单功能（如“给飞书群发送一条插件开发的通知消息”“获取某文档的内容并总结”），熟悉MCP的调用逻辑。

六、零基础学习关键技巧与注意事项

6.1 核心技巧（零基础高效上手）

1. AI辅助开发为主：无需手动写代码，重点练提示词编写能力，功能描述越清晰，AI生成的代码越准确；

1. 报错直接甩给AI：浏览器/终端的报错信息直接粘贴给AI，让AI自动修复，无需理解报错原理；

1. 复用飞书自建应用：插件开发和MCP体验可复用同一个自建应用，减少重复配置；

1. 优先使用调试台：飞书开放平台的API调试台可直接测试接口，无需本地代码，零基础先在调试台验证API可用，再让AI开发。

6.2 重要注意事项

1. 凭证安全：飞书APP ID/APP Secret、大模型API key、access_token为核心凭证，切勿泄露，若泄露立即重置；

1. 飞书文档版本：插件开发的API仅支持新版飞书文档（地址含wiki），旧版文档需先升级；

1. AI工具选择：国产AI编程工具（Cloud Code/Trae/豆包Seed Code）对中文提示词支持更好，零基础优先选用；

1. 开发者模式：Chrome浏览器导入插件时，必须开启开发者模式，否则无法加载解压的扩展程序；

1. 流式响应：插件的所有功能均要求流式响应，提示词中必须明确标注，否则AI生成的代码为“等待全部结果后显示”，体验差。

七、学习延伸与后续规划

1. 插件优化：将插件适配为WPS/Notion/腾讯文档的通用版本，丰富功能（翻译、内容提取、批量处理）；

1. MCP深入学习：尝试用飞书MCP开发简单的Agent应用（如“飞书文档智能助手”，自动总结新创建的文档）；

1. 文档类产品拆解：按直播原计划，拆解腾讯文档/WPS/Notion的核心功能，锻炼产品思维，为文档类产品面试做准备；

1. 个人知识库开发：直播中提到的进阶项目，将插件升级为个人知识库，支持多文档整合、检索、总结，适合有一定基础后学习（预计12月后讲解）。

八、问题解决与答疑

常见问题1：飞书开放平台创建应用后，无云文档权限选项？

答：进入应用详情页，点击权限管理-添加权限，在云文档分类下全选权限，点击保存即可。

常见问题2：AI生成的插件导入后，侧边栏不显示？

答：1. 检查飞书文档是否为新版（含wiki）；2. 打开浏览器控制台（F12），复制报错信息给AI，让AI修复；3. 确认插件的manifest文件中，匹配的飞书文档地址正确。

常见问题3：调用飞书API时，提示“access_token无效”？

答：1. 检查access_token是否为tenant_access_token；2. 确认自建应用已添加到飞书文档中；3. 重新调用“获取tenant_access_token”接口，获取新的token。

常见问题4：飞书MCP配置后，无法创建文档？

答：1. 检查应用是否开通云文档-创建文档权限，并发布了新版本；2. 确认指令中明确“使用document相关MCP工具”；3. 授权后重新执行login命令，刷新MCP配置。

常见问题5：零基础没有编程基础，能学会吗？

答：可以，本次开发全程AI辅助写代码，零基础仅需掌握提示词编写和步骤执行，无需手动写代码，重点练“把功能说清楚”的能力即可。

九、配套资源

1. 飞书开放平台官网：https://open.feishu.cn/

1. 飞书云文档API文档：https://open.feishu.cn/document/server-docs/docs/drive-v1/

1. 飞书MCP官方文档：https://open.feishu.cn/document/server-docs/docs/mcp/

1. Markup思维导图开源库：直播中提及的开源库，可直接让AI内嵌到插件中，无需手动下载。