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

写这篇文章之前也提前和大家聊过，我们为什么会开源这个项目。一方面是因为我们团队目前会聚焦于打磨和迭代 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项目。