docs: simplify i18n

packages/website/src/i18n/config.ts

@@ -3,22 +3,14 @@ import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
 import commonEn from './locales/en-US/common'
-import docsEn from './locales/en-US/docs'
-import homeEn from './locales/en-US/home'
 import commonZh from './locales/zh-CN/common'
-import docsZh from './locales/zh-CN/docs'
-import homeZh from './locales/zh-CN/home'
 
 const resources = {
 	'zh-CN': {
 		common: commonZh,
-		home: homeZh,
-		docs: docsZh,
 	},
 	'en-US': {
 		common: commonEn,
-		home: homeEn,
-		docs: docsEn,
 	},
 }
 

packages/website/src/i18n/locales/en-US/docs.ts

@@ -1,157 +0,0 @@
-export default {
-	overview: {
-		title: 'Overview',
-		subtitle:
-			'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.',
-		what_is: 'What is page-agent?',
-		what_is_desc:
-			'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.',
-		features_title: 'Core Features',
-		feature_dom: {
-			title: '🧠 Smart DOM Analysis',
-			desc: 'DOM-based analysis with high-intensity dehydration. No visual recognition needed. Pure text for fast and precise operations.',
-		},
-		feature_secure: {
-			title: '🔒 Secure & Controllable',
-			desc: 'Supports operation allowlists, data masking protection. Inject custom knowledge to make AI work by your rules.',
-		},
-		feature_backend: {
-			title: '⚡ Zero Backend',
-			desc: 'CDN or NPM import with custom LLM endpoints.',
-		},
-		feature_accessible: {
-			title: '♿ Accessible Intelligence',
-			desc: 'Provides natural language interface for complex B2B systems and admin panels. Makes software easy for everyone.',
-		},
-		vs_browser_use: 'vs. browser-use',
-		table_feature: 'Feature',
-		table_deployment: 'Deployment',
-		table_deployment_pa: 'Embedded component',
-		table_deployment_bu: 'External tool',
-		table_scope: 'Scope',
-		table_scope_pa: 'Current page',
-		table_scope_bu: 'Entire browser',
-		table_user: 'Target Users',
-		table_user_pa: 'Web developers',
-		table_user_bu: 'Scraper/Agent developers',
-		table_scenario: 'Use Case',
-		table_scenario_pa: 'UX enhancement',
-		table_scenario_bu: 'Automation tasks',
-		use_cases_title: 'Use Cases',
-		use_case1_title: 'Connect Support Bots:',
-		use_case1_desc:
-			"Turn your support assistant into a full agent. Customer service bots no longer just say 'Please click the settings button then click...'—they operate for users directly.",
-		use_case2_title: 'Modernize Legacy Apps:',
-		use_case2_desc:
-			'One line of code transforms old apps into agents. Product experts help users navigate complex B2B software. Reduce support costs and improve satisfaction.',
-		use_case3_title: 'Interactive Training:',
-		use_case3_desc:
-			"Demonstrate workflows in real-time. Let AI show the complete process of 'how to submit an expense report.'",
-		use_case4_title: 'Accessibility:',
-		use_case4_desc:
-			'Provide natural language interaction for visually impaired and elderly users. Connect screen readers or voice assistants to make software accessible to everyone.',
-		get_started_title: '🚀 Get Started',
-		get_started_desc:
-			'Ready to add an AI operator to your website? Check our quick start guide for integration in minutes.',
-		get_started_button: 'Quick Start →',
-	},
-	quick_start: {
-		title: 'Quick Start',
-		subtitle: 'Integrate page-agent in minutes.',
-		installation: 'Installation Steps',
-		step1_title: '1. Import Options',
-		step1_cdn: 'CDN Import',
-		step1_npm: 'NPM Install',
-		step2_title: '2. Initialize Configuration',
-		step3_title: '3. Start Using',
-	},
-	limitations: {
-		title: 'Limitations',
-		subtitle: "Understand page-agent's current capabilities and technical constraints",
-		page_support: 'Page Support Limitations',
-		spa_limit_title: 'Single Page Application Limits',
-		spa_limit_1: '• SPA only: Currently operates within a single page',
-		spa_limit_2: '• Multi-page relay in design: Cannot execute continuous tasks across pages yet',
-		spa_limit_3: '• Requires integration: Cannot operate on sites without page-agent',
-		interaction_limits: 'Interaction Limitations',
-		supported_ops: 'Supported Operations',
-		op_click: 'Click',
-		op_input: 'Text input',
-		op_scroll: 'Scroll',
-		op_submit: 'Form submit',
-		op_select: 'Select',
-		op_focus: 'Focus',
-		unsupported_ops: 'Unsupported Operations',
-		op_hover: 'Mouse hover',
-		op_drag: 'Drag & drop',
-		op_context: 'Right-click menu',
-		op_draw: 'Drawing',
-		op_keyboard: 'Keyboard shortcuts',
-		op_position: 'Position-based control',
-		understanding_limits: 'Understanding Limitations',
-		no_vision_title: 'No Visual Recognition',
-		no_vision_desc:
-			'page-agent operates based on DOM structure with no visual recognition. Cannot understand:',
-		no_vision_1: '• Image content: Cannot recognize text, icons, or visual elements in images',
-		no_vision_2: '• Canvas: Cannot understand graphics drawn on Canvas',
-		no_vision_3: '• WebGL 3D: Cannot operate elements in 3D scenes',
-		no_vision_4: '• SVG graphics: Cannot understand visual content and paths in SVG',
-		website_requirements: 'Website Requirements',
-		req_semantic_title: 'Semantic & Usability',
-		req_semantic_desc:
-			'All operations rely on semantic tags and attributes. Poor semantic structure or lack of accessibility features may affect AI understanding accuracy.',
-		req_ux_title: 'UI/UX',
-		req_ux_desc:
-			'Counter-intuitive interaction rules, visual-only operation hints, complex mouse interactions, or rapidly appearing/disappearing elements can affect AI understanding and operation.',
-		req_env_title: 'Environment',
-		req_env_desc: 'modern browser',
-		future: 'Future Plans',
-		future_title: 'Coming Soon',
-		future_1: '• Multi-page relay capabilities',
-		future_2: '• Richer mouse interaction support',
-		future_3: '• Basic visual understanding',
-		future_4: '• Smarter error recovery',
-	},
-	models: {
-		title: 'Models',
-		subtitle:
-			'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
-		recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities.',
-		recommended: 'Recommended Models',
-		available: 'Tested Models',
-		available_verified: 'Verified Working Models',
-		tips: 'Tips',
-		tip_1: 'Reasoning models (like GPT-5) are slower with no advantage',
-		tip_2:
-			'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended',
-		tip_3:
-			'Small models or those unable to handle complex tool definitions typically perform poorly',
-		security: '🔐 Production Authentication',
-		security_warning: '⚠️ Never commit real LLM API Keys to your frontend code',
-		security_desc:
-			'In production environments, to hide the real LLM API Keys, we recommend the following architecture:',
-		security_backend_proxy: 'Backend Proxy Pattern',
-		security_backend_desc:
-			'Set up a backend LLM proxy endpoint that uses the same authentication method as other APIs in your website, such as:',
-		security_method_1: '• Session/Cookie-based authentication',
-		security_method_2: '• OIDC (OpenID Connect) single sign-on',
-		security_method_3: '• Temporary Access Key or JWT Token',
-		configuration: 'Configuration',
-	},
-	custom_tools: {
-		title: 'Custom Tools',
-		subtitle:
-			'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.',
-		registration: 'Tool Registration',
-		registration_desc:
-			'Each custom tool requires four core properties: name, description, input schema, and execute function.',
-		page_filter: 'Page Filter',
-		page_filter_desc:
-			'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.',
-		best_practices: 'Best Practices',
-		bp_performance: '⚡ Performance Optimization',
-		bp_1: '• Use pageFilter to reduce unnecessary tool loading',
-		bp_2: '• Implement appropriate caching in execute functions',
-		bp_3: '• Avoid long-running sync operations in tools',
-	},
-}

packages/website/src/i18n/locales/en-US/home.ts

@@ -1,82 +0,0 @@
-export default {
-	hero: {
-		badge: 'GUI Agent in your webpage',
-		title_line1: 'The AI Operator',
-		title_line2: 'Living in Your Web App',
-		subtitle_emoji: '🪄One line of code',
-		subtitle_main: ' adds intelligent GUI Agents to your website.',
-		subtitle_detail: 'Users give natural language commands, AI handles the rest.',
-		tab_try: '🚀 Try It Now',
-		tab_other: '🌐 Try on Other Sites',
-		input_placeholder: 'Describe what you want AI to do...',
-		execute_button: 'Run',
-		default_task:
-			'Goto docs in navigation bar, find Quick-Start section, and summarize in markdown',
-	},
-	try_other: {
-		step1_title: 'Step 1:',
-		step1_content: 'Show your bookmarks bar',
-		step2_title: 'Step 2:',
-		step2_content: 'Drag this button to your bookmarks',
-		cdn_label: 'CDN Source',
-		cdn_international: 'International',
-		cdn_china: 'China Mirror',
-		step3_title: 'Step 3:',
-		step3_content: 'Click the bookmark on any site to activate',
-		notice_title: '⚠️ Heads Up',
-		notice_items: {
-			item1: 'Demo only—link may expire without notice',
-			item2: 'This free demo uses DeepSeek API (see their terms and privacy policy)',
-			item3: 'Some sites block script injection (CSP policies)',
-			item4: 'Works on single-page apps only—reload required after navigation',
-			item5: 'Text-only understanding—no image recognition or drag-and-drop',
-			item6_prefix: 'Full limitations in',
-			item6_link: 'Docs',
-		},
-	},
-	benefits: {
-		no_backend: 'Pure Front-end Solution',
-		private_model: 'Your Own Models',
-		data_masking: 'Built-in Privacy',
-		open_source: 'MIT Open Source',
-	},
-	features: {
-		section_title: 'Why PageAgent',
-		in_page: {
-			title: 'In-page Solution',
-			desc: 'Runs entirely within your page. No browser extensions, no headless browsers, and no backend required.',
-		},
-		secure_integration: {
-			title: 'Secure by Design',
-			desc: 'Control what AI can access with allowlists, data masking, and custom knowledge injection. Your rules, your data.',
-		},
-		zero_backend: {
-			title: 'Zero Backend Setup',
-			desc: 'Just drop in a script. Works with any LLM provider—OpenAI, Anthropic, or your own models.',
-		},
-		accessible: {
-			title: 'Natural Language UI',
-			desc: 'Transform complex admin panels into chat interfaces. Make powerful tools accessible to everyone, not just experts.',
-		},
-	},
-	use_cases: {
-		section_title: 'Where It Shines',
-		section_subtitle: 'From simple forms to complex workflows, AI understands and executes',
-		case1: {
-			title: 'Supercharge Support Bots',
-			desc: 'Stop telling users where to click—let AI do it for them. Turn your chatbot from a guide into an operator that actually completes tasks.',
-		},
-		case2: {
-			title: 'Modernize Legacy Apps',
-			desc: 'Add AI superpowers to old software without rebuilding. One script tag transforms complex enterprise tools into chat-driven interfaces.',
-		},
-		case3: {
-			title: 'Interactive Walkthroughs',
-			desc: "Show, don't tell. Let AI demonstrate workflows in real-time—perfect for onboarding or training new users on complex systems.",
-		},
-		case4: {
-			title: 'Accessibility First',
-			desc: 'Make web apps accessible through natural language. Perfect for screen readers, voice control, or users who find traditional interfaces challenging.',
-		},
-	},
-}

packages/website/src/i18n/locales/zh-CN/docs.ts

@@ -1,152 +0,0 @@
-export default {
-	overview: {
-		title: 'Overview',
-		subtitle:
-			'page-agent 是一个完全基于 Web 技术的 GUI Agent，简单几步，让你的网站拥有 AI 操作员。',
-		what_is: '什么是 page-agent？',
-		what_is_desc:
-			'page-agent 是一个页面内嵌式 GUI Agent。与传统的浏览器自动化工具不同，page-agent 面向网站开发者，而非爬虫或Agent客户端开发者；将 Agent 集成到你的网站中，让用户可以通过自然语言与页面进行交互。',
-		features_title: '核心特性',
-		feature_dom: {
-			title: '🧠 智能 DOM 理解',
-			desc: '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。',
-		},
-		feature_secure: {
-			title: '🔒 安全可控',
-			desc: '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。',
-		},
-		feature_backend: {
-			title: '⚡ 零后端部署',
-			desc: 'CDN 或 NPM 引入，自定义 LLM 接入点。',
-		},
-		feature_accessible: {
-			title: '♿ 普惠智能',
-			desc: '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。',
-		},
-		vs_browser_use: '与 browser-use 的区别',
-		table_feature: '特性',
-		table_deployment: '部署方式',
-		table_deployment_pa: '页面内嵌组件',
-		table_deployment_bu: '外部工具',
-		table_scope: '操作范围',
-		table_scope_pa: '当前页面',
-		table_scope_bu: '整个浏览器',
-		table_user: '目标用户',
-		table_user_pa: '网站开发者',
-		table_user_bu: '爬虫/Agent 开发者',
-		table_scenario: '使用场景',
-		table_scenario_pa: '用户体验增强',
-		table_scenario_bu: '自动化任务',
-		use_cases_title: '应用场景',
-		use_case1_title: '对接答疑机器人：',
-		use_case1_desc:
-			'把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。',
-		use_case2_title: '交互升级/智能化改造：',
-		use_case2_desc:
-			'一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。',
-		use_case3_title: '产品教学：',
-		use_case3_desc:
-			'向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。',
-		use_case4_title: '无障碍支持：',
-		use_case4_desc:
-			'为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。',
-		get_started_title: '🚀 开始使用',
-		get_started_desc:
-			'准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。',
-		get_started_button: '快速开始 →',
-	},
-	quick_start: {
-		title: 'Quick Start',
-		subtitle: '几分钟内完成 page-agent 的集成。',
-		installation: '安装步骤',
-		step1_title: '1. 引入方式',
-		step1_cdn: 'CDN 引入',
-		step1_npm: 'NPM 安装',
-		step2_title: '2. 初始化配置',
-		step3_title: '3. 开始使用',
-	},
-	limitations: {
-		title: '使用限制',
-		subtitle: '了解 page-agent 当前的功能边界和技术限制',
-		page_support: '页面支持限制',
-		spa_limit_title: '单页应用限制',
-		spa_limit_1: '• 仅支持单页应用（SPA）：目前只能在单个页面内进行操作',
-		spa_limit_2: '• 多页接力功能正在设计中：暂时无法跨页面执行连续任务',
-		spa_limit_3: '• 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent',
-		interaction_limits: '交互行为限制',
-		supported_ops: '支持的操作',
-		op_click: '点击操作',
-		op_input: '文本输入',
-		op_scroll: '页面滚动',
-		op_submit: '表单提交',
-		op_select: '选择操作',
-		op_focus: '焦点切换',
-		unsupported_ops: '不支持的操作',
-		op_hover: '鼠标悬停（hover）',
-		op_drag: '拖拽操作',
-		op_context: '右键菜单',
-		op_draw: '图形绘制',
-		op_keyboard: '键盘快捷键',
-		op_position: '基于点击区域或鼠标位置的控制',
-		understanding_limits: '网页理解限制',
-		no_vision_title: '无视觉能力',
-		no_vision_desc: 'page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力，无法理解以下内容：',
-		no_vision_1: '• 图片内容：无法识别图片中的文字、图标或视觉元素',
-		no_vision_2: '• Canvas 画布：无法理解 Canvas 中绘制的图形和内容',
-		no_vision_3: '• WebGL 3D 内容：无法操作 3D 场景中的元素',
-		no_vision_4: '• SVG 图形：无法理解 SVG 中的视觉内容和路径',
-		website_requirements: '被操作网站要求',
-		req_semantic_title: '语义化和易用性',
-		req_semantic_desc:
-			'所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 accessibility 特性，可能影响 AI 的理解准确性。',
-		req_ux_title: 'UI/UX',
-		req_ux_desc:
-			'反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 AI 的理解和操作。',
-		req_env_title: '环境要求',
-		req_env_desc: 'modern browser',
-		future: '未来规划',
-		future_title: '即将支持',
-		future_1: '• 多页面接力操作能力',
-		future_2: '• 更丰富的鼠标交互支持',
-		future_3: '• 基础的视觉理解能力',
-		future_4: '• 更智能的错误恢复机制',
-	},
-	models: {
-		title: '模型',
-		subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
-		recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。',
-		recommended: '推荐模型',
-		available: '已测试模型',
-		available_verified: '已验证可用模型',
-		tips: '提示',
-		tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要',
-		tip_2:
-			'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature',
-		tip_3: '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳',
-		security: '🔐 生产环境鉴权建议',
-		security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码',
-		security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:',
-		security_backend_proxy: '后端代理转发',
-		security_backend_desc:
-			'在后端搭建一个 LLM 流量转发接口,该接口使用与你网站上其他接口相同的鉴权方式,例如:',
-		security_method_1: '• Session/Cookie 会话认证',
-		security_method_2: '• OIDC (OpenID Connect) 单点登录',
-		security_method_3: '• 临时 Access Key 或 JWT Token',
-		configuration: '配置方式',
-	},
-	custom_tools: {
-		title: '自定义工具',
-		subtitle:
-			'通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI 安全调用你的业务逻辑。',
-		registration: '工具注册',
-		registration_desc:
-			'每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。',
-		page_filter: '页面过滤器',
-		page_filter_desc: '通过 pageFilter 属性控制工具在哪些页面可见，提升安全性和用户体验。',
-		best_practices: '最佳实践',
-		bp_performance: '⚡ 性能优化',
-		bp_1: '• 使用 pageFilter 减少不必要的工具加载',
-		bp_2: '• 在 execute 函数中实现适当的缓存机制',
-		bp_3: '• 避免在工具中执行耗时的同步操作',
-	},
-}

packages/website/src/i18n/locales/zh-CN/home.ts

@@ -1,81 +0,0 @@
-export default {
-	hero: {
-		badge: 'GUI Agent in your webpage',
-		title_line1: '让你的 Web 应用',
-		title_line2: '拥有 AI 操作员',
-		subtitle_emoji: '🪄一行代码',
-		subtitle_main: '，为你的网站添加 GUI Agent。',
-		subtitle_detail: '用户/答疑机器人给出文字指示，AI 帮你操作页面。',
-		tab_try: '🚀 立即尝试',
-		tab_other: '🌐 其他网页尝试',
-		input_placeholder: '输入您想要 AI 执行的任务...',
-		execute_button: '执行',
-		default_task: '从导航栏中进入文档页，打开“快速开始”相关的文档，帮我总结成 markdown',
-	},
-	try_other: {
-		step1_title: '步骤 1:',
-		step1_content: '显示收藏夹栏',
-		step2_title: '步骤 2:',
-		step2_content: '拖拽下面按钮到收藏夹栏',
-		cdn_label: 'CDN 源',
-		cdn_international: '国际',
-		cdn_china: '国内镜像',
-		step3_title: '步骤 3:',
-		step3_content: '在其他网站点击收藏夹中的按钮即可使用',
-		notice_title: '⚠️ 注意',
-		notice_items: {
-			item1: '仅做技术评估，链接定期失效',
-			item2: '使用 DeepSeek 模型，参考 DeepSeek 用户协议和隐私政策',
-			item3: '部分网站屏蔽了链接嵌入，将无反应',
-			item4: '仅支持单页应用，页面跳转后需要重新注入',
-			item5: '仅识别文本，不识别图像，不支持拖拽等复杂交互',
-			item6_prefix: '详细使用限制参照',
-			item6_link: '《文档》',
-		},
-	},
-	benefits: {
-		no_backend: '纯前端方案',
-		private_model: '支持私有模型',
-		data_masking: '无痛脱敏',
-		open_source: 'MIT 开源',
-	},
-	features: {
-		section_title: '核心特性',
-		in_page: {
-			title: '纯页面内方案',
-			desc: '完全运行在你的页面内。不需要浏览器插件、不需要无头浏览器，不需要后端。',
-		},
-		secure_integration: {
-			title: '安全可控集成',
-			desc: '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。',
-		},
-		zero_backend: {
-			title: '零后端部署',
-			desc: '前端脚本引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。',
-		},
-		accessible: {
-			title: '普惠智能交互',
-			desc: '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。',
-		},
-	},
-	use_cases: {
-		section_title: '应用场景',
-		section_subtitle: '从简单的表单填写到复杂的业务流程，AI 都能理解并执行',
-		case1: {
-			title: '对接答疑机器人',
-			desc: '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。',
-		},
-		case2: {
-			title: '交互升级/智能化改造',
-			desc: '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。',
-		},
-		case3: {
-			title: '产品教学',
-			desc: '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。',
-		},
-		case4: {
-			title: '无障碍支持',
-			desc: '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。',
-		},
-	},
-}

packages/website/src/i18n/types.ts

@@ -1,16 +1,12 @@
 import 'react-i18next'
 
 import type commonZh from './locales/zh-CN/common'
-import type docsZh from './locales/zh-CN/docs'
-import type homeZh from './locales/zh-CN/home'
 
 declare module 'react-i18next' {
 	interface CustomTypeOptions {
 		defaultNS: 'common'
 		resources: {
 			common: typeof commonZh
-			home: typeof homeZh
-			docs: typeof docsZh
 		}
 	}
 }

packages/website/src/pages/Home.tsx

@@ -40,11 +40,16 @@ function getInjection(useCN?: boolean) {
 }
 
 export default function HomePage() {
-	const { t, i18n } = useTranslation(['home', 'common'])
+	const { i18n } = useTranslation('common')
-	const [task, setTask] = useState(() => t('home:hero.default_task'))
+	const isZh = i18n.language === 'zh-CN'
+
+	const defaultTask = isZh
+		? '从导航栏中进入文档页，打开"快速开始"相关的文档，帮我总结成 markdown'
+		: 'Goto docs in navigation bar, find Quick-Start section, and summarize in markdown'
+
+	const [task, setTask] = useState(() => defaultTask)
 
 	// Update task when language changes
-	const defaultTask = t('home:hero.default_task')
 	useEffect(() => {
 		setTask(defaultTask)
 	}, [defaultTask])
@@ -131,7 +136,7 @@ export default function HomePage() {
 									aria-hidden="true"
 								></span>
 								<AnimatedGradientText colorFrom="#3b82f6" colorTo="#8b5cf6">
-									{t('home:hero.badge')}
+									GUI Agent in your webpage
 								</AnimatedGradientText>
 							</div>
 
@@ -139,20 +144,24 @@ export default function HomePage() {
 								id="hero-heading"
 								className="text-5xl lg:text-7xl font-bold mb-8 bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent pb-1"
 							>
-								{t('home:hero.title_line1')}
+								{isZh ? '让你的 Web 应用' : 'The AI Operator'}
 								<br />
-								{t('home:hero.title_line2')}
+								{isZh ? '拥有 AI 操作员' : 'Living in Your Web App'}
 							</h1>
 
 							<p className="text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed">
 								<Highlighter action="underline" color="#8b5cf6" strokeWidth={2}>
 									<span className="bg-linear-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent font-bold">
-										{t('home:hero.subtitle_emoji')}
+										{isZh ? '🪄一行代码' : '🪄One line of code'}
 									</span>
 								</Highlighter>
-								{t('home:hero.subtitle_main')}
+								{isZh
+									? '，为你的网站添加 GUI Agent。'
+									: ' adds intelligent GUI Agents to your website.'}
 								<br />
-								{t('home:hero.subtitle_detail')}
+								{isZh
+									? '用户/答疑机器人给出文字指示，AI 帮你操作页面。'
+									: 'Users give natural language commands, AI handles the rest.'}
 							</p>
 
 							{/* Try It Now Section - Tab Card */}
@@ -173,7 +182,7 @@ export default function HomePage() {
 														: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
 												}`}
 											>
-												{t('home:hero.tab_try')}
+												{isZh ? '🚀 立即尝试' : '🚀 Try It Now'}
 											</button>
 											<button
 												onClick={() => setActiveTab('other')}
@@ -183,7 +192,7 @@ export default function HomePage() {
 														: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
 												}`}
 											>
-												{t('home:hero.tab_other')}
+												{isZh ? '🌐 其他网页尝试' : '🌐 Try on Other Sites'}
 											</button>
 										</div>
 
@@ -195,7 +204,11 @@ export default function HomePage() {
 														<input
 															value={task}
 															onChange={(e) => setTask(e.target.value)}
-															placeholder={t('home:hero.input_placeholder')}
+															placeholder={
+																isZh
+																	? '输入您想要 AI 执行的任务...'
+																	: 'Describe what you want AI to do...'
+															}
 															className="w-full px-4 py-3 pr-20 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm mb-0"
 															data-page-agent-not-interactive
 														/>
@@ -206,7 +219,7 @@ export default function HomePage() {
 															className="absolute right-2 top-2 px-5 py-1.5 bg-linear-to-r from-blue-600 to-purple-600 text-white font-medium rounded-md hover:shadow-md transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none text-sm"
 															data-page-agent-not-interactive
 														>
-															{t('home:hero.execute_button')}
+															{isZh ? '执行' : 'Run'}
 														</button>
 													</div>
 												</div>
@@ -220,15 +233,17 @@ export default function HomePage() {
 														<div className="bg-blue-50 dark:bg-gray-700 p-4 rounded-lg">
 															<p className="text-gray-700 dark:text-gray-300 text-sm mb-3">
 																<span className="font-semibold">
-																	{t('home:try_other.step1_title')}
+																	{isZh ? '步骤 1:' : 'Step 1:'}
 																</span>{' '}
-																{t('home:try_other.step1_content')}
+																{isZh ? '显示收藏夹栏' : 'Show your bookmarks bar'}
 															</p>
 															<div className="flex items-center justify-center gap-2">
 																<kbd className="px-2 py-1 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded text-xs font-mono">
 																	Ctrl + Shift + B
 																</kbd>
-																<span className="text-gray-500 dark:text-gray-400">或</span>
+																<span className="text-gray-500 dark:text-gray-400">
+																	{isZh ? '或' : 'or'}
+																</span>
 																<kbd className="px-2 py-1 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded text-xs font-mono">
 																	⌘ + Shift + B
 																</kbd>
@@ -239,9 +254,11 @@ export default function HomePage() {
 														<div className="bg-green-50 dark:bg-gray-700 p-4 rounded-lg">
 															<p className="text-gray-700 dark:text-gray-300 text-sm mb-3">
 																<span className="font-semibold">
-																	{t('home:try_other.step2_title')}
+																	{isZh ? '步骤 2:' : 'Step 2:'}
 																</span>{' '}
-																{t('home:try_other.step2_content')}
+																{isZh
+																	? '拖拽下面按钮到收藏夹栏'
+																	: 'Drag this button to your bookmarks'}
 															</p>
 															<div className="flex items-center justify-center gap-3">
 																<select
@@ -252,9 +269,11 @@ export default function HomePage() {
 																	className="px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200"
 																>
 																	<option value="international">
-																		{t('home:try_other.cdn_international')}
+																		{isZh ? '国际' : 'International'}
+																	</option>
+																	<option value="china">
+																		{isZh ? '国内镜像' : 'China Mirror'}
 																	</option>
-																	<option value="china">{t('home:try_other.cdn_china')}</option>
 																</select>
 																<div
 																	dangerouslySetInnerHTML={{
@@ -268,9 +287,11 @@ export default function HomePage() {
 														<div className="bg-purple-50 dark:bg-gray-700 p-4 rounded-lg">
 															<p className="text-gray-700 dark:text-gray-300 text-sm">
 																<span className="font-semibold">
-																	{t('home:try_other.step3_title')}
+																	{isZh ? '步骤 3:' : 'Step 3:'}
 																</span>{' '}
-																{t('home:try_other.step3_content')}
+																{isZh
+																	? '在其他网站点击收藏夹中的按钮即可使用'
+																	: 'Click the bookmark on any site to activate'}
 															</p>
 														</div>
 													</div>
@@ -278,37 +299,47 @@ export default function HomePage() {
 													{/* 右侧：注意事项 */}
 													<div className="bg-yellow-50 dark:bg-gray-700 p-4 rounded-lg">
 														<h4 className="font-semibold text-gray-900 dark:text-white mb-3 text-sm">
-															{t('home:try_other.notice_title')}
+															{isZh ? '⚠️ 注意' : '⚠️ Heads Up'}
 														</h4>
 														<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item1')}
+																{isZh
+																	? '仅做技术评估，链接定期失效'
+																	: 'Demo only—link may expire without notice'}
 															</li>
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item2')}
+																{isZh
+																	? '使用 DeepSeek 模型，参考 DeepSeek 用户协议和隐私政策'
+																	: 'This free demo uses DeepSeek API (see their terms and privacy policy)'}
 															</li>
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item3')}
+																{isZh
+																	? '部分网站屏蔽了链接嵌入，将无反应'
+																	: 'Some sites block script injection (CSP policies)'}
 															</li>
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item4')}
+																{isZh
+																	? '仅支持单页应用，页面跳转后需要重新注入'
+																	: 'Works on single-page apps only—reload required after navigation'}
 															</li>
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item5')}
+																{isZh
+																	? '仅识别文本，不识别图像，不支持拖拽等复杂交互'
+																	: 'Text-only understanding—no image recognition or drag-and-drop'}
 															</li>
 															<li className="flex items-start text-left">
 																<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 shrink-0 "></span>
-																{t('home:try_other.notice_items.item6_prefix')}{' '}
+																{isZh ? '详细使用限制参照' : 'Full limitations in'}{' '}
 																<Link
 																	href="/docs/introduction/limitations"
 																	className="text-blue-600 dark:text-blue-400 hover:underline"
 																>
-																	{t('home:try_other.notice_items.item6_link')}
+																	{isZh ? '《文档》' : 'Docs'}
 																</Link>
 															</li>
 														</ul>
@@ -329,28 +360,28 @@ export default function HomePage() {
 										className="w-2 h-2 bg-green-500 rounded-full mr-2"
 										aria-hidden="true"
 									></span>
-									{t('home:benefits.no_backend')}
+									{isZh ? '纯前端方案' : 'Pure Front-end Solution'}
 								</li>
 								<li className="flex items-center">
 									<span
 										className="w-2 h-2 bg-green-500 rounded-full mr-2"
 										aria-hidden="true"
 									></span>
-									{t('home:benefits.private_model')}
+									{isZh ? '支持私有模型' : 'Your Own Models'}
 								</li>
 								<li className="flex items-center">
 									<span
 										className="w-2 h-2 bg-green-500 rounded-full mr-2"
 										aria-hidden="true"
 									></span>
-									{t('home:benefits.data_masking')}
+									{isZh ? '无痛脱敏' : 'Built-in Privacy'}
 								</li>
 								<li className="flex items-center">
 									<span
 										className="w-2 h-2 bg-green-500 rounded-full mr-2"
 										aria-hidden="true"
 									></span>
-									{t('home:benefits.open_source')}
+									{isZh ? 'MIT 开源' : 'MIT Open Source'}
 								</li>
 							</ul>
 						</div>
@@ -376,10 +407,12 @@ export default function HomePage() {
 									<Box className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
-									{t('home:features.in_page.title')}
+									{isZh ? '纯页面内方案' : 'In-page Solution'}
 								</h3>
 								<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-									{t('home:features.in_page.desc')}
+									{isZh
+										? '完全运行在你的页面内。不需要浏览器插件、不需要无头浏览器，不需要后端。'
+										: 'Runs entirely within your page. No browser extensions, no headless browsers, and no backend required.'}
 								</p>
 							</article>
 
@@ -395,10 +428,12 @@ export default function HomePage() {
 									<Zap className="w-7 h-7 text-white fill-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
-									{t('home:features.zero_backend.title')}
+									{isZh ? '零后端部署' : 'Zero Backend Setup'}
 								</h3>
 								<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-									{t('home:features.zero_backend.desc')}
+									{isZh
+										? '前端脚本引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。'
+										: 'Just drop in a script. Works with any LLM provider—OpenAI, Anthropic, or your own models.'}
 								</p>
 							</article>
 
@@ -414,10 +449,12 @@ export default function HomePage() {
 									<MessageSquare className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
-									{t('home:features.accessible.title')}
+									{isZh ? '普惠智能交互' : 'Natural Language UI'}
 								</h3>
 								<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-									{t('home:features.accessible.desc')}
+									{isZh
+										? '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。'
+										: 'Transform complex admin panels into chat interfaces. Make powerful tools accessible to everyone, not just experts.'}
 								</p>
 							</article>
 
@@ -433,10 +470,12 @@ export default function HomePage() {
 									<Shield className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
-									{t('home:features.secure_integration.title')}
+									{isZh ? '安全可控集成' : 'Secure by Design'}
 								</h3>
 								<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-									{t('home:features.secure_integration.desc')}
+									{isZh
+										? '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。'
+										: 'Control what AI can access with allowlists, data masking, and custom knowledge injection. Your rules, your data.'}
 								</p>
 							</article>
 						</div>
@@ -451,10 +490,12 @@ export default function HomePage() {
 								className="text-4xl lg:text-5xl mb-6"
 								colors={{ first: '#3b82f6', second: '#8b5cf6' }}
 							>
-								{t('home:use_cases.section_title')}
+								{isZh ? '应用场景' : 'Where It Shines'}
 							</SparklesText>
 							<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-								{t('home:use_cases.section_subtitle')}
+								{isZh
+									? '从简单的表单填写到复杂的业务流程，AI 都能理解并执行'
+									: 'From simple forms to complex workflows, AI understands and executes'}
 							</p>
 						</div>
 
@@ -468,10 +509,12 @@ export default function HomePage() {
 
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
-											{t('home:use_cases.case1.title')}
+											{isZh ? '对接答疑机器人' : 'Supercharge Support Bots'}
 										</h3>
 										<p className="text-gray-600 dark:text-gray-300">
-											{t('home:use_cases.case1.desc')}
+											{isZh
+												? '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。'
+												: 'Stop telling users where to click—let AI do it for them. Turn your chatbot from a guide into an operator that actually completes tasks.'}
 										</p>
 									</div>
 								</div>
@@ -485,10 +528,12 @@ export default function HomePage() {
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
-											{t('home:use_cases.case2.title')}
+											{isZh ? '交互升级/智能化改造' : 'Modernize Legacy Apps'}
 										</h3>
 										<p className="text-gray-600 dark:text-gray-300">
-											{t('home:use_cases.case2.desc')}
+											{isZh
+												? '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。'
+												: 'Add AI superpowers to old software without rebuilding. One script tag transforms complex enterprise tools into chat-driven interfaces.'}
 										</p>
 									</div>
 								</div>
@@ -502,10 +547,12 @@ export default function HomePage() {
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
-											{t('home:use_cases.case3.title')}
+											{isZh ? '产品教学' : 'Interactive Walkthroughs'}
 										</h3>
 										<p className="text-gray-600 dark:text-gray-300">
-											{t('home:use_cases.case3.desc')}
+											{isZh
+												? '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。'
+												: "Show, don't tell. Let AI demonstrate workflows in real-time—perfect for onboarding or training new users on complex systems."}
 										</p>
 									</div>
 								</div>
@@ -519,10 +566,12 @@ export default function HomePage() {
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
-											{t('home:use_cases.case4.title')}
+											{isZh ? '无障碍支持' : 'Accessibility First'}
 										</h3>
 										<p className="text-gray-600 dark:text-gray-300">
-											{t('home:use_cases.case4.desc')}
+											{isZh
+												? '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。'
+												: 'Make web apps accessible through natural language. Perfect for screen readers, voice control, or users who find traditional interfaces challenging.'}
 										</p>
 									</div>
 								</div>

packages/website/src/pages/docs/features/custom-tools/page.tsx

@@ -4,21 +4,26 @@ import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
 
 export default function CustomTools() {
-	const { t } = useTranslation('docs')
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
 
 	return (
 		<div>
-			<h1 className="text-4xl font-bold mb-6">{t('custom_tools.title')}</h1>
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '自定义工具' : 'Custom Tools'}</h1>
 
 			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
-				{t('custom_tools.subtitle')}
+				{isZh
+					? '通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI 安全调用你的业务逻辑。'
+					: 'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.'}
 			</p>
 
 			<div className="space-y-8">
 				<section>
-					<h2 className="text-2xl font-bold mb-4">{t('custom_tools.registration')}</h2>
+					<h2 className="text-2xl font-bold mb-4">{isZh ? '工具注册' : 'Tool Registration'}</h2>
 					<p className="text-gray-600 dark:text-gray-300 mb-4">
-						{t('custom_tools.registration_desc')}
+						{isZh
+							? '每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。'
+							: 'Each custom tool requires four core properties: name, description, input schema, and execute function.'}
 					</p>
 
 					<CodeEditor
@@ -52,12 +57,14 @@ const pageAgent = new PageAgent({customTools})
 				</section>
 
 				<section>
-					<h2 className="text-2xl font-bold mb-4">{t('custom_tools.page_filter')}</h2>
+					<h2 className="text-2xl font-bold mb-4">{isZh ? '页面过滤器' : 'Page Filter'}</h2>
 
 					<BetaNotice />
 
 					<p className="text-gray-600 dark:text-gray-300 mb-4">
-						{t('custom_tools.page_filter_desc')}
+						{isZh
+							? '通过 pageFilter 属性控制工具在哪些页面可见，提升安全性和用户体验。'
+							: 'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.'}
 					</p>
 
 					<CodeEditor
@@ -84,16 +91,28 @@ const pageAgent = new PageAgent({customTools})
 				</section>
 
 				<section>
-					<h2 className="text-2xl font-bold mb-4">{t('custom_tools.best_practices')}</h2>
+					<h2 className="text-2xl font-bold mb-4">{isZh ? '最佳实践' : 'Best Practices'}</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">
-								{t('custom_tools.bp_performance')}
+								{isZh ? '⚡ 性能优化' : '⚡ Performance Optimization'}
 							</h3>
 							<ul className="text-gray-600 dark:text-gray-300 space-y-1 text-sm">
-								<li>{t('custom_tools.bp_1')}</li>
+								<li>
-								<li>{t('custom_tools.bp_2')}</li>
+									{isZh
-								<li>{t('custom_tools.bp_3')}</li>
+										? '• 使用 pageFilter 减少不必要的工具加载'
+										: '• Use pageFilter to reduce unnecessary tool loading'}
+								</li>
+								<li>
+									{isZh
+										? '• 在 execute 函数中实现适当的缓存机制'
+										: '• Implement appropriate caching in execute functions'}
+								</li>
+								<li>
+									{isZh
+										? '• 避免在工具中执行耗时的同步操作'
+										: '• Avoid long-running sync operations in tools'}
+								</li>
 							</ul>
 						</div>
 					</div>

packages/website/src/pages/docs/features/models/page.tsx

@@ -28,19 +28,26 @@ const MODELS = {
 }
 
 export default function Models() {
-	const { t } = useTranslation('docs')
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
 	const allModels = [...MODELS.recommended, ...MODELS.verified]
 
 	return (
 		<div className="max-w-4xl">
-			<h1 className="text-4xl font-bold mb-4">{t('models.title')}</h1>
+			<h1 className="text-4xl font-bold mb-4">{isZh ? '模型' : 'Models'}</h1>
-			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{t('models.subtitle')}</p>
+			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+				{isZh
+					? '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。'
+					: 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.'}
+			</p>
 
 			{/* Models Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-3">{t('models.available')}</h2>
+				<h2 className="text-2xl font-semibold mb-3">{isZh ? '已测试模型' : 'Tested Models'}</h2>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-					{t('models.recommendation_logic')}
+					{isZh
+						? '推荐使用 ToolCall 能力强的轻量级模型。'
+						: 'Recommended: Lightweight models with strong ToolCall capabilities.'}
 				</p>
 				<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
 					<div className="flex flex-wrap gap-2">
@@ -67,41 +74,59 @@ export default function Models() {
 
 			{/* Tips Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('models.tips')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? '提示' : 'Tips'}</h2>
 				<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
 					<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
-						<li>{t('models.tip_2')}</li>
+						<li>
-						<li>{t('models.tip_3')}</li>
+							{isZh
+								? 'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature'
+								: 'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended'}
+						</li>
+						<li>
+							{isZh
+								? '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳'
+								: 'Small models or those unable to handle complex tool definitions typically perform poorly'}
+						</li>
 					</ul>
 				</div>
 			</section>
 
 			{/* Security Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('models.security')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">
+					{isZh ? '🔐 生产环境鉴权建议' : '🔐 Production Authentication'}
+				</h2>
 				<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
 					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
-						{t('models.security_warning')}
+						{isZh
+							? '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码'
+							: '⚠️ Never commit real LLM API Keys to your frontend code'}
 					</p>
 				</div>
 				<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
 					<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
-						{t('models.security_backend_proxy')}
+						{isZh ? '后端代理转发' : 'Backend Proxy Pattern'}
 					</h3>
 					<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-						{t('models.security_backend_desc')}
+						{isZh
+							? '在后端搭建一个 LLM 流量转发接口,该接口使用与你网站上其他接口相同的鉴权方式,例如:'
+							: 'Set up a backend LLM proxy endpoint that uses the same authentication method as other APIs in your website, such as:'}
 					</p>
 					<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
-						<li>{t('models.security_method_1')}</li>
+						<li>{isZh ? '• Session/Cookie 会话认证' : '• Session/Cookie-based authentication'}</li>
-						<li>{t('models.security_method_2')}</li>
+						<li>
-						<li>{t('models.security_method_3')}</li>
+							{isZh ? '• OIDC (OpenID Connect) 单点登录' : '• OIDC (OpenID Connect) single sign-on'}
+						</li>
+						<li>
+							{isZh ? '• 临时 Access Key 或 JWT Token' : '• Temporary Access Key or JWT Token'}
+						</li>
 					</ul>
 				</div>
 			</section>
 
 			{/* Configuration Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('models.configuration')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? '配置方式' : 'Configuration'}</h2>
 				<CodeEditor
 					code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
 const pageAgent = new PageAgent({

packages/website/src/pages/docs/integration/best-practices/page.tsx

@@ -1,13 +1,20 @@
+import { useTranslation } from 'react-i18next'
+
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
 
 export default function BestPractices() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
 	return (
 		<div>
-			<h1 className="text-4xl font-bold mb-6">最佳实践</h1>
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '最佳实践' : 'Best Practices'}</h1>
 			<BetaNotice />
 			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-				使用 page-agent 的最佳实践和常见问题解决方案。
+				{isZh
+					? '使用 page-agent 的最佳实践和常见问题解决方案。'
+					: 'Best practices and common solutions for using page-agent.'}
 			</p>
 			<CodeEditor code={`// TODO`} />
 		</div>

packages/website/src/pages/docs/integration/third-party-agent/page.tsx

@@ -1,21 +1,34 @@
+import { useTranslation } from 'react-i18next'
+
 import CodeEditor from '@/components/CodeEditor'
 
 export default function ThirdPartyAgentPage() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
 	return (
 		<div>
-			<h1 className="text-4xl font-bold mb-6">接入第三方 Agent</h1>
+			<h1 className="text-4xl font-bold mb-6">
+				{isZh ? '接入第三方 Agent' : 'Third-party Agent Integration'}
+			</h1>
 			<p className="mb-6 leading-relaxed text-gray-600 dark:text-gray-300">
-				将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。
+				{isZh
+					? '将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。'
+					: 'Integrate pageAgent as a tool in your support assistant or Agent system, becoming the eyes and hands of your 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>
+				<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
+					{isZh ? '💡 核心价值' : '💡 Core Value'}
+				</h3>
 				<p className="text-blue-800 dark:text-blue-200">
-					让你的答疑机器人不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。
+					{isZh
+						? '让你的答疑机器人不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。'
+						: 'Transform your support bot from just a "mouth" into a complete intelligent agent with "eyes" and "hands".'}
 				</p>
 			</div>
 
-			<h2 className="text-2xl font-bold mb-4">集成方式</h2>
+			<h2 className="text-2xl font-bold mb-4">{isZh ? '集成方式' : 'Integration Method'}</h2>
 
 			<div className="space-y-4 mb-6">
 				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
@@ -23,14 +36,14 @@ export default function ThirdPartyAgentPage() {
 						1. Function Calling
 					</h3>
 					<CodeEditor
-						code={`// 定义工具
+						code={`// ${isZh ? '定义工具' : 'Define tool'}
 const pageAgentTool = {
   name: "page_agent",
-  description: "执行网页操作",
+  description: "${isZh ? '执行网页操作' : 'Execute web page operations'}",
   parameters: {
     type: "object",
     properties: {
-      instruction: { type: "string", description: "操作指令" }
+      instruction: { type: "string", description: "${isZh ? '操作指令' : 'Operation instruction'}" }
     },
     required: ["instruction"]
   },
@@ -40,48 +53,74 @@ const pageAgentTool = {
   }
 }
 
-// 注册到你的 agent 中`}
+// ${isZh ? '注册到你的 agent 中' : 'Register to your agent'}`}
 						language="javascript"
 					/>
 				</div>
 			</div>
 
-			<h2 className="text-2xl font-bold mb-4">应用场景</h2>
+			<h2 className="text-2xl font-bold mb-4">{isZh ? '应用场景' : 'Use Cases'}</h2>
 			<div className="grid md:grid-cols-2 gap-4 mb-6">
 				<div className="bg-linear-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 text-gray-900 dark:text-white">🤖 智能客服系统</h4>
+					<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
+						{isZh ? '🤖 智能客服系统' : '🤖 Smart Customer Service'}
+					</h4>
 					<p className="text-sm text-gray-600 dark:text-gray-300">
-						客服机器人帮用户直接操作系统，如"帮我提交工单"
+						{isZh
+							? '客服机器人帮用户直接操作系统，如"帮我提交工单"'
+							: 'Support bots directly operate systems for users, e.g., "Help me submit a ticket"'}
 					</p>
 				</div>
 				<div className="bg-linear-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 text-gray-900 dark:text-white">📋 业务流程助手</h4>
+					<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
+						{isZh ? '📋 业务流程助手' : '📋 Business Process Assistant'}
+					</h4>
 					<p className="text-sm text-gray-600 dark:text-gray-300">
-						引导新员工完成复杂流程，如"完成客户入职"
+						{isZh
+							? '引导新员工完成复杂流程，如"完成客户入职"'
+							: 'Guide new employees through complex processes, e.g., "Complete customer onboarding"'}
 					</p>
 				</div>
 				<div className="bg-linear-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 text-gray-900 dark:text-white">🎯 个人效率助手</h4>
+					<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
+						{isZh ? '🎯 个人效率助手' : '🎯 Personal Productivity Assistant'}
+					</h4>
 					<p className="text-sm text-gray-600 dark:text-gray-300">
-						跨网站帮你完成任务，如"预订会议室"
+						{isZh
+							? '跨网站帮你完成任务，如"预订会议室"'
+							: 'Complete tasks across websites, e.g., "Book a meeting room"'}
 					</p>
 				</div>
 				<div className="bg-linear-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 text-gray-900 dark:text-white">🔧 运维自动化</h4>
+					<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
+						{isZh ? '🔧 运维自动化' : '🔧 DevOps Automation'}
+					</h4>
 					<p className="text-sm text-gray-600 dark:text-gray-300">
-						通过自然语言操作管理后台，如"重启服务器"
+						{isZh
+							? '通过自然语言操作管理后台，如"重启服务器"'
+							: 'Operate admin panels via natural language, e.g., "Restart server"'}
 					</p>
 				</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">
-					⚠️ 注意事项
+					{isZh ? '⚠️ 注意事项' : '⚠️ Notes'}
 				</h3>
 				<ul className="text-yellow-800 dark:text-yellow-200 space-y-1 text-sm">
-					<li>• 确保目标网站允许自动化操作</li>
+					<li>
-					<li>• 实现适当的频率限制</li>
+						•{' '}
-					<li>• 敏感操作建议要求人工确认</li>
+						{isZh
+							? '确保目标网站允许自动化操作'
+							: 'Ensure target website allows automated operations'}
+					</li>
+					<li>• {isZh ? '实现适当的频率限制' : 'Implement appropriate rate limiting'}</li>
+					<li>
+						•{' '}
+						{isZh
+							? '敏感操作建议要求人工确认'
+							: 'Recommend human confirmation for sensitive operations'}
+					</li>
 				</ul>
 			</div>
 		</div>

packages/website/src/pages/docs/introduction/limitations/page.tsx

@@ -1,141 +1,194 @@
 import { useTranslation } from 'react-i18next'
 
 export default function LimitationsPage() {
-	const { t } = useTranslation('docs')
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
 
 	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">
-					{t('limitations.title')}
+					{isZh ? '使用限制' : 'Limitations'}
 				</h1>
-				<p className="text-xl text-gray-600 dark:text-gray-300">{t('limitations.subtitle')}</p>
+				<p className="text-xl text-gray-600 dark:text-gray-300">
+					{isZh
+						? '了解 page-agent 当前的功能边界和技术限制'
+						: "Understand page-agent's current capabilities and technical constraints"}
+				</p>
 			</div>
 
 			<div className="prose prose-lg dark:prose-invert max-w-none">
-				<h2 className="text-2xl font-bold mb-3">{t('limitations.page_support')}</h2>
+				<h2 className="text-2xl font-bold mb-3">
+					{isZh ? '页面支持限制' : 'Page Support Limitations'}
+				</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">
-						{t('limitations.spa_limit_title')}
+						{isZh ? '单页应用限制' : 'Single Page Application Limits'}
 					</h3>
 					<ul className="text-blue-700 dark:text-blue-300 space-y-2">
-						<li>{t('limitations.spa_limit_1')}</li>
+						<li>
-						<li>{t('limitations.spa_limit_2')}</li>
+							{isZh
-						<li>{t('limitations.spa_limit_3')}</li>
+								? '• 仅支持单页应用（SPA）：目前只能在单个页面内进行操作'
+								: '• SPA only: Currently operates within a single page'}
+						</li>
+						<li>
+							{isZh
+								? '• 多页接力功能正在设计中：暂时无法跨页面执行连续任务'
+								: '• Multi-page relay in design: Cannot execute continuous tasks across pages yet'}
+						</li>
+						<li>
+							{isZh
+								? '• 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent'
+								: '• Requires integration: Cannot operate on sites without page-agent'}
+						</li>
 					</ul>
 				</div>
 
-				<h2 className="text-2xl font-bold mb-3">{t('limitations.interaction_limits')}</h2>
+				<h2 className="text-2xl font-bold mb-3">
+					{isZh ? '交互行为限制' : 'Interaction Limitations'}
+				</h2>
 				<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
-					<h3 className="font-semibold mb-4">{t('limitations.supported_ops')}</h3>
+					<h3 className="font-semibold mb-4">{isZh ? '支持的操作' : 'Supported Operations'}</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>{t('limitations.op_click')}</span>
+								<span>{isZh ? '点击操作' : 'Click'}</span>
 							</div>
 							<div className="flex items-center text-green-600 dark:text-green-400">
 								<span className="mr-2">✅</span>
-								<span>{t('limitations.op_input')}</span>
+								<span>{isZh ? '文本输入' : 'Text input'}</span>
 							</div>
 							<div className="flex items-center text-green-600 dark:text-green-400">
 								<span className="mr-2">✅</span>
-								<span>{t('limitations.op_scroll')}</span>
+								<span>{isZh ? '页面滚动' : 'Scroll'}</span>
 							</div>
 							<div className="flex items-center text-green-600 dark:text-green-400">
 								<span className="mr-2">✅</span>
-								<span>{t('limitations.op_submit')}</span>
+								<span>{isZh ? '表单提交' : 'Form submit'}</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>{t('limitations.op_select')}</span>
+								<span>{isZh ? '选择操作' : 'Select'}</span>
 							</div>
 							<div className="flex items-center text-green-600 dark:text-green-400">
 								<span className="mr-2">✅</span>
-								<span>{t('limitations.op_focus')}</span>
+								<span>{isZh ? '焦点切换' : 'Focus'}</span>
 							</div>
 						</div>
 					</div>
 
-					<h3 className="font-semibold mb-4">{t('limitations.unsupported_ops')}</h3>
+					<h3 className="font-semibold mb-4">{isZh ? '不支持的操作' : 'Unsupported Operations'}</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>{t('limitations.op_hover')}</span>
+								<span>{isZh ? '鼠标悬停（hover）' : 'Mouse hover'}</span>
 							</div>
 							<div className="flex items-center text-red-600 dark:text-red-400">
 								<span className="mr-2">❌</span>
-								<span>{t('limitations.op_drag')}</span>
+								<span>{isZh ? '拖拽操作' : 'Drag & drop'}</span>
 							</div>
 							<div className="flex items-center text-red-600 dark:text-red-400">
 								<span className="mr-2">❌</span>
-								<span>{t('limitations.op_context')}</span>
+								<span>{isZh ? '右键菜单' : 'Right-click menu'}</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>{t('limitations.op_draw')}</span>
+								<span>{isZh ? '图形绘制' : 'Drawing'}</span>
 							</div>
 							<div className="flex items-center text-red-600 dark:text-red-400">
 								<span className="mr-2">❌</span>
-								<span>{t('limitations.op_keyboard')}</span>
+								<span>{isZh ? '键盘快捷键' : 'Keyboard shortcuts'}</span>
 							</div>
 							<div className="flex items-center text-red-600 dark:text-red-400">
 								<span className="mr-2">❌</span>
-								<span>{t('limitations.op_position')}</span>
+								<span>{isZh ? '基于点击区域或鼠标位置的控制' : 'Position-based control'}</span>
 							</div>
 						</div>
 					</div>
 				</div>
 
-				<h2 className="text-2xl font-bold mb-3">{t('limitations.understanding_limits')}</h2>
+				<h2 className="text-2xl font-bold mb-3">
+					{isZh ? '网页理解限制' : 'Understanding Limitations'}
+				</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">
-						{t('limitations.no_vision_title')}
+						{isZh ? '无视觉能力' : 'No Visual Recognition'}
 					</h3>
-					<p className="text-red-700 dark:text-red-300 mb-3">{t('limitations.no_vision_desc')}</p>
+					<p className="text-red-700 dark:text-red-300 mb-3">
+						{isZh
+							? 'page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力，无法理解以下内容：'
+							: 'page-agent operates based on DOM structure with no visual recognition. Cannot understand:'}
+					</p>
 					<ul className="text-red-700 dark:text-red-300 space-y-1">
-						<li>{t('limitations.no_vision_1')}</li>
+						<li>
-						<li>{t('limitations.no_vision_2')}</li>
+							{isZh
-						<li>{t('limitations.no_vision_3')}</li>
+								? '• 图片内容：无法识别图片中的文字、图标或视觉元素'
-						<li>{t('limitations.no_vision_4')}</li>
+								: '• Image content: Cannot recognize text, icons, or visual elements in images'}
+						</li>
+						<li>
+							{isZh
+								? '• Canvas 画布：无法理解 Canvas 中绘制的图形和内容'
+								: '• Canvas: Cannot understand graphics drawn on Canvas'}
+						</li>
+						<li>
+							{isZh
+								? '• WebGL 3D 内容：无法操作 3D 场景中的元素'
+								: '• WebGL 3D: Cannot operate elements in 3D scenes'}
+						</li>
+						<li>
+							{isZh
+								? '• SVG 图形：无法理解 SVG 中的视觉内容和路径'
+								: '• SVG graphics: Cannot understand visual content and paths in SVG'}
+						</li>
 					</ul>
 				</div>
 
-				<h2 className="text-2xl font-bold mb-3">{t('limitations.website_requirements')}</h2>
+				<h2 className="text-2xl font-bold mb-3">
+					{isZh ? '被操作网站要求' : 'Website Requirements'}
+				</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">{t('limitations.req_semantic_title')}</h3>
+							<h3 className="font-semibold mb-2">
+								{isZh ? '语义化和易用性' : 'Semantic & Usability'}
+							</h3>
 							<p className="text-gray-600 dark:text-gray-300">
-								{t('limitations.req_semantic_desc')}
+								{isZh
+									? '所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 accessibility 特性，可能影响 AI 的理解准确性。'
+									: 'All operations rely on semantic tags and attributes. Poor semantic structure or lack of accessibility features may affect AI understanding accuracy.'}
 							</p>
 						</div>
 						<div>
-							<h3 className="font-semibold mb-2">{t('limitations.req_ux_title')}</h3>
+							<h3 className="font-semibold mb-2">{isZh ? 'UI/UX' : 'UI/UX'}</h3>
-							<p className="text-gray-600 dark:text-gray-300">{t('limitations.req_ux_desc')}</p>
+							<p className="text-gray-600 dark:text-gray-300">
+								{isZh
+									? '反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 AI 的理解和操作。'
+									: 'Counter-intuitive interaction rules, visual-only operation hints, complex mouse interactions, or rapidly appearing/disappearing elements can affect AI understanding and operation.'}
+							</p>
 						</div>
 						<div>
-							<h3 className="font-semibold mb-2">{t('limitations.req_env_title')}</h3>
+							<h3 className="font-semibold mb-2">{isZh ? '环境要求' : 'Environment'}</h3>
-							<p className="text-gray-600 dark:text-gray-300">{t('limitations.req_env_desc')}</p>
+							<p className="text-gray-600 dark:text-gray-300">modern browser</p>
 						</div>
 					</div>
 				</div>
 
-				<h2>{t('limitations.future')}</h2>
+				<h2>{isZh ? '未来规划' : 'Future Plans'}</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">
-						{t('limitations.future_title')}
+						{isZh ? '即将支持' : 'Coming Soon'}
 					</h3>
 					<ul className="text-green-700 dark:text-green-300 space-y-1">
-						<li>{t('limitations.future_1')}</li>
+						<li>{isZh ? '• 多页面接力操作能力' : '• Multi-page relay capabilities'}</li>
-						<li>{t('limitations.future_2')}</li>
+						<li>{isZh ? '• 更丰富的鼠标交互支持' : '• Richer mouse interaction support'}</li>
-						<li>{t('limitations.future_3')}</li>
+						<li>{isZh ? '• 基础的视觉理解能力' : '• Basic visual understanding'}</li>
-						<li>{t('limitations.future_4')}</li>
+						<li>{isZh ? '• 更智能的错误恢复机制' : '• Smarter error recovery'}</li>
 					</ul>
 				</div>
 			</div>

packages/website/src/pages/docs/introduction/overview/page.tsx

@@ -1,23 +1,17 @@
 import { useTranslation } from 'react-i18next'
 
 export default function Overview() {
-	const { t } = useTranslation('docs')
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
 
 	return (
 		<article>
-			{/* 头图 */}
-			{/* <figure className="mb-8 rounded-xl overflow-hidden">
-				<img
-					src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp"
-					alt="page-agent"
-					className="w-full h-64 object-cover"
-				/>
-			</figure> */}
-
 			<div className="mb-8">
-				<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>
+				<h1 className="text-4xl font-bold mb-4">Overview</h1>
 				<p className="text-xl text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
-					{t('overview.subtitle')}
+					{isZh
+						? 'page-agent 是一个完全基于 Web 技术的 GUI Agent，简单几步，让你的网站拥有 AI 操作员。'
+						: 'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.'}
 				</p>
 
 				{/* Status Badges */}
@@ -55,56 +49,76 @@ export default function Overview() {
 			</div>
 
 			<section>
-				<h2 className="text-2xl font-bold mb-4">{t('overview.what_is')}</h2>
+				<h2 className="text-2xl font-bold mb-4">
+					{isZh ? '什么是 page-agent？' : 'What is page-agent?'}
+				</h2>
 
 				<p className="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed ">
-					{t('overview.what_is_desc')}
+					{isZh
+						? 'page-agent 是一个页面内嵌式 GUI Agent。与传统的浏览器自动化工具不同，page-agent 面向网站开发者，而非爬虫或Agent客户端开发者；将 Agent 集成到你的网站中，让用户可以通过自然语言与页面进行交互。'
+						: 'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.'}
 				</p>
 			</section>
 
 			<section>
-				<h2 className="text-2xl font-bold mb-3">{t('overview.features_title')}</h2>
+				<h2 className="text-2xl font-bold mb-3">{isZh ? '核心特性' : 'Core Features'}</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">
-							{t('overview.feature_dom.title')}
+							{isZh ? '🧠 智能 DOM 理解' : '🧠 Smart DOM Analysis'}
 						</h3>
-						<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_dom.desc')}</p>
+						<p className="text-gray-700 dark:text-gray-300">
+							{isZh
+								? '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。'
+								: 'DOM-based analysis with high-intensity dehydration. No visual recognition needed. Pure text for fast and precise operations.'}
+						</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">
-							{t('overview.feature_secure.title')}
+							{isZh ? '🔒 安全可控' : '🔒 Secure & Controllable'}
 						</h3>
-						<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_secure.desc')}</p>
+						<p className="text-gray-700 dark:text-gray-300">
+							{isZh
+								? '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。'
+								: 'Supports operation allowlists, data masking protection. Inject custom knowledge to make AI work by your rules.'}
+						</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">
-							{t('overview.feature_backend.title')}
+							{isZh ? '⚡ 零后端部署' : '⚡ Zero Backend'}
 						</h3>
-						<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_backend.desc')}</p>
+						<p className="text-gray-700 dark:text-gray-300">
+							{isZh
+								? 'CDN 或 NPM 引入，自定义 LLM 接入点。'
+								: 'CDN or NPM import with custom LLM endpoints.'}
+						</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">
-							{t('overview.feature_accessible.title')}
+							{isZh ? '♿ 普惠智能' : '♿ Accessible Intelligence'}
 						</h3>
 						<p className="text-gray-700 dark:text-gray-300">
-							{t('overview.feature_accessible.desc')}
+							{isZh
+								? '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。'
+								: 'Provides natural language interface for complex B2B systems and admin panels. Makes software easy for everyone.'}
 						</p>
 					</div>
 				</div>
 
-				<h2 className="text-2xl font-bold mb-4">{t('overview.vs_browser_use')}</h2>
+				<h2 className="text-2xl font-bold mb-4">
+					{isZh ? '与 browser-use 的区别' : 'vs. 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">
-									{t('overview.table_feature')}
+									{isZh ? '特性' : 'Feature'}
 								</th>
 								<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
 									page-agent
@@ -117,53 +131,53 @@ export default function Overview() {
 						<tbody>
 							<tr>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
-									{t('overview.table_deployment')}
+									{isZh ? '部署方式' : 'Deployment'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_deployment_pa')}
+									{isZh ? '页面内嵌组件' : 'Embedded component'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_deployment_bu')}
+									{isZh ? '外部工具' : 'External tool'}
 								</td>
 							</tr>
 							<tr>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
-									{t('overview.table_scope')}
+									{isZh ? '操作范围' : 'Scope'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_scope_pa')}
+									{isZh ? '当前页面' : 'Current page'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_scope_bu')}
+									{isZh ? '整个浏览器' : 'Entire browser'}
 								</td>
 							</tr>
 							<tr>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
-									{t('overview.table_user')}
+									{isZh ? '目标用户' : 'Target Users'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_user_pa')}
+									{isZh ? '网站开发者' : 'Web developers'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_user_bu')}
+									{isZh ? '爬虫/Agent 开发者' : 'Scraper/Agent developers'}
 								</td>
 							</tr>
 							<tr>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
-									{t('overview.table_scenario')}
+									{isZh ? '使用场景' : 'Use Case'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_scenario_pa')}
+									{isZh ? '用户体验增强' : 'UX enhancement'}
 								</td>
 								<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
-									{t('overview.table_scenario_bu')}
+									{isZh ? '自动化任务' : 'Automation tasks'}
 								</td>
 							</tr>
 						</tbody>
 					</table>
 				</div>
 
-				<h2 className="text-2xl font-bold mb-4">{t('overview.use_cases_title')}</h2>
+				<h2 className="text-2xl font-bold mb-4">{isZh ? '应用场景' : 'Use Cases'}</h2>
 
 				<ul className="space-y-4 mb-8">
 					<li className="flex items-start space-x-3">
@@ -171,7 +185,10 @@ export default function Overview() {
 							1
 						</span>
 						<div className="text-gray-700 dark:text-gray-300">
-							<strong>{t('overview.use_case1_title')}</strong> {t('overview.use_case1_desc')}
+							<strong>{isZh ? '对接答疑机器人：' : 'Connect Support Bots:'}</strong>{' '}
+							{isZh
+								? '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。'
+								: "Turn your support assistant into a full agent. Customer service bots no longer just say 'Please click the settings button then click...'—they operate for users directly."}
 						</div>
 					</li>
 					<li className="flex items-start space-x-3">
@@ -179,7 +196,10 @@ export default function Overview() {
 							2
 						</span>
 						<div className="text-gray-700 dark:text-gray-300">
-							<strong>{t('overview.use_case2_title')}</strong> {t('overview.use_case2_desc')}
+							<strong>{isZh ? '交互升级/智能化改造：' : 'Modernize Legacy Apps:'}</strong>{' '}
+							{isZh
+								? '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。'
+								: 'One line of code transforms old apps into agents. Product experts help users navigate complex B2B software. Reduce support costs and improve satisfaction.'}
 						</div>
 					</li>
 					<li className="flex items-start space-x-3">
@@ -187,7 +207,10 @@ export default function Overview() {
 							3
 						</span>
 						<div className="text-gray-700 dark:text-gray-300">
-							<strong>{t('overview.use_case3_title')}</strong> {t('overview.use_case3_desc')}
+							<strong>{isZh ? '产品教学：' : 'Interactive Training:'}</strong>{' '}
+							{isZh
+								? '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。'
+								: "Demonstrate workflows in real-time. Let AI show the complete process of 'how to submit an expense report.'"}
 						</div>
 					</li>
 					<li className="flex items-start space-x-3">
@@ -195,7 +218,10 @@ export default function Overview() {
 							4
 						</span>
 						<div className="text-gray-700 dark:text-gray-300">
-							<strong>{t('overview.use_case4_title')}</strong> {t('overview.use_case4_desc')}
+							<strong>{isZh ? '无障碍支持：' : 'Accessibility:'}</strong>{' '}
+							{isZh
+								? '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。'
+								: 'Provide natural language interaction for visually impaired and elderly users. Connect screen readers or voice assistants to make software accessible to everyone.'}
 						</div>
 					</li>
 				</ul>

packages/website/src/pages/docs/introduction/quick-start/page.tsx

@@ -4,16 +4,18 @@ import CodeEditor from '@/components/CodeEditor'
 import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
 
 export default function QuickStart() {
-	const { t, i18n } = useTranslation('docs')
+	const { i18n } = useTranslation()
 	const isZh = i18n.language === 'zh-CN'
 
 	return (
 		<div>
-			<h1 className="text-4xl font-bold mb-6">{t('quick_start.title')}</h1>
+			<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
 
-			<p className=" mb-6 leading-relaxed">{t('quick_start.subtitle')}</p>
+			<p className=" mb-6 leading-relaxed">
+				{isZh ? '几分钟内完成 page-agent 的集成。' : 'Integrate page-agent in minutes.'}
+			</p>
 
-			<h2 className="text-2xl font-bold mb-3">{t('quick_start.installation')}</h2>
+			<h2 className="text-2xl font-bold mb-3">{isZh ? '安装步骤' : 'Installation Steps'}</h2>
 
 			<div className="space-y-4 mb-6">
 				{/* Demo CDN - One Line */}
@@ -67,7 +69,7 @@ import { PageAgent } from 'page-agent'`}
 
 				<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">
-						{t('quick_start.step2_title')}
+						{isZh ? '2. 初始化配置' : '2. Initialize Configuration'}
 					</h3>
 					<CodeEditor
 						code={`const agent = new PageAgent({
@@ -82,7 +84,7 @@ import { PageAgent } from 'page-agent'`}
 
 				<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">
-						{t('quick_start.step3_title')}
+						{isZh ? '3. 开始使用' : '3. Start Using'}
 					</h3>
 					<CodeEditor
 						code={`// ${isZh ? '程序化执行自然语言指令' : 'Execute natural language instructions programmatically'}