尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

AI SDK 官方文档站(ai-sdk.dev)技术架构与实践:基于 Geistdocs 的多版本文档应用构建指南

AI SDK 官方文档站(ai-sdk.dev)技术架构与实践:基于 Geistdocs 的多版本文档应用构建指南 AI SDK 官方文档站ai-sdk.dev技术架构与实践基于 Geistdocs 的多版本文档应用构建指南【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai本文面向希望了解或复刻 AI SDK 官方文档站点实现方式的开发者。AI SDKThe AI Toolkit for TypeScript的官方文档站是一个基于 Vercel Geistdocs 框架构建的包级应用托管于仓库的apps/docs目录负责ai-sdk.dev的文档、Providers、Cookbook 等全部内容面。读完本文你将掌握该文档应用的本地开发流程、三版本v5/v6/v7内容同步管线的完整原理、Geistdocs 多版本路由配置、Vercel 部署要点以及 llms.txt、站点地图与社交卡片等面向搜索引擎与 LLM 的 SEO 基建实现。一、应用定位一个由包驱动的文档站apps/docs是仓库中的一个独立包package name 为ai-sdk-docs其核心定位在 apps/docs/README.md 中写得很清楚This is the package-backed Geistdocs application forai-sdk.dev.所谓package-backed意味着文档站的依赖、脚本和构建配置全部收拢在这个包内与仓库中content/目录的原始文档源相互独立。文档站本身并不直接消费content/下的 MDX 文件而是先通过内容同步脚本把源文件变换并拷贝到apps/docs/content/生成目录再由 Geistdocs/Fumadocs 消费。从 apps/docs/package.json 可以看到其技术栈框架Next.js 16.2.12 React 19.2.3使用vercel/geistdocs1.20.4 作为文档框架文档管线fumadocs-core/fumadocs-mdx/fumadocs-ui负责 MDX 编译与 UI代码高亮shiki3.23.0 配合shikijs/langs与shikijs/transformers其他zod配置与 Frontmatter 校验、lucide-react图标、vercel/analytics站点分析。二、本地开发三步起一个文档站README 明确要求使用Node.js 22 或更新版本并在仓库根目录执行命令pnpm install pnpm --filter ai-sdk-docs dev:site其中dev:site脚本见 apps/docs/package.json实际上是三件事的串联dev:site: pnpm sync-content fumadocs-mdx next devpnpm sync-content执行内容同步脚本把多版本文档源变换到apps/docs/content/fumadocs-mdx生成 Fumadocs 的 MDX 集合配置next dev启动 Next.js 开发服务器。因此如果你直接运行next dev而跳过前两步站点会因为缺少content/目录而无法渲染页面——这也是 README 强调内容同步生成apps/docs/content/的原因。完整本地校验运行完整的本地校验命令pnpm --filter ai-sdk-docs validate:site它等价于先跑单测再跑生产构建test:site: node --test scripts/*.test.mjs, build:site: pnpm sync-content fumadocs-mdx next build, validate:site: pnpm test:site pnpm build:site其中test:site使用 Node 内置的node --test运行scripts/*.test.mjs当前为 sync-content-utils.test.mjs对内容变换工具函数做单元测试。另外需要注意生成后的内容apps/docs/content/、Fumadocs 源文件和 Next.js 构建输出均被 Git 忽略不会提交进仓库每次构建都从源重新生成。三、内容同步管线三版本文档的单一事实来源这是整个文档应用最核心的机制。同步脚本 apps/docs/scripts/sync-content.mjs 从三个经过评审的来源拉取内容版本来源说明v7当前工作区的content/docs/即仓库main分支的实时内容v6固定 commit31e168b16f71a2abc03a1fae69176886577337f4在脚本中显式 pin 的 SHAv5固定 commit1319452c1f1a75045950817242ef3207dac1e540同上脚本头部注释明确解释了 pin 版本的目的Pinning keeps builds reproducible and content changes reviewable固定 commit 保证构建可复现、内容变更可评审。这意味着 v6/v5 的稳定文档不会跟随 v7 主线的每次修改而漂移只有在明确更新 SHA 时才会发布新的维护版文档。同步的内容家族脚本遍历families [docs, providers, cookbook]三个内容家族对应仓库根目录的content/docs、content/providers、content/cookbook。对每个版本 × 家族组合输出到apps/docs/content/{v5|v6|v7}/{docs|providers|cookbook}例如 v7 文档最终位于apps/docs/content/v7/docs这正是 apps/docs/geistdocs.tsx 中content配置所指向的目录。拉取策略git 优先tarball 兜底fetchRef函数为固定 commit 提供了三层回退策略sync-content.mjs第 60-86 行origin 远程git fetch --depth1 origin ref后用git archive FETCH_HEAD content | tar -x解出content/本地 git 对象直接git archive ref content适合仓库已包含该对象的情况GitHub tarballcurl -sfL https://codeload.github.com/vercel/ai/tar.gz/ref下载并解压为无 git 访问权限的环境兜底。拉取结果缓存于apps/docs/node_modules/.cache/ai-sdk-docs第二次运行直接使用缓存需要强制刷新缓存时传--force参数node scripts/sync-content.mjs --force。四、内容变换规则从NN-前缀到 Fumadocs 的完整映射原始内容仓库content/目录使用NN-数字前缀组织目录与文件名例如02-foundations而 Fumadocs 需要干净的 slug。变换逻辑集中在 apps/docs/scripts/sync-content-utils.mjs共 4 步1. 剥离NN-数字前缀并生成 meta.jsonparseSegment用正则/^(\d)-(.)$/解析路径段transformDir递归遍历并按数字前缀排序为每个目录生成meta.jsonpages数组即排序后的干净文件名列表。同时处理两个特殊场景collapsed: true目录index.mdx的 Frontmatter 若标记collapsed: true则在 meta.json 中写入defaultOpen: false使侧边栏默认折叠前缀冲突检测如果两个文件剥离前缀后撞名如01-foo.mdx与02-foo.mdx脚本会直接抛错防止生成不可预测的路由。2. 丢弃 index.mdx避免重复的 Overview 页面如果目录内同时存在index.mdx和overview.mdx则丢弃index它曾是旧站点的卡片网格落地页。原因是 Geistdocs 会把文件夹索引页渲染为侧边栏中合成的 Overview 项从而与真实的 Overview 页面重复。被丢弃 index 的 Frontmatter 信号如collapsed仍会保留到目录的 meta.json。纯 Frontmatter 的 index 页Cookbook 各章节同理被丢弃因为旧应用从未渲染它们。3. 剥离正文首个# H1Geistdocs 用 Frontmatter 的title作为页面 H1因此stripLeadingH1会把 MDX 正文开头Frontmatter 之后的第一个# 标题行删除避免重复标题。4. 代码围栏 meta 重写与遗留链接修复rewriteLines处理代码块的展示约定原始写法变换后说明ts filenamexts titlexfilename/file→ Fumadocs 的titlehighlight1,3-5{1,3-5}高亮行 →transformerMetaHighlight语法typescripttypescript清理围栏语言后的多余引号prompt/env/regotxt/dotenv/txt重映射 Shiki 未内置的语言同时rewriteLegacyLinks会把旧版锚点批量重定向到新锚点例如#ui-message-stream-protocol→#data-stream-protocol、#multi-modal-messages→#file-parts、#attachments-experimental→#attachments等共 10 组映射保证存量外链不失效。addLegacyAnchors还为streamText、Output、Telemetry等特殊页面插入span id.../形式的兼容锚点。变换后的渲染配置变换产出的{1,3-5}高亮 meta 由 apps/docs/source.config.ts 中的transformerMetaHighlight()消费文档集合通过defineDocs注册并启用includeProcessedMarkdown: true以输出处理后的 Markdown供 llms.txt 等场景使用。五、多版本路由Geistdocs 版本化配置版本切换与路由挂载完全由 apps/docs/geistdocs.tsx 声明站点身份title AI SDKsiteId ai-sdk用于向 Geistdocs 平台上报反馈问题feedback与 markdown 请求追踪导航Docs、ResourcesRecipes / Tools Registry / Templates / Showcase、Providers 三大导航入口内容集合共 9 个集合v5/v6/v7 × docs/providers/cookbookv7 挂载在无前缀路由/docs、/providers、/cookbookv6/v5 分别挂载在/v6、/v5前缀下版本列表current: v7v6 描述为 v6 maintenance documentationv5 为 v5 maintenance documentation版本切换 UI 由此驱动。路由重定向矩阵apps/docs/next.config.ts 中配置了大量重定向核心规则包括v4 归档/v4与/v4/:path*永久重定向到独立的 v4 归档站v4 不纳入本应用构建以控制内存占用v7 无前缀化/v7→//v7/:path*→/:path*章节落地页折叠/docs/:section(基础章节)/重定向到对应的overview页与内容同步丢弃 index.mdx 的行为呼应见 sync-content-utils.mjs遗留资源 URL/tools-registry→/resources/tools、/showcase→/resources/showcase、/elements→ 独立站点、/model-library→ Vercel AI Gateway 文档Cookbook 双表面/cookbook与/resources/recipes均可用章节落地页如/cookbook/node重定向到该章节第一篇菜谱generate-text内容迁移/docs/ai-sdk-core/prompts→/docs/foundations/promptsvalidate-json-rpc-message→create-mcp-client。这些重定向的目标是完全镜像生产站 ai-sdk.dev 的 URL 行为保证搜索引擎收录的旧链接全部可达。六、Vercel 部署外部源码目录与构建命令README 的 Vercel project 一节明确了三个关键配置配置项值原因Root Directoryapps/docs以文档包为部署根Include source files outside the Root Directoryenabled内容同步需要读取仓库根目录的content/docs/与 Git 元数据Node.js仓库支持的版本README 要求本地 Node.js 22部署环境同样需要满足第二个设置至关重要由于构建脚本会从仓库根目录的content/同步内容并执行git fetch/git archive操作Vercel 必须在构建镜像中包含根目录源码与.git元数据。apps/docs/vercel.json 补充了部署策略{ buildCommand: pnpm build:site, git: { deploymentEnabled: { release-v*: false, changeset-release/release-v*: false, changesets-ghcommit-temp/**: false, backport-pr-*: false } } }即发布分支release-v*等不触发自动部署避免中间态发布到生产。七、面向搜索引擎与 LLM 的基建README 提到镜像生产环境这背后是一整套可被搜索引擎与 LLM 消费的产物llms.txt 与 Markdown 代理apps/docs/proxy.ts 使用 Geistdocs 的createProxy将文档 URL 映射到llms.mdx渲染路由。每个 URL 面/docs/*、/v6/docs/*、/providers/*、/cookbook/*及/resources/recipes/*都对应一个[lang]/...-llms.mdx路由为 Agent/LLM 提供纯 Markdown 版本的页面内容。目录中同时存在app/[lang]/llms.txt/route.ts与app/[lang]/sitemap.md/route.ts即标准化的llms.txt索引与可读站点地图。双 URL 表面与 canonical每条 Cookbook 菜谱同时服务在/cookbook/...与/resources/recipes/...两个 URL 面而sitemap、llms.txt 与搜索 canonical 统一指向/cookbook避免重复内容影响 SEO 权重。社交卡片Open Graph 图片社交卡片由app/[lang]/og/[...slug]/route.tsx渲染对应 README 中的路径同时支持两种 URL 形态Geistdocs 形态/og/slugs/image.png遗留生产形态/og/docs?title…description…查询参数形态。该路由见 apps/docs/app/[lang]/og/[...slug]/route.tsx只对**当前版本v7**的三个源docs/providers/cookbook生成卡片维护版本v5/v6是 noindex 且无卡片。实现上使用 Next.jsImageResponse对标题140 字符与描述320 字符做截断以控制渲染成本并通过两种缓存策略优化 CDN 命中查询参数形态URL 随内容变化使用immutable缓存一年slug 形态URL 稳定让浏览器每次 revalidate、CDN 缓存一年。八、第三方 Logo 的版权边界README 最后说明public/images/中的第三方资源public/images/icons/Providers 索引页上的第三方提供商 Logo提名性使用public/images/showcase/Showcase 页面的产品截图与 Logocomponents/docs/upsell.tsx内联的客户 Logo。这些标识属于各自所有者不涵盖在本仓库的开源许可范围内。若你复刻此文档站需要注意保留该版权声明并遵守各 Logo 的使用条款。九、实践要点总结本地开发三步pnpm install→pnpm --filter ai-sdk-docs dev:siteNode.js 需 22内容同步是三段式拉取git archive / tarball 兜底→ 变换剥前缀、去 H1、改围栏 meta、修链接→ 输出到apps/docs/content/{v5,v6,v7}/产物不入 Git缓存可--force刷新多版本靠 Geistdocs 声明式配置geistdocs.tsx的content与versions是唯一事实来源重定向矩阵在next.config.ts中镜像生产行为部署关键在外部源码Vercel 必须开启 Include source files outside the Root Directory否则同步脚本无法读取根目录content/SEO/LLM 基建分层llms.txt Markdown 代理 双 URL canonical 归一到/cookbook v7-only 社交卡片。若想深入源码建议依次阅读 apps/docs/scripts/sync-content.mjs同步主流程、apps/docs/scripts/sync-content-utils.mjs变换规则与测试对象、apps/docs/geistdocs.tsx站点配置以及 apps/docs/next.config.ts重定向矩阵它们共同构成了 ai-sdk.dev 这套内容源与文档应用解耦、多版本可复现构建的完整工程方案。【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表