feat: init

pages/docs/features/custom-tools/page.tsx

@@ -0,0 +1,156 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function CustomTools() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">自定义工具</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
+				通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI
+				安全调用你的业务逻辑。
+			</p>
+
+			<div className="space-y-8">
+				<section>
+					<h2 className="text-2xl font-bold mb-4">工具注册</h2>
+					<p className="text-foreground/80 mb-4">
+						每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。
+					</p>
+
+					<CodeEditor
+						code={`import { z } from 'zod'
+import { pageAgent } from 'page-agent'
+
+// 定义输入 schema
+const CreateUserSchema = z.object({
+  name: z.string().min(1, '姓名不能为空'),
+  email: z.string().email('邮箱格式不正确'),
+  role: z.enum(['admin', 'user', 'guest']).default('user')
+})
+
+// 注册工具
+pageAgent.registerTool({
+  name: 'createUser',
+  description: '创建新用户账户',
+  input: CreateUserSchema,
+  execute: async (params) => {
+    // 执行业务逻辑
+    const response = await fetch('/api/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    return await response.json()
+  }
+})`}
+						language="javascript"
+					/>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-4">属性详解</h2>
+					<div className="space-y-4">
+						<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">
+								📝 name (必需)
+							</h3>
+							<p className="text-foreground/80 mb-2">工具的唯一标识符，AI 通过此名称调用工具。</p>
+							<div className="bg-white dark:bg-gray-800 rounded p-3 text-sm">
+								<code>name: 'searchProducts' // 驼峰命名，语义清晰</code>
+							</div>
+						</div>
+
+						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300 mb-2">
+								💬 description (必需)
+							</h3>
+							<p className="text-foreground/80 mb-2">详细描述工具功能，帮助 AI 理解使用场景。</p>
+							<div className="bg-white dark:bg-gray-800 rounded p-3 text-sm">
+								<code>description: '根据关键词搜索商品，支持价格区间和分类筛选'</code>
+							</div>
+						</div>
+
+						<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-purple-900 dark:text-purple-300 mb-2">
+								🔧 input (必需)
+							</h3>
+							<p className="text-foreground/80 mb-2">Zod schema 定义输入参数的类型和验证规则。</p>
+							<div className="bg-white dark:bg-gray-800 rounded p-3 text-sm">
+								<code>{`input: z.object({
+  keyword: z.string().min(1),
+  priceRange: z.object({
+    min: z.number().optional(),
+    max: z.number().optional()
+  }).optional()
+})`}</code>
+							</div>
+						</div>
+
+						<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-orange-900 dark:text-orange-300 mb-2">
+								⚡ execute (必需)
+							</h3>
+							<p className="text-foreground/80 mb-2">异步函数，接收验证后的参数并执行具体逻辑。</p>
+							<div className="bg-white dark:bg-gray-800 rounded p-3 text-sm">
+								<code>{`execute: async (params) => {
+  // params 已通过 Zod 验证
+  const result = await businessLogic(params)
+  return result // 返回结果给 AI
+}`}</code>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-4">页面过滤器</h2>
+					<p className="text-foreground/80 mb-4">
+						通过 <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">pageFilter</code>{' '}
+						属性控制工具在哪些页面可见，提升安全性和用户体验。
+					</p>
+
+					<CodeEditor
+						code={`pageAgent.registerTool({
+  name: 'approveOrder',
+  description: '审批订单',
+  input: z.object({
+    orderId: z.string(),
+    approved: z.boolean()
+  }),
+  execute: async (params) => {
+    // 审批逻辑
+  },
+  // 可选：页面过滤器
+  pageFilter: {
+    // 只在订单管理页面显示
+    include: ['/admin/orders', '/admin/orders/*'],
+    // 排除特定页面
+    exclude: ['/admin/orders/archived']
+  }
+})`}
+						language="javascript"
+					/>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
+					<div className="space-y-4">
+						<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-2">
+								⚡ 性能优化
+							</h3>
+							<ul className="text-foreground/80 space-y-1 text-sm">
+								<li>• 使用 pageFilter 减少不必要的工具加载</li>
+								<li>• 在 execute 函数中实现适当的缓存机制</li>
+								<li>• 避免在工具中执行耗时的同步操作</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+		</div>
+	)
+}

pages/docs/features/data-masking/page.tsx

@@ -0,0 +1,44 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function DataMasking() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">数据脱敏</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
+				保护敏感数据，确保 AI 处理过程中的数据安全。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">脱敏策略</h2>
+
+			<div className="space-y-4 mb-6">
+				<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+						🔒 自动脱敏
+					</h3>
+					<p className="text-foreground/80">自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。</p>
+				</div>
+
+				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
+						⚙️ 自定义规则
+					</h3>
+					<p className="text-foreground/80">支持自定义脱敏规则，适应不同业务场景的数据保护需求。</p>
+				</div>
+			</div>
+
+			<CodeEditor
+				code={`// 数据脱敏配置
+// @todo
+const rules = [
+	{ pattern: /\\d{11}/, replacement: '***-****-****' },
+	{ pattern: /\\d{4}-\\d{4}-\\d{4}-\\d{4}/, replacement: '****-****-****-****' }
+]
+pageAgent.maskData(rules)`}
+			/>
+		</div>
+	)
+}

pages/docs/features/knowledge-injection/page.tsx

@@ -0,0 +1,156 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function KnowledgeInjection() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">知识库注入</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
+				通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。
+			</p>
+
+			{/* Custom Instruction */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">Instruction - 系统指令</h2>
+
+				<div className="p-6 bg-purple-50 dark:bg-purple-900/20 rounded-lg mb-6">
+					<h3 className="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-300">
+						🎯 系统级指令
+					</h3>
+					<p className="text-foreground/80 mb-4">为 AI 设定全局行为准则和工作风格。</p>
+					<ul className="list-disc list-inside space-y-2 text-foreground/70">
+						<li>定义 AI 的工作风格和交互方式</li>
+						<li>设置安全边界和操作限制</li>
+						<li>指定错误处理和异常情况的应对策略</li>
+						<li>配置输出格式和反馈机制</li>
+					</ul>
+				</div>
+
+				<CodeEditor
+					className="mb-6"
+					code={`// 构造函数中设置系统指令
+const pageAgent = new PageAgent({
+  instruction: \`
+# 角色定义
+你是专业的电商运营助手。
+
+# 工作风格
+- 谨慎：操作前确认
+- 准确：确保正确性
+- 高效：优化流程
+
+# 错误处理
+遇到错误时暂停并报告。
+\`
+});`}
+				/>
+			</section>
+
+			{/* App Knowledge */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">App Knowledge - 应用知识</h2>
+
+				<div className="p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
+					<h3 className="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-300">
+						<EFBFBD> 业务领域知识
+					</h3>
+					<p className="text-foreground/80 mb-4">
+						注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。
+					</p>
+					<div className="grid md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<h4 className="font-semibold text-blue-800 dark:text-blue-200">产品知识</h4>
+							<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
+								<li>产品功能和特性介绍</li>
+								<li>用户角色和权限体系</li>
+								<li>业务规则和约束条件</li>
+							</ul>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-semibold text-blue-800 dark:text-blue-200">操作指南</h4>
+							<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
+								<li>标准操作流程定义</li>
+								<li>异常情况处理方案</li>
+								<li>术语和概念解释</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+
+				<CodeEditor
+					className="mb-6"
+					code={`// 应用知识
+pageAgent.knowledge.setAppKnowledge(\`
+# 产品介绍
+电商管理系统：面向中小企业的一站式解决方案。
+
+# 操作流程
+## 商品上架
+1. 进入商品管理页面 2. 点击新增商品 3. 填写基本信息 4. 设置库存 5. 提交审核
+
+# 术语解释
+- SKU：库存量单位
+- SPU：标准产品单位
+- 运费模板：物流费用计算规则
+
+# 业务规则
+- 库存为0时自动下架
+- VIP会员享9.5折
+\`);`}
+				/>
+			</section>
+
+			{/* Page Knowledge */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">Page Knowledge - 页面知识</h2>
+
+				<div className="p-6 bg-green-50 dark:bg-green-900/20 rounded-lg mb-6">
+					<h3 className="text-xl font-semibold mb-3 text-green-900 dark:text-green-300">
+						📄 页面级精准指导
+					</h3>
+					<p className="text-foreground/80 mb-4">
+						为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。
+					</p>
+					<div className="grid md:grid-cols-3 gap-4">
+						<div className="space-y-2">
+							<h4 className="font-semibold text-green-800 dark:text-green-200">元素标注</h4>
+							<p className="text-sm text-foreground/70">为页面元素添加语义化描述</p>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-semibold text-green-800 dark:text-green-200">交互说明</h4>
+							<p className="text-sm text-foreground/70">定义元素的交互行为和预期结果</p>
+						</div>
+						<div className="space-y-2">
+							<h4 className="font-semibold text-green-800 dark:text-green-200">页面逻辑</h4>
+							<p className="text-sm text-foreground/70">说明页面的业务逻辑和状态变化</p>
+						</div>
+					</div>
+				</div>
+
+				<CodeEditor
+					className="mb-6"
+					code={`// 页面知识库
+// 添加页面知识
+pageAgent.knowledge.addPageKnowledge("/products", \`
+商品列表页面，包含搜索、筛选、批量操作功能。
+#add-product-btn：新增商品按钮
+.product-item：商品列表项
+#search-input：搜索框，最少2个字符
+\`);
+
+pageAgent.knowledge.addPageKnowledge("/orders/*", \`
+订单详情页面。
+.order-status：订单状态标签
+#update-status-btn：状态更新按钮
+\`);
+
+// 移除页面知识
+pageAgent.knowledge.removePageKnowledge("/products");`}
+				/>
+			</section>
+		</div>
+	)
+}

pages/docs/features/model-integration/page.tsx

@@ -0,0 +1,162 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function ModelIntegration() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">模型接入</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+				支持所有符合 OpenAI 接口规范且支持 tool call 的模型，包括公有云服务和私有部署方案。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">兼容性说明</h2>
+
+			<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
+				<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+					🔌 OpenAI 接口兼容
+				</h3>
+				<p className="text-foreground/80">
+					支持所有遵循 OpenAI API chat/completions 接口规范的服务，包括但不限于 OpenAI、Azure
+					阿里云等各大云厂商的模型服务，以及使用 vLLM、Ollama 等框架部署的私有模型。
+				</p>
+				<p className="text-foreground/80">
+					模型需要支持 tool call ，并且能够通过 json schema 制定 tool call 格式。
+				</p>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">推荐模型</h2>
+
+			<div className="grid md:grid-cols-3 gap-4 mb-6">
+				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+						⚡ gpt-4.1-mini
+					</h3>
+					<p className="text-sm text-foreground/80 mb-2">测试使用的默认模型，评估基准 ✅</p>
+					<ul className="text-sm text-foreground/70 space-y-1">
+						<li>• 性价比高</li>
+						<li>• 速度快，成功率较高</li>
+						<li>• i/o $0.4/$1.6 (每 M token)</li>
+					</ul>
+				</div>
+
+				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
+						🚀 gpt-4.1
+					</h3>
+					<p className="text-sm text-foreground/80 mb-2">效果最佳的推荐模型</p>
+					<ul className="text-sm text-foreground/70 space-y-1">
+						<li>• 效果和速度均衡</li>
+						<li>• 价格贵，4.1-mini 的 5 倍</li>
+						<li>• 适合不缺钱的生产环境</li>
+					</ul>
+				</div>
+
+				<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
+						🛡️ qwen-plus (qwen3)
+					</h3>
+					<p className="text-sm text-foreground/80 mb-2">合规，低成本</p>
+					<ul className="text-sm text-foreground/70 space-y-1">
+						<li>• 安全合规，便宜，速度快</li>
+						<li>• ToolCall 有出错率，不出错时效果尚可</li>
+						<li>
+							• 适合能给出<strong>详细步骤</strong>的场景
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">可用模型</h2>
+
+			<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
+				<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
+					✅ 已验证可用
+				</h3>
+				<div className="flex flex-wrap gap-2">
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						gpt-4.1-mini
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						gpt-4.1
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						gpt-5
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						gpt-5-mini
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						qwen-plus
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						deepseek-v3.1
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						claude-4-sonnet
+					</span>
+					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
+						claude-3.7-sonnet
+					</span>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">问题</h2>
+
+			<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
+				<h3 className="text-lg font-semibold mb-2 text-red-900 dark:text-red-300">
+					🚫 根据你的场景斟酌
+				</h3>
+				<ul className="text-sm text-foreground/80 space-y-1 list-disc pl-5">
+					<li>reasoning 模型，速度偏慢，没有必要</li>
+					<li>GPT-5 全系列，速度过慢，效果提升不明显</li>
+					<li>未针对 agent 优化的模型（如各类 coder 模型），效果不佳</li>
+					<li>
+						不保证 json schema 的模型（openAI 以外的几乎所有模型），tool call
+						有概率出错，需要频繁重试
+					</li>
+					<li>小模型、nano 模型，效果不佳</li>
+					<li>Gemini 官方提供的 OpenAI 接口 tool call 部分不兼容</li>
+				</ul>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">配置方式</h2>
+
+			<CodeEditor
+				code={`
+// 百炼等其他兼容服务
+const pageAgent = new PageAgent({
+  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+  apiKey: 'your-api-key',
+  modelName: 'qwen-plus'
+});
+
+// 私有部署模型
+const pageAgent = new PageAgent({
+  baseURL: 'http://localhost:11434/v1',
+  apiKey: 'ollama',  // Ollama 通常使用任意值
+  modelName: 'qwen3:latest'
+});`}
+			/>
+
+			<div className="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+				<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+					💡 配置说明
+				</h3>
+				<ul className="text-sm text-foreground/80 space-y-2">
+					<li>
+						<strong>baseURL</strong>: API 服务地址，默认为 OpenAI 官方地址
+					</li>
+					<li>
+						<strong>apiKey</strong>: API 密钥，必填参数
+					</li>
+					<li>
+						<strong>modelName</strong>: 模型名称，默认为 gpt-4.1-mini
+					</li>
+				</ul>
+			</div>
+		</div>
+	)
+}

pages/docs/features/security-permissions/page.tsx

@@ -0,0 +1,75 @@
+import BetaNotice from '@pages/components/BetaNotice'
+
+export default function SecurityPermissions() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">安全与权限</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
+				page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
+			</p>
+
+			<div className="space-y-6">
+				<section>
+					<h2 className="text-2xl font-bold mb-3">元素操作黑白名单</h2>
+					<div className="space-y-3">
+						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
+								🚫 操作黑名单
+							</h3>
+							<p className="text-foreground/80">禁止 AI 操作敏感元素，如删除按钮、支付按钮等。</p>
+						</div>
+						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
+								✅ 操作白名单
+							</h3>
+							<p className="text-foreground/80">明确定义 AI 可以操作的元素范围。</p>
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-3">URL 黑白名单</h2>
+					<div className="space-y-3">
+						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
+								🚫 URL 黑名单
+							</h3>
+							<p className="text-foreground/80">禁止 AI 访问敏感页面和危险链接。</p>
+						</div>
+						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
+								✅ URL 白名单
+							</h3>
+							<p className="text-foreground/80">限制 AI 只能访问预定义的安全页面。</p>
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-3">Instruction 安全约束</h2>
+					<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+							⚠️ 高危操作控制
+						</h3>
+						<p className="text-foreground/80 mb-3">
+							在 AI 指令中明确列举高危操作，通过两种策略进行控制：
+						</p>
+						<div className="space-y-2">
+							<div className="pl-3 border-l-2 border-red-400">
+								<p className="font-medium text-red-700 dark:text-red-300">完全禁止操作</p>
+								<p className="text-sm text-foreground/70">对极高风险操作明确禁止执行</p>
+							</div>
+							<div className="pl-3 border-l-2 border-orange-400">
+								<p className="font-medium text-orange-700 dark:text-orange-300">需用户确认操作</p>
+								<p className="text-sm text-foreground/70">对中等风险操作要求用户明确同意</p>
+							</div>
+						</div>
+					</div>
+				</section>
+			</div>
+		</div>
+	)
+}

pages/docs/integration/api-reference/page.tsx

@@ -0,0 +1,41 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function ApiReference() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">API 参考</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
+				完整的 API 文档，包含所有可用的方法和参数。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">核心方法</h2>
+
+			<div className="space-y-4 mb-6">
+				<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+					<h3 className="text-lg font-semibold mb-2 font-mono">pageAgent.init(config)</h3>
+					<p className="text-foreground/80 mb-3">初始化 page-agent</p>
+
+					<CodeEditor code={`const pageAgent = new PageAgent`} />
+				</div>
+
+				<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+					<h3 className="text-lg font-semibold mb-2 font-mono">pageAgent.execute(instruction)</h3>
+					<p className="text-foreground/80 mb-3">执行自然语言指令</p>
+
+					<CodeEditor
+						code={`await pageAgent.execute('点击提交按钮');
+await pageAgent.execute('填写用户名为张三');`}
+					/>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">事件监听</h2>
+
+			<CodeEditor code={`// TODO`} />
+		</div>
+	)
+}

pages/docs/integration/best-practices/page.tsx

@@ -0,0 +1,62 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function BestPractices() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">最佳实践</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+				使用 page-agent 的最佳实践和常见问题解决方案。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">性能优化</h2>
+
+			<div className="space-y-4 mb-6">
+				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+						⚡ 减少 API 调用
+					</h3>
+					<p className="text-foreground/80 mb-3">合并多个操作指令，减少与 AI 模型的交互次数。</p>
+
+					<CodeEditor
+						code={`// 推荐：合并操作
+await pageAgent.execute('填写表单：姓名张三，邮箱test@example.com，然后提交');
+
+// 不推荐：分别操作
+await pageAgent.execute('填写姓名张三');
+await pageAgent.execute('填写邮箱test@example.com');
+await pageAgent.execute('点击提交按钮');`}
+					/>
+				</div>
+
+				<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+						🎯 精确的元素描述
+					</h3>
+					<p className="text-foreground/80">使用具体、明确的元素描述，提高操作成功率。</p>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">安全建议</h2>
+
+			<div className="space-y-3 mb-6">
+				<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border-l-4 border-red-500">
+					<h3 className="font-semibold mb-1 text-red-900 dark:text-red-300">重要操作保护</h3>
+					<p className="text-foreground/80">对删除、支付等敏感操作设置黑名单保护。</p>
+				</div>
+
+				<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-500">
+					<h3 className="font-semibold mb-1 text-yellow-900 dark:text-yellow-300">数据脱敏</h3>
+					<p className="text-foreground/80">启用数据脱敏功能，保护用户隐私信息。</p>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-3">调试技巧</h2>
+
+			<CodeEditor code={`// TODO`} />
+		</div>
+	)
+}

pages/docs/integration/cdn-setup/page.tsx

@@ -0,0 +1,41 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function CdnSetup() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">CDN 引入</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+				通过 CDN 快速集成 page-agent，无需复杂的构建配置。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">快速开始</h2>
+
+			<CodeEditor
+				className="mb-8"
+				code={`<!-- 在 HTML 中引入 -->
+// @todo find a cdn
+<script src="https://some-cdn.com/page-agent.umd.js"></script>
+
+<script>
+	const pageAgent = new PageAgent()
+	pageAgent.panel.show()
+</script>`}
+			/>
+
+			<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
+				<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+					⚠️ 注意事项
+				</h3>
+				<ul className="text-foreground/80 space-y-1">
+					<li>• 生产环境建议使用固定版本号</li>
+					<li>• 确保 HTTPS 环境下使用</li>
+					<li>• 配置 CSP 策略允许脚本执行</li>
+				</ul>
+			</div>
+		</div>
+	)
+}

pages/docs/integration/configuration/page.tsx

@@ -0,0 +1,38 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function Configuration() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">配置选项</h1>
+
+			<BetaNotice />
+
+			<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
+				详细的配置选项说明，帮助你定制 page-agent 的行为。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">基础配置</h2>
+
+			<CodeEditor className="mb-8" code={`// TODO`} />
+
+			<h2 className="text-2xl font-bold mb-3">高级选项</h2>
+
+			<div className="space-y-4">
+				<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+						🎯 元素选择策略
+					</h3>
+					<p className="text-foreground/80">配置 AI 如何选择和操作页面元素的策略。</p>
+				</div>
+
+				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+						⏱️ 超时设置
+					</h3>
+					<p className="text-foreground/80">设置操作超时时间，避免长时间等待。</p>
+				</div>
+			</div>
+		</div>
+	)
+}

pages/docs/integration/third-party-agent/page.tsx

@@ -0,0 +1,113 @@
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function ThirdPartyAgentPage() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">接入第三方 Agent</h1>
+			<p className="mb-6 leading-relaxed">
+				将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。
+			</p>
+
+			<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-6">
+				<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">💡 核心价值</h3>
+				<p className="text-blue-800 dark:text-blue-200">
+					让你的 Agent 不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。
+				</p>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-4">集成方式</h2>
+
+			<div className="space-y-4 mb-6">
+				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+						1. Function Calling
+					</h3>
+					<CodeEditor
+						code={`// 定义工具
+const pageAgentTool = {
+  name: "page_agent",
+  description: "执行网页操作",
+  parameters: {
+    type: "object",
+    properties: {
+      instruction: { type: "string", description: "操作指令" }
+    },
+    required: ["instruction"]
+  },
+  execute: async (params) => {
+    const result = await pageAgent.execute(params.instruction)
+    return { success: result.success, message: result.message }
+  }
+}
+
+// 注册到你的 agent 中`}
+						language="javascript"
+					/>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-4">应用场景</h2>
+			<div className="grid md:grid-cols-2 gap-4 mb-6">
+				<div className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
+					<h4 className="font-semibold mb-2">🤖 智能客服系统</h4>
+					<p className="text-sm text-gray-600 dark:text-gray-300">
+						客服机器人帮用户直接操作系统，如"帮我提交工单"
+					</p>
+				</div>
+				<div className="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
+					<h4 className="font-semibold mb-2">📋 业务流程助手</h4>
+					<p className="text-sm text-gray-600 dark:text-gray-300">
+						引导新员工完成复杂流程，如"完成客户入职"
+					</p>
+				</div>
+				<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
+					<h4 className="font-semibold mb-2">🎯 个人效率助手</h4>
+					<p className="text-sm text-gray-600 dark:text-gray-300">
+						跨网站帮你完成任务，如"预订会议室"
+					</p>
+				</div>
+				<div className="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
+					<h4 className="font-semibold mb-2">🔧 运维自动化</h4>
+					<p className="text-sm text-gray-600 dark:text-gray-300">
+						通过自然语言操作管理后台，如"重启服务器"
+					</p>
+				</div>
+			</div>
+
+			<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
+			<div className="space-y-4 mb-6">
+				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2">错误处理</h3>
+					<CodeEditor code={`// @TODO`} language="javascript" />
+				</div>
+
+				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2">权限控制</h3>
+					<CodeEditor code={`// @TODO`} language="javascript" />
+				</div>
+			</div>
+
+			<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
+				<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-100 mb-2">
+					⚠️ 注意事项
+				</h3>
+				<ul className="text-yellow-800 dark:text-yellow-200 space-y-1 text-sm">
+					<li>• 确保目标网站允许自动化操作</li>
+					<li>• 实现适当的频率限制</li>
+					<li>• 敏感操作建议要求人工确认</li>
+				</ul>
+			</div>
+
+			<div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 p-4 rounded-lg">
+				<h3 className="text-lg font-semibold mb-2">🎉 开始集成</h3>
+				<p className="mb-3">通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。</p>
+				<a
+					href="/docs/integration/configuration"
+					className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
+				>
+					查看配置选项 →
+				</a>
+			</div>
+		</div>
+	)
+}

pages/docs/introduction/limitations/page.tsx

@@ -0,0 +1,156 @@
+export default function LimitationsPage() {
+	return (
+		<div className="max-w-4xl mx-auto">
+			<div className="mb-8">
+				<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">使用限制</h1>
+				<p className="text-xl text-gray-600 dark:text-gray-300">
+					了解 page-agent 当前的功能边界和技术限制
+				</p>
+			</div>
+
+			<div className="prose prose-lg dark:prose-invert max-w-none">
+				<h2 className="text-2xl font-bold mb-3">页面支持限制</h2>
+				<div className="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400 p-4 mb-6">
+					<h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">单页应用限制</h3>
+					<ul className="text-blue-700 dark:text-blue-300 space-y-2">
+						<li>
+							• <strong>仅支持单页应用（SPA）</strong>：目前只能在单个页面内进行操作
+						</li>
+						<li>
+							• <strong>多页接力功能正在设计中</strong>：暂时无法跨页面执行连续任务
+						</li>
+						<li>
+							• <strong>无法操作未接入该能力的网站</strong>：需要目标网站主动集成 page-agent
+						</li>
+					</ul>
+				</div>
+
+				<h2 className="text-2xl font-bold mb-3">交互行为限制</h2>
+				<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
+					<h3 className="font-semibold mb-4">支持的操作</h3>
+					<div className="grid md:grid-cols-2 gap-4 mb-6">
+						<div className="space-y-2">
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>点击操作</span>
+							</div>
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>文本输入</span>
+							</div>
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>页面滚动</span>
+							</div>
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>表单提交</span>
+							</div>
+						</div>
+						<div className="space-y-2">
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>选择操作</span>
+							</div>
+
+							<div className="flex items-center text-green-600 dark:text-green-400">
+								<span className="mr-2">✅</span>
+								<span>焦点切换</span>
+							</div>
+						</div>
+					</div>
+
+					<h3 className="font-semibold mb-4">不支持的操作</h3>
+					<div className="grid md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>鼠标悬停（hover）</span>
+							</div>
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>拖拽操作</span>
+							</div>
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>右键菜单</span>
+							</div>
+						</div>
+						<div className="space-y-2">
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>图形绘制</span>
+							</div>
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>键盘快捷键</span>
+							</div>
+							<div className="flex items-center text-red-600 dark:text-red-400">
+								<span className="mr-2">❌</span>
+								<span>基于点击区域或鼠标位置的控制</span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<h2 className="text-2xl font-bold mb-3">网页理解限制</h2>
+				<div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 p-4 mb-6">
+					<h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">无视觉能力</h3>
+					<p className="text-red-700 dark:text-red-300 mb-3">
+						page-agent 基于 DOM 结构进行理解和操作，<strong>没有视觉识别能力</strong>
+						，无法理解以下内容：
+					</p>
+					<ul className="text-red-700 dark:text-red-300 space-y-1">
+						<li>
+							• <strong>图片内容</strong>：无法识别图片中的文字、图标或视觉元素
+						</li>
+						<li>
+							• <strong>Canvas 画布</strong>：无法理解 Canvas 中绘制的图形和内容
+						</li>
+						<li>
+							• <strong>WebGL 3D 内容</strong>：无法操作 3D 场景中的元素
+						</li>
+						<li>
+							• <strong>SVG 图形</strong>：无法理解 SVG 中的视觉内容和路径
+						</li>
+					</ul>
+				</div>
+
+				<h2 className="text-2xl font-bold mb-3">被操作网站要求</h2>
+				<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
+					<div className="space-y-4">
+						<div>
+							<h3 className="font-semibold mb-2">语义化和易用性</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何
+								accessibility 特性，可能影响 AI 的理解准确性。
+							</p>
+						</div>
+						<div>
+							<h3 className="font-semibold mb-2">UI/UX</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响
+								AI 的理解和操作。
+							</p>
+						</div>
+						<div>
+							<h3 className="font-semibold mb-2">环境要求</h3>
+							<p className="text-gray-600 dark:text-gray-300">modern browser</p>
+						</div>
+					</div>
+				</div>
+
+				<h2>未来规划</h2>
+				<div className="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-400 p-4">
+					<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">即将支持</h3>
+					<ul className="text-green-700 dark:text-green-300 space-y-1">
+						<li>• 多页面接力操作能力</li>
+						<li>• 更丰富的鼠标交互支持</li>
+						<li>• 基础的视觉理解能力</li>
+						<li>• 更智能的错误恢复机制</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	)
+}

pages/docs/introduction/overview/page.tsx

@@ -0,0 +1,188 @@
+export default function Overview() {
+	return (
+		<article>
+			{/* 头图 */}
+			<figure className="mb-8 rounded-xl overflow-hidden">
+				<img
+					src="https://img.alicdn.com/imgextra/i4/O1CN01eppTGh27iefUEegnN_!!6000000007831-0-tps-3015-1024.jpg"
+					alt="page-agent 概览图示"
+					className="w-full h-64 object-cover"
+				/>
+			</figure>
+
+			<h1 className="text-4xl font-bold mb-6">Overview</h1>
+
+			<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
+				page-agent 是一个完全基于Web技术的 UI Agent，让任何网站都能拥有 AI 操作员。 通过简单的 CDN
+				引入，为你的 Web 应用注入智能化能力。
+			</p>
+
+			<section>
+				<h2 className="text-2xl font-bold mb-4">什么是 page-agent？</h2>
+
+				<p className="text-foreground/80 mb-8 leading-relaxed ">
+					page-agent 是一个<strong>页面内嵌式 UI Agent</strong>。
+					与传统的浏览器自动化工具不同，page-agent 面向<strong>网站开发者</strong>
+					，而非爬虫或通用Agent开发者，将 Agent 集成到你的网站中，
+					让用户可以通过自然语言与页面进行交互。
+				</p>
+			</section>
+
+			<section>
+				<h2 className="text-2xl font-bold mb-3">核心特性</h2>
+
+				<div className="grid md:grid-cols-2 gap-4 mb-8" role="list">
+					<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+							🧠 智能 DOM 理解
+						</h3>
+						<p className="">
+							节约每一个 token。基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。
+						</p>
+					</div>
+
+					<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
+							🔒 安全可控
+						</h3>
+						<p className="">
+							支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。
+						</p>
+					</div>
+
+					<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+							⚡ 零后端部署
+						</h3>
+						<p className="">CDN 直接引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。</p>
+					</div>
+
+					<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
+							♿ 普惠智能
+						</h3>
+						<p className="">为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。</p>
+					</div>
+				</div>
+
+				<h2 className="text-2xl font-bold mb-4">与 browser-use 的区别</h2>
+
+				<div className="overflow-x-auto mb-8">
+					<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
+						<thead>
+							<tr className="bg-gray-50 dark:bg-gray-800">
+								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
+									特性
+								</th>
+								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
+									page-agent
+								</th>
+								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
+									browser-use
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
+									部署方式
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									页面内嵌组件
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">外部工具</td>
+							</tr>
+							<tr>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
+									操作范围
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">当前页面</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									整个浏览器
+								</td>
+							</tr>
+							<tr>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
+									目标用户
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									网站开发者
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									爬虫/Agent 开发者
+								</td>
+							</tr>
+							<tr>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
+									使用场景
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									用户体验增强
+								</td>
+								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
+									自动化任务
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h2 className="text-2xl font-bold mb-4">应用场景</h2>
+
+				<ul className="space-y-4 mb-8">
+					<li className="flex items-start space-x-3">
+						<span className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
+							1
+						</span>
+						<div className="">
+							<strong>对接答疑机器人：</strong>
+							把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。
+						</div>
+					</li>
+					<li className="flex items-start space-x-3">
+						<span className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
+							2
+						</span>
+						<div className="">
+							<strong>交互升级/智能化改造：</strong>
+							一行代码，老应用变身Agent，产品专家帮用户操作复杂 B
+							端软件。降低人工支持成本，提高用户满意度。
+						</div>
+					</li>
+					<li className="flex items-start space-x-3">
+						<span className="w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
+							3
+						</span>
+						<div className="">
+							<strong>产品教学：</strong>
+							向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。
+						</div>
+					</li>
+					<li className="flex items-start space-x-3">
+						<span className="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
+							4
+						</span>
+						<div className="">
+							<strong>无障碍支持：</strong>
+							为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。
+						</div>
+					</li>
+				</ul>
+
+				<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 p-4 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2">🚀 开始使用</h3>
+					<p className="mb-3 ">
+						准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。
+					</p>
+					<a
+						href="/docs/introduction/quick-start"
+						className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
+						role="button"
+					>
+						快速开始 →
+					</a>
+				</div>
+			</section>
+		</article>
+	)
+}

pages/docs/introduction/quick-start/page.tsx

@@ -0,0 +1,81 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function QuickStart() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
+
+			<BetaNotice />
+
+			<p className=" mb-6 leading-relaxed">
+				几分钟内完成 page-agent 的集成，让你的网站拥有 AI 操作员。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">安装步骤</h2>
+
+			<div className="space-y-4 mb-6">
+				<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+						1. 引入方式
+					</h3>
+					<div className="space-y-3">
+						<div>
+							<p className="text-sm font-medium mb-2">CDN 引入</p>
+							<CodeEditor
+								code={`// 仅供测试使用，生产环境联系 @西萌
+<script src="https://dev.g.alicdn.com/dt/page-use.js/0.0.1/lib/page-agent.umd.cjs"></script>`}
+								language="html"
+							/>
+						</div>
+						<div>
+							<p className="text-sm font-medium mb-2">NPM 安装</p>
+							<CodeEditor
+								code={`// npm install page-agent
+import PageAgent from 'page-agent'`}
+								language="bash"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
+						2. 初始化配置
+					</h3>
+					<CodeEditor
+						code={`// 仅供测试使用，生产环境需要配置 LLM 接入点，本工具不提供 LLM 服务
+const pageAgent = new PageAgent()`}
+						language="javascript"
+					/>
+				</div>
+
+				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
+						3. 开始使用
+					</h3>
+					<CodeEditor
+						code={`// 程序化执行自然语言指令
+await pageAgent.execute('点击提交按钮，然后填写用户名为张三');
+
+// 或者显示对话框让用户输入指令
+pageAgent.panel.show()
+`}
+						language="javascript"
+					/>
+				</div>
+			</div>
+
+			<div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 p-4 rounded-lg">
+				<h3 className="text-lg font-semibold mb-2">🎉 完成！</h3>
+				<p className="mb-3 ">现在你的网站已经拥有了 AI 操作员能力。</p>
+				<a
+					href="/docs/features/security-permissions"
+					className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200"
+				>
+					了解更多功能 →
+				</a>
+			</div>
+		</div>
+	)
+}