我们用1万行Vue3代码，做了款开源AI PPT项目

今天和大家聊聊，我们做的开源AI PPT项目。

写这篇文章之前也在掘金提前和大家聊过，我们为什么会开源这个项目。一方面是因为我们团队目前会聚焦于打磨和迭代 JitWord 这款AI办公解决方案；另一方面，我们希望能通过开源，得到更多用户的正式需求反馈，方便我们更好的迭代产品。

这款AI PPT项目，我们应用了目前市面上比较流行的AI技术方案，比如：

AI SKills 技能
MCP服务
通用LLM模型适配器方案设计
PPT可视化编辑解决方案
AI语音识别方案
基于Coze工作流设计PPT生成Agent编排
Canvas绘制PPT能力

如果大家感兴趣，可以在 github 上研究参考：

github：github.com/jitOffice/a...

演示地址：ppt.jitword.com/jit-slide

接下来我就和大家详细介绍一下我们开发的这款AI PPT项目的功能亮点和核心技术实现。

JitPPT项目介绍

AIPPT 是一款功能丰富的开源 AI 演示文稿编辑器，让我们在数秒内创建精美的幻灯片。它在浏览器中直接集成了主流大语言模型------DeepSeek、GPT、Claude、Gemini、Kimi、通义千问等------并支持零后端模式，可立即在本地使用。

大家在项目的全局环境变量中可以配置自己的AI 模型，即可实现AI生成PPT。

核心亮点我总结如下，供大家参考：

功能	说明
🤖 多模型支持	DeepSeek、OpenAI、Claude、Gemini、Kimi、通义千问、智谱 GLM、豆包、Grok、MiniMax------均使用您自己的 API Key
⚡ AI 幻灯片生成	一句话描述即可生成完整演示文稿，实时流式预览
🎨 可视化幻灯片编辑器	拖拽画布、丰富格式化、ECharts 图表、思维导图、表格
📊 智能图表识别	自动检测数据结构并推荐最佳图表类型
🔊 AI 语音助手	基于讯飞 ASR 的语音转文字编辑功能
🌍 国际化（8 种语言）	简体中文、繁體中文、English、日本語、한국어、Bahasa、ไทย、Tiếng Việt
🔌 自定义 LLM 接口	接入任意兼容 OpenAI 格式的 API 端点
📤 多格式导出	通过 jsPDF 和 PptxGenJS 导出为 PDF、PPTX、PNG/图片
🧩 智能体架构	分层 AI 智能体系统（Core / Memory / Skills），支持扩展 AI 功能
🔒 隐私优先	API Key 仅存储在浏览器 localStorage 中，绝不发送至我们的服务器

我们提供了完整的PPT解决方案，大家可以基于我们的设计进行二次开发，对接自己的后台服务来实现AI PPT产品。

具体模块介绍如下：

精美的登录注册模块

AI PPT的入口管理模块

AI生成PPT模块

PPT可视化编辑模块

我们可以在线编辑PPT，对每张PPT做排版，同时也支持非常丰富的PPT组件和模块：

PPT布局模版

布局模版我们内置了几个基础布局，大家可以扩展来实现快速设计PPT页面的效果。

PPT支持一件嵌入媒体素材

我们可以上传各种平台的视频，音频等，让PPT演示更生动。

支持嵌入自定义表格/形状素材

支持嵌入可视化图表

图表是PPT报告的非常重要的一个功能，目前我们内置了8个可视化图表，大家也可以基于我们的方案进行扩展。

如果大家想二次开发，肯定比较关注技术栈，那接下来详细和大家分享一下我们开源的JitPPT的核心技术方案。

核心技术栈清单

前端核心技术栈

Vue 3 + Composition API + <script setup>
Vite 5 --- 极速开发服务器和构建工具
TypeScript --- 类型安全的 composables 和工具函数
Pinia --- 轻量级状态管理
Vue Router 4 --- 带权限守卫的 SPA 路由

UI 与样式

Arco Design Vue --- 企业级组件库
UnoCSS --- 原子化 CSS 引擎
Konva.js --- 幻灯片编辑器的 Canvas 渲染
Iconify --- 20 万+ 统一图标库

AI 与大模型

流式 SSE --- 通过 fetch + ReadableStream 实现实时 Token 流
智能模型路由 --- 根据任务上下文自动选择最优模型
多提供商架构 --- OpenAI 兼容 API 抽象层
智能体系统 --- 核心编排器 + 上下文记忆 + 技能注册表

组件方案

ECharts 5.5 --- 交互式数据可视化
AntV G2 --- 声明式图表
Mind Elixir --- 思维导图编辑器
Tiptap --- 支持数学/LaTeX 的富文本编辑
KaTeX --- 快速 LaTeX 数学公式渲染
Mermaid --- 流程图与图表支持
highlight.js + Shiki --- 代码语法高亮

导出

jsPDF --- PDF 导出
PptxGenJS --- PPTX 导出
html2canvas + html-to-image --- 幻灯片截图

下面再来和大家分享一下AI PPT的核心功能设计。

技术实现

我们的 AIPPT 项目是一个纯前端应用，核心设计目标是：

零后端依赖可用用户只需填写 LLM API Key 即可完整使用
多 LLM 兼容所有主流 OpenAI-compatible 接口统一抽象
模块化可扩展新增 LLM 提供商或 AI 技能只需增加配置

所有 LLM 提供商通过统一的 ProviderConfig 接口描述，位于 src/utils/ai/providers.ts。

支持的提供商及其 baseUrl：

提供商	baseUrl
DeepSeek	`https://api.deepseek.com/v1`
OpenAI	`https://api.openai.com/v1`
Claude	`https://api.anthropic.com/v1`
Gemini	`https://generativelanguage.googleapis.com/v1beta/openai`
Kimi	`https://api.moonshot.cn/v1`
Qwen	`https://dashscope.aliyuncs.com/compatible-mode/v1`
GLM	`https://open.bigmodel.cn/api/paas/v4`
Doubao	`https://ark.cn-beijing.volces.com/api/v3`
Grok	`https://api.x.ai/v1`
MiniMax	`https://api.minimaxi.com/v1`
Custom	用户自定义

新增提供商只需在 PROVIDERS 对象中添加一条配置即可，无需修改任何其他代码。

1. 流式生成核心：`streamGenerate`

src/utils/ai/index.ts 导出的 streamGenerate 是整个 AI 调用的统一入口；

2. SSE 流式解析

src/utils/ai/openaiStream.ts 实现标准 OpenAI SSE 协议解析：

支持 AbortController 中断，用户可随时停止生成。

3. 智能模型路由

src/utils/ai/modelRouter.ts 根据任务类型自动选择最优模型：

设计原则：复杂推理任务用 DeepSeek（准确度优先），实时交互任务用 MiniMax Lightning（速度优先）。

4. Canvas 渲染引擎

幻灯片编辑器基于 Konva.js 构建：

vue-konva 将 Konva 对象包装为 Vue 组件
每个幻灯片元素（文本框/图片/形状）是一个 Konva Group
拖拽、缩放、旋转通过 Konva Transformer 实现
多选操作通过 Ctrl+Click 更新 selectedIds 数组

大家可以在我们项目里学习如何使用 Canvas 来实现高性能可视化编辑器。5. Agent 的三层设计架构

scss 复制代码

AgentOrchestrator (core/)
    │  接收用户请求，协调各层
    │
    ├── ContextManager (memory/)
    │      存储对话历史 + 当前幻灯片上下文
    │
    └── SkillRegistry (skills/)
           注册并管理所有 AI 技能
               ├── TextOptimizationSkill
               ├── ImageGenerationSkill
               ├── ChartGenerationSkill
               ├── LayoutOptimizationSkill
               └── IntelligentLayoutSkill

这里我们采用了最近比较流行的Skills方案，可以在 src/agents/skills/implementations/ 创建新文件（skill）：