说实话，当我们在代码编辑器里敲下Zui后一行代码，kan着统计工具显示“Total Lines: 10,000+”的时候，心里那种复杂的滋味真的hen难形容。这不仅仅是一个数字的堆砌，geng是我们团队无数个日夜对前端技术边界的一次疯狂试探。今天我想抛开那些枯燥的官方文档，用Zui接地气的方式和大家聊聊，我们是如何用Vue3从零开始，构建出这个名为AIPPT的开源项目的。

你可Neng会问，市面上PPT工具那么多，为什么还要造这个轮子？因为现有的工具要么太重，要么不够智Neng，要么就是——对开发者不够友好。我们想要的，是一个完全运行在浏览器端，Neng够直接调用主流大模型，并且把控制权完全交还给用户的演示文稿编辑器。听起来是不是有点野心勃勃？但好在我们Zuo到了。

得给大家透个底，这个项目Zui核心的设计理念就是“零后端”。没错，你不需要搭建复杂的服务器环境，也不需要为了一个简单的API调用去折腾Nginx配置。所有的魔法，dou发生在你的浏览器里。

我们直接在浏览器中集成了目前市面上Zui火的一批大语言模型：DeepSeek、GPT、Claude、Gemini、Kimi、通义千问等等。这就像是给编辑器装上了一个“Zui强大脑”。你只需要在全局环境变量里配置好你的API Key，就Neng立刻让AI帮你生成PPT内容。这种即开即用的体验，真的是谁用谁知道。

Ru果你想亲自上手体验一下Ke以访问我们的在线演示地址：。当然作为开源项目，代码才是我们的灵魂，GitHub仓库地址奉上：。

既然是技术分享，咱们就得来点硬核的。hen多朋友在后台私信问，这1万行代码到底是怎么堆出来的？其实选对技术栈Neng让开发效率事半功倍。

我们的前端框架选择了Vue3，这不仅仅是因为它流行，geng因为它的响应式系统和组合式API在处理复杂状态管理时简直是为这种大型应用量身定制的。但是光有Vue3还不够，PPT编辑器的核心在于“画布”。

为了实现高性Neng的可视化编辑，我们引入了Konva.js。Ru果你对Canvas 2D绘图有所了解，应该知道Konva是个多么强大的存在。它让我们Neng够轻松地处理图形的拖拽、缩放、旋转，甚至是复杂的图层管理。在Konva的加持下我们的编辑器在处理大量元素时依然Neng保持丝滑流畅，这一点，我相信你在试用时就Neng感受到。

这部分是我个人Zui引以为傲的设计。我们并没有简单地把AI调用散落在各个组件里而是设计了一套严谨的Agent三层架构。这可Neng是目前前端领域比较前沿的一种尝试。

想象一下AI不是简单的“输入-输出”，而是一个有记忆、有技Neng的助手。我们的架构大概长这样：

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

kan到这个结构，你应该Neng明白我们的良苦用心了。AgentOrchestrator就像是一个指挥官，它负责接收你的指令；ContextManager则是它的记忆宫殿，记住了你刚才说了什么以及当前这张PPT里dou有什么内容；而SkillRegistry就是它的武器库，里面装满了各种技Neng。

这种设计的好处在于，Ru果你想给AI加一个新技Neng，你只需要在src/agents/skills/implementations/目录下创建一个新文件，然后在AgentOrchestrator.ts的registerSkills里注册一下就完事了。完全不需要去改动核心逻辑， 性极强。

在开发过程中，我们遇到的一个大坑就是如何兼容市面上五花八门的AI模型。有的用OpenAI协议，有的有自己的私有协议，有的流式传输格式还不一样。

为了解决这个问题，我们搞了一个统一的入口。在src/utils/ai/index.ts中，导出了一个核心函数streamGenerate。不管你底层用的是DeepSeek还是GPT，上层业务代码只需要调用这个函数，剩下的脏活累活dou由它来处理。

而在geng底层的src/utils/ai/openaiStream.ts中，我们实现了标准的OpenAI SSE协议解析。这就像是给所有模型配了一个“翻译官”，确保它们Neng听懂浏览器的话，也Neng把话说清楚。

这绝对不是吹牛。我们把所有的大语言模型提供商dou抽象成了ProviderConfig接口，配置文件就在src/utils/ai/providers.ts里。Ru果你想接入一个新的模型，比如Zui近hen火的某个国产大模型，你只需要在PROVIDERS对象里加一条配置，填上baseUrl和key路径，完全不用动其他任何代码。这种“插件化”的思路，省去了后续维护无数的麻烦。

geng有意思的是我们在src/utils/ai/modelRouter.ts里加了一个“智Neng路由”功Neng。你可Neng会问，AI还需要路由吗？当然！

我们的设计原则是：复杂推理任务用DeepSeek，实时交互任务用MiniMax Lightning。系统会根据你当前的任务类型，自动帮你选择Zui合适的模型。比如你在Zuo复杂的逻辑排版，它会默默切换到DeepSeek；Ru果你只是想让AI帮你润色一段文字，它会秒切到MiniMax，让你几乎感觉不到延迟。这种细节上的打磨，才是提升用户体验的关键。

哦对了我们还贴心地支持了AbortController中断。有时候AI生成着生成着跑偏了你只需要点一下停止，它就会立刻闭嘴，不会浪费你的Token和时间。

虽然名字叫AIPPT，但它的Neng力远不止生成文字。我们内置了非常丰富的PPT组件和模块，旨在打造一个完整的创作闭环。

Zuo汇报Zui怕什么？Zui怕数据展示得乱七八糟。我们内置了8个常用的可视化图表组件，而且支持基于我们的方案进行 。你只需要告诉AI你的数据，它就Neng自动帮你生成漂亮的柱状图、饼图或者折线图。这背后其实是ChartGenerationSkill在发挥作用。

现在的PPT早就不是图文混排的时代了。我们支持上传各种平台的视频、音频，让你的演示geng加生动。想象一下在讲解到关键部分时视频自动播放，那种沉浸感是静态图片无法比拟的。

为了照顾那些不想从零开始设计的用户，我们内置了几个基础的布局模版。当然我们geng鼓励大家去 这些模版。通过LayoutOptimizationSkill，AI甚至Neng根据你的内容风格，智Neng推荐Zui合适的排版方案。

写到这里可Neng有人会好奇，这么好的项目，为什么要免费开源？其实在写这篇文章之前，我也在掘金上和大家稍微透露过一点心声。

一方面我们团队目前的战略重心会稍微向JitWord这款AI办公解决方案倾斜，我们需要集中精力打磨那个产品；但另一方面也是geng重要的原因，我们深知闭门造车是Zuo不出好产品的。通过开源，我们希望Neng把AIPPT交给社区，让geng多开发者来审视它、使用它，甚至吐槽它。

你们的每一个Issue、每一个PR，dou是我们迭代产品的动力。我们提供了完整的PPT解决方案，大家完全Ke以基于我们的设计进行二次开发，对接自己的后台服务，打造属于自己的AI PPT产品。甚至，你Ke以尝试用AI Coding的方式来优化这个项目，加上后端服务，让它变得geng强大。

这1万行代码，只是开始。我们的AIPPT项目是一个纯前端应用，核心设计目标就是让AI触手可及。虽然现在它还有hen多优化的空间，比如图表的样式Ke以geng丰富，AI的排版逻辑Ke以geng细腻，但这就是开源的魅力所在——无限可Neng。

后面我会在掘金中持续分享geng多AI技术实践和高价值的AI开源项目。Ru果你对Vue3、对Canvas、对Agent架构感兴趣，或者只是单纯想Zuo一个好用的PPT给自己用，dou欢迎去GitHub上把项目Clone下来。别忘了这不仅仅是一个工具，geng是我们这群前端工程师对AI时代的一点小小回应。

让我们一起，用代码改变演示的方式。