[codex] add animated Agent integration guides

[Rqinyouxian]

📝 变更描述 / Description

新增 /zh/docs/apps/agent Agent 接入总览，并补充 HermesAgents、Claude Desktop、WorkBuddy、OpenCode、Codex++ 教程。OpenClaw、Claude Code、Cherry Studio、CC Switch 现有页面加入统一的三阶段动画步骤展示。

教程示例统一使用 https://apihub.agnes-ai.com/v1、YOUR_API_KEY 和 agnes-2.0-flash，包含 27 张脱敏步骤截图。新增 AgentStepGuide MDX 组件，通过 IntersectionObserver 在进入视口后依次显示步骤，并支持 reduced-motion。

本 PR 由 AI 辅助完成。当前提交者不是仓库历史核心开发者，已人工检查变更范围、示例参数和构建结果。

🚀 变更类型 / Type of change

• 🐛 Bug 修复
• ✨ 新功能
• ⚡ 性能优化 / 重构
• 📝 文档更新

🔗 关联任务 / Related Issue

• None

✅ 提交前检查项 / Checklist

• 已确认变更只涉及 Agent 教程、MDX 组件和脱敏截图
• 已确认未包含真实 API Key 或其他敏感凭据
• 已运行 Prettier 检查
• 已运行 Next.js 生产构建
• 已确认新增 /zh/docs/apps/agent 静态路由
• 已支持 prefers-reduced-motion

📸 运行证明 / Proof of Work

• bun x prettier --check ...：通过
• bun run build：通过，完成 2083 个静态页面生成
• 独立 tsc --noEmit 仍报告仓库既有的 public/assets/dashboard-dark.png 缺失；Next.js 生产构建中的 TypeScript 阶段通过

Summary by CodeRabbit

• New Features
  • Added a Chinese Agent integration tutorial covering unified connection settings and supported applications.
  • Added step-by-step setup guides for OpenClaw, Claude, WorkBuddy, OpenCode, Codex++, CC Switch, Cherry Studio, HermesAgents, and Claude Desktop.
  • Added animated visual step guides with screenshots and verification tips.
  • Added an “Agent 接入教程” entry to the supported applications documentation.

[vercel]

@Rqinyouxian is attempting to deploy a commit to the quantumnous Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

新增中文 Agent 接入教程入口和 9 个应用指南，统一展示 API 配置参数、步骤说明、配图及排查信息，并加入可复用的 AgentStepGuide MDX 组件。

Changes

Agent 接入指南

Layer / File(s)	Summary
分步教程组件 src/components/agent-step-guide.tsx, src/mdx-components.tsx	新增支持视口动画、步骤编号、说明文本和图片展示的 AgentStepGuide，并注册到 MDX 组件映射。
教程入口与页面索引 content/docs/zh/apps/agent.mdx, content/docs/zh/apps/index.mdx, content/docs/zh/apps/meta.json	新增统一参数与应用选择页面，并将其加入中文应用文档导航。
基础应用分步指南 content/docs/zh/apps/cc-switch.mdx, content/docs/zh/apps/cherry-studio.mdx, content/docs/zh/apps/claude-code.mdx, content/docs/zh/apps/openclaw.mdx	为四个应用新增三步式接入流程和对应图片。
应用配置与排查指南 content/docs/zh/apps/claude-desktop.mdx, content/docs/zh/apps/codex-plus-plus.mdx, content/docs/zh/apps/hermes-agents.mdx, content/docs/zh/apps/opencode.mdx, content/docs/zh/apps/workbuddy.mdx	新增完整配置参数、命令或 JSON 示例、验证步骤及认证、模型和连接问题排查说明。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MDXPage
  participant MDXComponents
  participant AgentStepGuide
  participant ImageAssets
  MDXPage->>MDXComponents: resolve AgentStepGuide
  MDXComponents->>AgentStepGuide: pass app and step data
  AgentStepGuide->>ImageAssets: render each step image
  AgentStepGuide-->>MDXPage: display animated guide

Loading

Poem

小兔挥爪写新章，
九家应用接入忙。
参数表里星光亮，
步骤图片排成行。
兔耳一竖，配置成功香！

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding animated Agent integration guides.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}