大家好，我是徐小夕。架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”

上期和大家分享了我们精心打磨的协同AI文档 JitWord：

熟悉我的朋友可能知道, 我一直在研究和分享AI相关的技术和开源项目，自己也在创业做AI产品。

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

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

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

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

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

github：https://github.com/jitOffice/aippt

接下来我就和大家详细介绍一下我们开发的这款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产品。

具体模块介绍如下：

1. 精美的登录注册模块

2. AI PPT的入口管理模块

3. AI生成PPT模块

4. PPT可视化编辑模块

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

1. PPT布局模版

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

2. PPT支持一件嵌入媒体素材

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

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

4. 支持嵌入可视化图表

图表是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 技能只需增加配置

给大家分享一下我们项目的目录详细说明，方便大家快速上手：

src/ ├── agents/                # AI Agent 系统（核心/记忆/技能三层） │   ├── core/ │   │   ├── AgentOrchestrator.ts   # Agent 总协调器 │   │   └── SkillRouter.ts         # 技能路由 │   ├── memory/ │   │   └── ContextManager.ts      # 对话历史 + 幻灯片上下文 │   ├── skills/ │   │   ├── SkillRegistry.ts       # 技能注册表 │   │   └── implementations/       # 各技能实现 │   └── index.ts                   # 统一对外 API │ ├── api/                   # HTTP 客户端层 │   ├── auth.ts            # 注册/登录/GitHub OAuth │   ├── document.ts        # 文档 CRUD + 权限管理 │   ├── presentation.ts    # 演示文稿接口 │   ├── ai.ts              # AI 试用 + 图像生成 │   └── response.ts        # 响应格式解包工具 │ ├── composables/           # Vue 3 Composition API 逻辑复用 │   ├── useAIGeneration.ts       # AI 内容流式生成 │   ├── useAISuggestionApplier.ts # AI 建议应用 │   ├── useChatIntegration.ts    # AI 聊天面板集成 │   ├── useDocumentIntegration.ts # 文档集成 │   ├── useSlideAutoSave.ts      # 防抖自动保存 │   ├── useSlideOperations.ts    # 幻灯片增删改查 │   ├── useThemeManager.ts       # 主题管理 │   ├── useLayoutApplication.ts  # 布局应用 │   └── ... │ ├── utils/ │   ├── ai/                # LLM 接入层 │   │   ├── config.ts      # AI 设置存取（localStorage） │   │   ├── providers.ts   # 所有 LLM 提供商配置 │   │   ├── modelRouter.ts # 智能模型路由 │   │   ├── openaiStream.ts # OpenAI SSE 流式解析 │   │   └── index.ts       # streamGenerate 统一入口 │   ├── export/            # PDF/PPTX/PNG 导出 │   ├── import/            # PPTX/Markdown 导入 │   └── slide/             # 幻灯片渲染工具 │ ├── views/ │   ├── login.vue          # 登录/注册页（含 Demo 一键体验） │   ├── home.vue           # 工作台首页 │   ├── ai-create.vue      # AI 创建演示文稿 │   └── slide-page/ │       └── slide-page.vue # 幻灯片编辑器主页面（10 万行级） │ └── locales/               # i18n（8 种语言）

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

export interface ProviderConfig {   key: ProviderKey          // 唯一标识   label: string             // 展示名称   baseUrl: string           // OpenAI-compatible base URL   models: { label: string; value: string }[]   buildHeaders?: (apiKey: string) => Record<string, string> }

支持的提供商及其 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 调用的统一入口：

streamGenerate(   userPrompt: string,   systemPrompt?: string,   handler?: StreamHandler,   // { onDelta, onDone, onError }   controller?: AbortController,   options?: {     provider?: ProviderKey    // 强制指定提供商     model?: string            // 强制指定模型     taskContext?: {           // 自动路由上下文       isChat?: boolean       slideCount?: number       hasDocument?: boolean     }   } ): AbortController

执行流程如下：

streamGenerate(prompt)   │   ├─ 读取 localStorage AI 设置   ├─ 判断是否有 API Key   │   ├─ 有 Key → 直接调 Provider API（纯前端，零后端）   │   └─ 无 Key → 调 /ai/trial/stream 后端兜底   │   ├─ 智能模型路由（analyzeTaskType）   └─ streamOpenAI() → SSE 解析 → onDelta 回调2. SSE 流式解析

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

// 使用 fetch + ReadableStream，兼容所有现代浏览器 const res = await fetch(url, { method: 'POST', body: JSON.stringify({stream: true}), signal }) const reader = res.body.getReader() while (true) {   const { done, value } = await reader.read()   if (done) break   // 解析 "data: {...}\n\n" 格式   // 提取 choices[0].delta.content   onDelta(delta) }

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

3. 智能模型路由

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

用户 Prompt     │     ▼ analyzeTaskType(prompt, context)     │     ├── 包含 "report/analysis" → INDUSTRY_REPORT → DeepSeek Reasoner     ├── 包含 "pdf/document" → DOCUMENT_PARSE → DeepSeek Chat     ├── 幻灯片数 > 8 → LONG_FORM_WRITING → DeepSeek Chat     ├── 包含 "layout/align" → LAYOUT_ADJUSTMENT → MiniMax Lightning     ├── isChat: true → REAL_TIME_CHAT → MiniMax Lightning     └── 默认短 Prompt → QUICK_EDIT → MiniMax Lightning

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

4. Canvas 渲染引擎

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

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

大家可以在我们项目里学习如何使用 Canvas 来实现高性能可视化编辑器。

5. Agent 的三层设计架构

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

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

export class VideoGenerationSkill implements Skill {   metadata: SkillMetadata = {     id: 'video-generation',     name: 'Video Generation',     keywords: ['视频', 'video', '动画', 'animation'],     description: 'AI 生成演示视频',   }   async execute(params: SkillParams): Promise<SkillResult> {     // 调用视频生成 API     return { type: 'video', url: '...' }   } }

在 AgentOrchestrator.ts 的 registerSkills() 中注册即可。

当然还有很多技术细节，这里就不一一介绍了，大家可以获取github项目源码自行研究体验：

github地址：https://github.com/jitOffice/aippt

当然这个项目还有很多优化的空间，大家可以使用AI Coding的方式自行优化，实现后端服务等，来打造自己的AI PPT项目。