ai助手插件

项目地址:suyihang15/ai-chat: 一个在edge浏览器上的与ai对话的插件，请自行配置API

下载地址：https://github.com/suyihang15/ai-chat/releases/download/1.0.0/ai.zip

AI 智能对话助手 — WordPress 插件

一款适用于 WordPress 的 AI 智能对话助手插件，支持多厂商 API（DeepSeek · OpenAI · Claude · Gemini）的通用对话工具。通过短代码或小工具在前端提供智能对话、内容分析和自动化操作。

---

✨ 功能特性

🤖 多厂商 AI 支持

• DeepSeek — 支持 deepseek-chat、deepseek-reasoner
• OpenAI — 支持 GPT-4o、GPT-4o-mini、GPT-4-turbo、o3-mini、o1-mini
• Anthropic Claude — 支持 Claude Opus、Sonnet、Haiku 系列
• Google Gemini — 支持 Gemini 2.5 Flash/Pro 等
• 🔧 自定义 — 兼容 OpenAI API 格式的自定义端点（如 Ollama、Groq 等）

💬 智能对话

• 流式输出，实时显示 AI 回复
• 支持 Markdown 渲染（代码高亮、表格、列表等）
• 思考过程展示（DeepSeek-R1 / Claude reasoning）
• 对话历史保存（基于 WordPress 用户会话）
• Ctrl+Enter 发送，Esc 停止生成

🔌 前端集成

• 短代码 [ai_chat] — 在任意页面/文章中插入对话组件
• 小工具（Widget） — 拖拽到侧边栏使用
• 古腾堡区块（Block） — 原生区块编辑器支持
• 浮动按钮 — 全站悬浮对话入口

🛠 内容辅助

• 文章摘要生成
• SEO 元描述生成
• 内容翻译与润色
• 评论智能回复建议

🎨 其他亮点

• API 连接测试功能
• 暗色/浅色主题自适应
• 多语言支持（中文 / English）
• 符合 WordPress 编码规范

---

📁 项目结构

├── ai-chat-assistant.php         # 插件主入口文件
├── readme.txt                    # WordPress.org 插件目录说明
├── includes/
│   ├── class-plugin.php          # 插件核心初始化
│   ├── class-admin.php           # 后台管理页面
│   ├── class-api-client.php      # 多厂商 API 客户端（流式聊天）
│   ├── class-shortcode.php       # 短代码注册与渲染
│   ├── class-widget.php          # 小工具注册
│   ├── class-block.php           # 古腾堡区块注册
│   └── class-settings.php        # 设置存储管理
├── assets/
│   ├── css/
│   │   ├── chat-widget.css       # 前端对话组件样式
│   │   └── admin.css             # 后台管理样式
│   ├── js/
│   │   ├── chat-widget.js        # 前端对话控制器
│   │   └── admin.js              # 后台管理脚本
│   └── images/
│       └── icon.svg              # 插件图标
├── languages/
│   ├── ai-chat-assistant-zh_CN.po
│   └── ai-chat-assistant.pot     # 翻译模板
└── templates/
    └── chat-widget.php           # 对话组件模板

---

🚀 安装使用

1. 安装插件

1. 下载插件压缩包或克隆本项目
2. 将 ai-chat-assistant 文件夹上传到 /wp-content/plugins/ 目录
3. 登录 WordPress 后台，进入 「插件」 页面
4. 找到 「AI 智能对话助手」，点击 「启用」

2. 配置 API Key

1. 在后台侧边栏进入 「设置」→「AI 对话助手」
2. 选择 AI 服务商（DeepSeek / OpenAI / Claude / Gemini / 自定义）
3. 填入你的 API Key
4. 可选：调整 Base URL、模型、Temperature 等参数
5. 点击 「💾 保存设置」
6. 点击 「🔌 测试连接」 验证配置

3. 开始使用

• 在文章/页面中插入 [ai_chat] 短代码
• 或前往 「外观」→「小工具」，将 AI 对话助手拖入侧边栏
• 或在区块编辑器中搜索 「AI Chat」 添加区块
• 前端用户即可使用对话功能

---

🔌 支持的 API 厂商

厂商	API Key 获取地址	默认模型
DeepSeek	platform.deepseek.com	deepseek-chat
OpenAI	platform.openai.com	gpt-4o
Anthropic	console.anthropic.com	claude-sonnet-4-6
Google Gemini	aistudio.google.com	gemini-2.5-flash
自定义	任意 OpenAI 兼容 API	自行输入

---

🛠 技术栈

• PHP 7.4+ — WordPress 插件开发语言
• WordPress Plugin API — add_shortcode、WP_Widget、register_block_type
• WordPress Settings API — 后台配置页面与选项存储
• Server-Sent Events (SSE) — 流式读取各厂商 API 响应
• WordPress AJAX API — 前后端异步通信
• vanilla JS — 前端轻量交互，无框架依赖

---

📝 开发说明

API 客户端架构

所有厂商 API 通过统一的 API_Client 类创建，均暴露相同的接口：

class API_Client {
    public function chat( $messages, $callbacks ): void { ... }
    public function test_connection(): bool { ... }
}

不同厂商的消息格式转换在类内部处理：

• OpenAI 兼容（DeepSeek/OpenAI/自定义）→ 标准 /chat/completions SSE
• Anthropic → /messages + x-api-key header
• Gemini → /models/{model}:streamGenerateContent + key 参数

WordPress 钩子

// 前端渲染
add_shortcode( 'ai_chat', array( $this, 'render_chat' ) );

// 后台管理
add_action( 'admin_menu', array( $this, 'add_settings_page' ) );
add_action( 'admin_init', array( $this, 'register_settings' ) );

// AJAX 处理
add_action( 'wp_ajax_ai_chat_send', array( $this, 'handle_chat' ) );
add_action( 'wp_ajax_nopriv_ai_chat_send', array( $this, 'handle_chat' ) );

前端请求流程

用户输入 → chat-widget.js
    → fetch(admin-ajax.php?action=ai_chat_send)
        → class-api-client.php (SSE 流式处理)
            → 返回流式响应
                → chat-widget.js 实时渲染

---

⚠️ 安全说明

• API Key 存储在 WordPress 数据库 wp_options 表中，不会上传到除对应 API 厂商之外的任何服务器
• 所有用户输入均经过 wp_kses / sanitize_text_field 处理
• 所有 AI 回复均经过 HTML 清洗，防止 XSS
• 使用 WordPress Nonce 验证请求来源，防止 CSRF 攻击
• 通过 current_user_can() 进行权限检查

---

📄 环境要求

• WordPress 5.0+
• PHP 7.4+
• MySQL 5.7+ 或 MariaDB 10.3+
• HTTPS（推荐，用于 API Key 安全传输）

---

📄 License

GPL v2 或更高版本

---

👤 作者

suyihang15