WPS AI 插件开发实战：软件工程师如何从零接入大模型打造办公助手

一、背景：为什么要做 WPS AI 插件

WPS Office 是国内使用最广泛的办公套件之一。很多团队每天在 WPS 中写文档、做表格、整理 PPT。如果能让 WPS 直接调用大模型，就能实现摘要、润色、翻译、生成表格公式、自动写周报等能力。本文从软件工程师视角，带你从零开发一个 WPS AI 插件。

开始前，建议从 WPS官网 了解 WPS 开放平台与加载项文档，并通过 WPS下载 安装最新版 WPS Office。开发插件需要 WPS 支持 JS 加载项。

二、整体架构

一个典型的 WPS AI 插件分为三层：

1. WPS 加载项前端：运行在 WPS 任务窗格中，使用 HTML/CSS/JS，调用 WPS JS API 读写文档。
2. 后端代理服务：Node.js/Express 或 Serverless，负责保存大模型 API Key、转发请求、处理流式响应。
3. 大模型服务：OpenAI、DeepSeek、通义千问、智谱等，提供 Chat Completions 接口。

架构图：

+----------------+      +----------------+      +----------------+
| [WPS](https://www.wps.com/) 加载项前端 | ---> | 后端代理服务   | ---> | 大模型 API     |
| (任务窗格)     |      | (API Key 安全) |      | (LLM)          |
+----------------+      +----------------+      +----------------+
        |                        |
        v                        v
   [WPS](https://www.wps.com/) 文档读写              SSE 流式输出

三、环境准备

• 从 WPS官网 下载并安装 WPS Office，或使用 WPS下载 获取最新版本。
• Node.js 18+
• npm 或 pnpm
• WPS 加载项开发工具：wpsjs

安装脚手架：

npm install -g wpsjs
wpsjs create wps-ai-assistant

目录结构大致如下：

wps-ai-assistant/
  ├── manifest.xml
  ├── index.html
  ├── main.js
  ├── style.css
  └── package.json

四、配置 manifest.xml

WPS 加载项通过 manifest.xml 描述插件信息、权限和入口地址。示例：

<?xml version='1.0' encoding='UTF-8'?>
<OfficeApp xmlns='http://schemas.microsoft.com/office/appforoffice/1.1'>
  <Id>your-guid-here</Id>
  <Version>1.0.0</Version>
  <ProviderName>[WPS](https://www.wps.com/) AI Assistant</ProviderName>
  <DefaultLocale>zh-CN</DefaultLocale>
  <DisplayName DefaultValue='[WPS](https://www.wps.com/) AI 助手'/>
  <Description DefaultValue='在 [WPS](https://www.wps.com/) 中调用大模型完成写作、翻译、总结'/>
  <Hosts>
    <Host Name='Document'/>
    <Host Name='Workbook'/>
    <Host Name='Presentation'/>
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue='http://localhost:3000/index.html'/>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

注意：SourceLocation 开发阶段可以指向本地服务，发布时改为 HTTPS 地址。

五、前端：读取 WPS 文档并调用大模型

在 index.html 中放置一个简单界面：

<div id='app'>
  <button id='summarize'>总结选区</button>
  <button id='polish'>润色选区</button>
  <textarea id='result' placeholder='AI 输出...'></textarea>
</div>
<script src='main.js'></script>

在 main.js 中获取 WPS 文档选区。WPS JS API 与 Office JS 类似：

async function getSelectedText() {
  return new Promise((resolve, reject) => {
    try {
      const selection = wps.Application.Selection;
      const text = selection.Text;
      resolve(text);
    } catch (err) {
      reject(err);
    }
  });
}

async function replaceSelectedText(text) {
  const selection = wps.Application.Selection;
  selection.Text = text;
}

绑定按钮事件：

document.getElementById('summarize').addEventListener('click', async () => {
  const text = await getSelectedText();
  const result = await callLLM('请总结以下内容：' + text);
  document.getElementById('result').value = result;
});

document.getElementById('polish').addEventListener('click', async () => {
  const text = await getSelectedText();
  const result = await callLLM('请润色以下内容：' + text);
  await replaceSelectedText(result);
});

六、后端：安全接入大模型

不要把 API Key 写在前端。推荐用 Node.js 代理：

import express from 'express';
import fetch from 'node-fetch';

const app = express();
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  const { prompt } = req.body;
  const response = await fetch('https://api.deepseek.com/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.LLM_API_KEY}`
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: [{ role: 'user', content: prompt }],
      stream: true
    })
  });

  res.setHeader('Content-Type', 'text/event-stream');
  response.body.pipe(res);
});

app.listen(3000, () => console.log('[WPS](https://www.wps.com/) AI proxy running on 3000'));

前端调用：

async function callLLM(prompt) {
  const res = await fetch('http://localhost:3000/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });
  const data = await res.json();
  return data.choices[0].message.content;
}

如果要流式输出，可以使用 EventSource 或 fetch + ReadableStream。

七、调试与发布

1. 启动本地服务：npm run dev
2. 在 WPS 中打开开发工具，加载 manifest.xml
3. 在 WPS 文档中选中文本，点击插件按钮测试
4. 发布前，将后端部署到 HTTPS 域名，并把 SourceLocation 改为线上地址
5. 提交到 WPS 开放平台审核

如果你还没安装 WPS，可以前往 WPS官网 或通过 WPS下载 获取最新版 WPS Office。

八、最佳实践与踩坑

• API Key 安全：只放后端，使用环境变量。
• 超时与重试：大模型响应可能较慢，前端需要 loading 和超时提示。
• 权限最小化：只申请必要的 ReadWriteDocument。
• 流式体验：长文本生成时使用 SSE，避免用户等待焦虑。
• 文档兼容：WPS 文字、表格、演示的 API 有差异，需要分别测试。
• 隐私合规：不要将敏感文档内容上传到不可信模型，必要时做脱敏。

九、总结

通过 WPS 加载项 + 后端代理 + 大模型 API，软件工程师可以快速打造一个办公助手。它既能利用 WPS 的文档能力，又能发挥大模型的语义理解能力。建议从一个小场景开始，比如“总结选区”，再逐步扩展到润色、翻译、表格公式生成、PPT 大纲生成。开发前记得从 WPS官网 查阅最新文档，并通过 WPS下载 保持 WPS 版本更新。

这样，你就完成了一个从零到一的 WPS AI 插件。