AI编程实战：写作助手再进化，AI 能力前后端一锅出

前言

平时写文章的时候，VS Code 编写、通义润色、Coze智能体生成标题灵感和引导词、即梦生成封面...

复制、切换、粘贴，全花在折腾上了。

今天，我们就接着"写作助手"系列继续开发，为"成章"加上最重要的 AI 能力，避免上述各种折腾。

该系列以往几次分享链接放在下面，感兴趣可以看一下。

《AI编程实战：Cursor突然收费封禁？用Trae开发一个写作助手（前端篇） - 掘金》

《AI编程实战：使用Trae从零开始实现写作助手的后端开发及前后端联调 - 掘金》

《AI编程实战：写作助手进化，Trae+Kimi-K2两小时搞定"带样式复制" - 掘金》

项目介绍

为什么非要自己实现一套呢？

一个是因为现有的写作工具没法完全满足我的需求。

再一个就是，现在 AI 辅助写个小工具是真的简单，小投入，大提升，试试呗。

第一版功能比较简单：

实现基本的写作管理（增删改查）
方便输出为公众号、知乎等平台样式
支持自定义 AI 快捷操作（比如一键扩写、改风格）

今天主要实现" AI 助手及自定义 AI 快捷操作"。

前期工作

简单回顾一下。

项目包括前后端两个工程：

chengzhang-vue：前端工程，Vue+ElementUI
chengzhang-rest：后端工程，Spring Boot + Hibernate + MySQL

实战记录

下面开始实战，整个过程都是基于 TRAE + Claude-4 完成的。

初版生成

首先，直接根据我们的需求进行生成，这里可以自行编写，也可以使用 AI 生成。

指令

markdown 复制代码

在现有项目"AI助手"右边栏面板中，实现以下AI助手功能，并确保与现有界面风格统一：

**业务功能：**
1.  **AI对话：**
*   实现AI对话功能，允许用户以文章内容作为上下文进行对话，以辅助写作。
*   要求AI对话支持流式响应。
*   AI接口直接调用模力方舟API，接口文档参考： https://ai.gitee.com/docs/openapi/v1#tag/%E6%96%87%E6%9C%AC%E7%94%9F%E6%88%90/post/chat/completions 。
*   对AI接口进行良好封装，以便多个快捷操作调用，并考虑未来兼容文生图接口。
2.  **AI快捷操作：**
*   允许用户自定义常用操作，例如润色、生成标题、生成引导词等。
*   用户可以设置快捷操作的名称和提示词。
*   点击快捷操作后，系统应立即发起AI请求。
*   快捷操作数据需要保存到数据库，请自行实现后端代码，并完成前后端对接。

**界面设计：**
*   在已有的右边栏"AI助手"面板中实现该功能，保持原有右边栏功能不变。
*   打开面板时，显示一个常见的AI对话界面。
*   对话框固定在底部。
*   对话框上方显示可用的快捷操作（胶囊状）。
*   提供新增快捷方式的入口。
*   提供一个"管理"按钮，点击后可以删除快捷方式。

**技术要求：**
*   基于现有代码进行改造。
*   前端工程目录：`D:\\Project\\other\\chengzhang\\chengzhang-vue`
*   后端工程目录：`D:\\Project\\other\\chengzhang\\chengzhang-rest`

依然是我惯用的业务+界面+技术。

过程

首先分析原有代码，大部分 AI 代码助手都有这个能力，但不同的 IDE 分析结果千差万别，TRAE 在这方面个人感觉还不错。

前端后端，一次搞定，还是挺省心的。

生成代码过程中，AI 可以自动进行服务启动，过程中出现的编译错误，也会自动修复。

结果

这是执行的结果，生成了"AI助手"面板组件，实现了快捷操作效果和外部接口调用，包括魔力方舟的API对接。

修复对接错误

看起来一切都好，但 TRAE 生成结果的质量并不是特别稳定，比如我这次就碰到了一些问题。

主要集中在前后端对接部分，解决倒是简单。

指令

TRAE 的预览功能可以很好的将前端错误"添加到对话"，如上图。

然后直接回车即可。

xml 复制代码

<错误>

过程

过程就是不断尝试、修复、验证，直至解决。

结果

生成结果如下。

此时界面效果已经 OK，并且快捷操作已经对接数据库，界面也还凑合。

尝试对话效果。

很明显，打开的文章并没有加入到 AI 对话中。

好了，AI 再来改下。

文章未添加到上下文

复制代码

对话时，未将文章内容作为上下文传递给AI，请优化

一次并没有解决，我又强调了一下。

复制代码

依然没有将文章内容传递给ai，请仔细检查

经过这次强调，AI 终于解决了。

下面给大家看下最终效果吧。

最终成果

初始化界面

快捷操作（生成标题）

新增快捷操作

管理快捷操作

补充一点

其实，我最初是想要通过 TRAE SOLO 实现的，但是 SOLO 给我补充的功能太多，然后导致超出能力范围，一直没法修复引起的错误，最终我退回到了 IDE 模式进行实现的。

希望 SOLO 能够尽快优化。

结语

整个开发过程，不算 SOLO 坑我的时间，纯 IDE 模式的话时间花费如下。

需求整理：20分钟
初版生成：15分钟左右
后期优化：3次，大概15分钟

再加上每次生成后的测试，不到 2 个小时，我还是很满意的。

我的 AI 写作搭子终于有了雏形了。

本系列的重点分享其实已经差不多了，后续，该系列依然会更新，但间隔应该会稍微久一点。

后续打算接着实现语音输入、接入文生图等功能，稳定一个版本后，我会把"成章"开源，大家可以一起正点花活交流。

好了，大家周末愉快！