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

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

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

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

二、整体架构

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

WPS 加载项前端：运行在 WPS 任务窗格中，使用 HTML/CSS/JS，调用 WPS JS API 读写文档。
后端代理服务：Node.js/Express 或 Serverless，负责保存大模型 API Key、转发请求、处理流式响应。
大模型服务：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。

七、调试与发布

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

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

八、最佳实践与踩坑

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

九、总结

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

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