跳到主要内容
基于 Trae Solo 与 GLM-4.6 的 AI 小说创作平台开发实践 | 极客日志
TypeScript AI 大前端
基于 Trae Solo 与 GLM-4.6 的 AI 小说创作平台开发实践 综述由AI生成 本项目利用 Trae Solo 辅助开发结合 GLM-4.6 大模型，构建免登录的交互式 AI 小说创作平台。用户输入故事开头后，系统自动生成多分支情节概览，选定后生成详细正文，形成树形故事结构。前端采用 React 与 TypeScript，界面遵循新粗野主义风格。API Key 本地存储保障隐私，支持通过 Vercel 快速部署。项目展示了上下文工程在复杂 AI 应用中的实践，实现了从需求文档到代码生成的全流程自动化，为创作者提供低门槛的故事创作工具。
RedisGeek 发布于 2026/3/15 更新于 2026/4/26
用户选剧情，AI 写故事：Trae Solo+GLM-4.6 实现沉浸式小说创作体验
项目背景
当前人工智能技术发展迅速，内容创作正经历从'人工主导'向'人机协同'的变革。传统小说创作面临灵感枯竭、结构混乱等痛点，现有 AI 写作工具多为单向输出，缺乏互动性。本项目打造了一款轻量级、免登录的 AI 小说创作平台，旨在通过大模型能力赋能创作者。
项目融合 Trae Solo 的高效前端开发与任务调度能力，以及 GLM-4.6 在中文叙事、情节构建上的表现，构建出'用户选剧情，AI 写故事'的创作闭环。用户输入故事开头，系统生成三个风格各异的情节分支概览；选定后，AI 续写 300–500 字正文，并衍生新分支，形成动态生长的故事树。无需注册，API Key 本地存储，兼顾隐私与便捷。
平台采用新粗野主义（Neo-Brutalism）视觉风格，以白色为基底，搭配橙、绿、蓝、灰等高对比色块，强调操作反馈与信息层级。
智谱大模型
智谱 AI （Zhipu AI）致力于推动通用人工智能（AGI）的发展。其自主研发的 GLM 系列大模型，凭借强大的语言理解与生成能力，已在学术界和产业界获得广泛认可。
最新发布的 GLM-4.6 在逻辑推理、代码生成、多语言支持等方面实现显著突破，具备更强的上下文理解与长文本处理能力；
在'AI 小说创作平台'应用中，依托 Trae Solo 的高效调度能力，结合 GLM-4.6 在叙事生成、情节延展与风格控制上的优势，实现了从用户输入到多分支剧情概览、再到沉浸式章节内容的端到端智能创作。通过本地化 API 管理与无登录轻量架构，智谱大模型为写作者提供了低门槛、高自由度的创作杠杆。
获取 API KEY
在智谱 AI 开放平台的 控制台 中，即可添加账号的 API KEY
添加完之后需要使用的时候直接复制 API KEY 即可
GLM-4.6
智谱最新旗舰，代码能力全面对齐 Claude Sonnet 4，是国内较好的编程模型。在真实编程、长上下文处理、推理能力、信息搜索、写作能力与智能体应用等多个方面实现全面提升。
curl -X POST "https://open.bigmodel.cn/api/paas/v4/chat/completions" \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your-api-key" \
-d '{ "model" : "glm-4.6" , "messages" : [ { "role" : "user" , "content" : "作为一名营销专家，请为我的产品创作一个吸引人的口号" } , { "role" : "assistant" , "content" : "当然，要创作一个吸引人的口号，请告诉我一些关于您产品的信息" } , { "role" : "user" , "content" : "智谱 AI 开放平台" } ] , "thinking" : { "type" : "enabled" } , "max_tokens" : 65536 , "temperature" : 1.0 } '
Trae Solo 过去几年，Prompt Engineering（提示词工程）风靡一时。然而，随着 AI 应用日益深入复杂场景，仅靠静态、孤立的提示词已难以为继。
以智能客服为例：系统不仅要理解用户当前的提问，还需融合历史对话、用户身份、业务状态，甚至动态调用不同后端服务。此时，传统 Prompt Engineering 的局限性暴露无遗——它把 AI 调用当作一次性的'黑箱请求'，缺乏对整体交互脉络的把握。
正是在这样的背景下，Context Engineering（上下文工程）应运而生，而 Trae Solo 是这一范式演进的核心工具之一。Trae Solo 不满足于仅仅优化提示词，而是构建了一个结构化、可演化、可追溯的上下文空间——在正确的时间，为正确的模型，注入正确的上下文信息。它将 AI 交互从'单次问答'升级为'持续、智能、情境感知的对话流'。
Trae Solo 开发实践
开发提示词 我现在要开发一个叫做 AI 小说创作平台，流程是用户给出一个故事的开头，应用会调用 GLM-4.6 ，生成后续三个情节分支概览，用户可以任意选择一个分支。选择分支之后立马调用 GLM-4.6 生成具体的情节，大约 300 -500 百字左右。未被选择的分支就抛弃掉，选择的分支使用树形结构一级一级往下展示，但是始终展示当前的分支，持续重复。采用 React 技术，风格使用新粗野风格，多用白色、橙色、绿色、蓝色、灰色等，流畅的交互设计。这个没有登录，就是所有人都可以用，而且只有两个页面，一个是首页 - 核心功能，一个是 API Key 的配置页面（保存到本地的 local storage 中），在产品需求文档中加入 GLM4.6 调用示例： const url = ' https://open.bigmodel.cn/api/paas/v4/chat/completions ' ; const options = { method: 'POS T', headers: {Authorization: ' Bearer <token>', ' Content-Type': ' application/json'}, body: ' {"model" :"glm-4.6" ,"messages" :[{"role" :"system" ,"content" :"你是一个有用的 AI 助手。" },{"role" :"user" ,"content" :"请介绍一下人工智能的发展历程。" }],"temperature" :1 ,"max_tokens" :65536 ,"stream" :false }'};
Solo 首先会创建一份产品需求文档和技术架构文档：
开发文档
# AI 小说创作平台 - 产品需求文档
## 1. 产品概述
AI 小说创作平台是一个基于 GLM-4.6 大语言模型的交互式故事创作工具，用户可以输入故事开头，系统自动生成多个情节分支供用户选择，形成个性化的故事发展路径。
该平台旨在为创作者、小说爱好者和娱乐用户提供一个简单易用的 AI 辅助创作工具，通过树形结构展示故事发展脉络，让每个用户都能创作出独特的故事。
## 2. 核心功能
### 2.1 用户角色
本产品无需用户注册登录，所有访问者均可直接使用全部功能。
### 2.2 功能模块
我们的 AI 小说创作平台包含以下主要页面：
1. **首页（故事创作页面）**：故事输入区域、情节分支选择区域、故事树形展示区域、当前情节显示区域
2. **API Key 配置页面**：API Key 输入表单、配置保存功能、配置状态显示
### 2.3 页面详情
| 页面名称 | 模块名称 | 功能描述 |
| ----------- | ------ | ---------------------------------------- |
| 首页 | 故事输入区域 | 提供文本输入框，用户输入故事开头（50 -200 字），包含输入提示和字数统计 |
| 首页 | 情节分支生成 | 调用 GLM-4.6 API 生成三个不同的情节分支概览，每个分支 50 -100 字描述 |
| 首页 | 分支选择区域 | 展示三个情节分支选项，用户点击选择其中一个，包含分支预览和选择按钮 |
| 首页 | 详细情节生成 | 基于用户选择的分支调用 GLM-4.6 生成 300 -500 字的详细情节内容 |
| 首页 | 故事树形展示 | 使用树形结构展示故事发展路径，高亮当前选择的分支，显示历史选择路径 |
| 首页 | 当前情节显示 | 展示当前生成的详细情节内容，包含继续创作和重新开始功能 |
| 首页 | 导航功能 | 提供返回上一步、重新开始、前往配置页面的导航按钮 |
| API Key 配置页面 | 配置表单 | 提供 API Key 输入框，包含输入验证和格式检查 |
| API Key 配置页面 | 本地存储 | 将 API Key 保存到 localStorage，包含保存确认和清除功能 |
| API Key 配置页面 | 配置状态 | 显示当前 API Key 配置状态，包含连接测试功能 |
## 3. 核心流程
**主要用户操作流程：**
1. 用户访问首页，检查 API Key 配置状态
2. 如未配置 API Key，引导用户前往配置页面设置
3. 用户在首页输入故事开头
4. 系统调用 GLM-4.6 生成三个情节分支概览
5. 用户选择其中一个分支
6. 系统基于选择的分支生成详细情节内容
7. 用户可以继续基于当前情节生成新的分支，或重新开始创作
**GLM-4.6 API 调用示例：**
```javascript
const url = 'https://open.bigmodel.cn/api/paas/v4/chat/completions' ;
const options = {
method: 'POST' ,
headers: { Authorization: 'Bearer <token>' , 'Content-Type' : 'application/json' },
body: JSON.stringify({
"model" : "glm-4.6" ,
"messages" : [
{ "role" : "system" , "content" : "你是一个专业的小说创作助手，擅长根据给定的故事开头创作引人入胜的情节发展。" },
{ "role" : "user" , "content" : "请基于以下故事开头，生成三个不同的情节发展方向..." }
],
"temperature" : 1 ,
"max_tokens" : 65536 ,
"stream" : false
})
};
graph TD
A[首页] --> B{检查 API Key}
B -->|未配置 | C[API Key 配置页面]
B -->|已配置 | D[输入故事开头]
C --> E[保存 API Key 到 localStorage]
E --> A
D --> F[生成三个情节分支]
F --> G[选择分支]
G --> H[生成详细情节]
H --> I[展示在故事树中]
I --> J{继续创作？}
J -->|是 | F
J -->|否 | K[重新开始]
K --> D
4. 用户界面设计
4.1 设计风格 采用新粗野主义（Neo-Brutalism）设计风格，具体包括：
主色调 ：白色 (#FFFFFF) 作为背景色强调色 ：橙色 (#FF6B35)、绿色 (#4ECDC4)、蓝色 (#45B7D1)辅助色 ：深灰色 (#2C3E50)、浅灰色 (#BDC3C7)按钮风格 ：粗边框、高对比度、方形设计，带有阴影效果字体 ：粗体无衬线字体，主标题 18-24px，正文 14-16px布局风格 ：网格化布局，明确的区块分割，大胆的色彩对比图标风格 ：简洁的线性图标，配合品牌色彩
4.2 页面设计概览 页面名称 模块名称 UI 元素 首页 故事输入区域 白色背景的大型文本框，橙色边框，字数计数器，绿色提交按钮 首页 分支选择区域 三个并排的卡片，蓝色边框，悬停时橙色高亮，粗体标题 首页 故事树展示 深灰色背景，白色连接线，彩色节点（橙/绿/蓝），当前节点高亮 首页 情节内容区 白色背景，深灰色文字，绿色边框，滚动条样式定制 首页 导航按钮 粗边框按钮，不同功能使用不同颜色，悬停效果明显 API 配置页面 配置表单 居中布局，白色卡片，橙色输入框边框，大型保存按钮 API 配置页面 状态显示 彩色状态指示器，成功为绿色，错误为橙色，未配置为灰色
4.3 响应式设计
桌面端（1200px+） ：三栏布局，故事树、内容区、分支选择并排显示平板端（768px-1199px） ：两栏布局，故事树折叠为抽屉式，主要显示内容区和分支选择移动端（<768px） ：单栏布局，各模块垂直堆叠，优化触摸交互交互优化 ：支持触摸手势，按钮尺寸适配移动端，文字大小自适应
技术架构文档：
![] (https :
![](https :
AI 小说创作平台 - 技术架构文档
1. 架构设计 graph TD
A[用户浏览器] --> B[React 前端应用]
B --> C[GLM-4.6 API]
B --> D[LocalStorage]
subgraph "前端层"
B
D
end
subgraph "外部服务"
C
end
2. 技术描述
前端 : React@18 + TypeScript + Vite + TailwindCSS状态管理 : React Context + useReducerHTTP 客户端 : Fetch API本地存储 : LocalStorage API外部服务 : GLM-4.6 API (智谱 AI)
3. 路由定义 路由 用途 / 首页，故事创作主界面，包含输入区域、分支选择、故事树展示 /config API Key 配置页面，用于设置和管理 GLM-4.6 的 API 密钥
4. API 定义
4.1 GLM-4.6 API 集成 POST https://open.bigmodel.cn/api/paas/v4/chat/completions
参数名称 参数类型 是否必需 描述 model string true 固定值 "glm-4.6" messages array true 对话消息数组，包含系统提示和用户输入 temperature number true 生成随机性，设置为 0.8 以保证创意性 max_tokens number true 最大生成 token 数，分支概览设置为 200 stream boolean true 是否流式输出，设置为 false 响应参数: 参数名称 参数类型 描述 --------- --------- ------ choices array 生成的回复选项数组 choices[0].message.content string 生成的文本内容
POST https://open.bigmodel.cn/api/paas/v4/chat/completions
参数名称 参数类型 是否必需 描述 model string true 固定值 "glm-4.6" messages array true 包含故事上下文和选择分支的消息数组 temperature number true 生成随机性，设置为 0.7 max_tokens number true 最大生成 token 数，详细情节设置为 800 stream boolean true 是否流式输出，设置为 false 示例请求:
{
"model" : "glm-4.6" ,
"messages" : [
{
"role" : "system" ,
"content" : "你是一个专业的小说创作助手，擅长根据给定的故事开头和选择的情节方向创作引人入胜的详细情节。请生成 300-500 字的详细情节内容。"
} ,
{
"role" : "user" ,
"content" : "故事开头：[用户输入的开头] \n 选择的情节方向：[用户选择的分支] \n 请基于以上内容生成详细的情节发展。"
}
] ,
"temperature" : 0.7 ,
"max_tokens" : 800 ,
"stream" : false }
4.2 本地存储 API
localStorage .setItem ('glm_api_key' , apiKey);
const apiKey = localStorage .getItem ('glm_api_key' );
localStorage .removeItem ('glm_api_key' );
localStorage .setItem ('current_story' , JSON .stringify (storyData));
const storyData = JSON .parse (localStorage .getItem ('current_story' ) || '{}' );
5. 数据模型
5.1 数据模型定义 erDiagram
STORY ||--o{ STORY_NODE : contains
STORY_NODE ||--o{ BRANCH_OPTION : has
STORY {
string id PK
string title
string initialContent
date createdAt
string currentNodeId
}
STORY_NODE {
string id PK
string storyId FK
string parentNodeId FK
string content
int level
boolean isSelected
date createdAt
}
BRANCH_OPTION {
string id PK
string nodeId FK
string title
string description
boolean isSelected
int order
}
5.2 TypeScript 类型定义
interface BranchOption {
id : string ;
title : string ;
description : string ;
isSelected : boolean ;
order : number ;
}
interface StoryNode {
id : string ;
parentNodeId ?: string ;
content : string ;
level : number ;
isSelected : boolean ;
createdAt : Date ;
branches ?: BranchOption [];
}
interface Story {
id : string ;
title : string ;
initialContent : string ;
nodes : StoryNode [];
currentNodeId ?: string ;
createdAt : Date ;
}
interface GLMResponse {
choices : Array <{ message : { content : string ; role : string ; }; finish_reason : string ; }>;
usage : { prompt_tokens : number ; completion_tokens : number ; total_tokens : number ; };
}
interface AppState {
story : Story | null ;
isLoading : boolean ;
error : string | null ;
apiKey : string | null ;
currentStep : 'input' | 'branches' | 'content' ;
}
6. 组件架构
6.1 组件层次结构 graph TD
A[App] --> B[Router]
B --> C[HomePage]
B --> D[ConfigPage]
C --> E[StoryInput]
C --> F[BranchSelector]
C --> G[StoryTree]
C --> H[ContentDisplay]
C --> I[Navigation]
D --> J[ApiKeyForm]
D --> K[ConfigStatus]
subgraph "共享组件"
L[Button]
M[Loading]
N[ErrorMessage]
O[Modal]
end
6.2 核心组件说明
功能：处理用户故事开头输入
Props：onSubmit, isLoading, maxLength
状态：inputValue, charCount, validation
功能：展示和选择情节分支
Props：branches, onSelect, isLoading
状态：selectedBranch, hoverBranch
功能：树形展示故事发展路径
Props：story, currentNodeId, onNodeClick
状态：expandedNodes, treeLayout
功能：显示当前情节内容
Props：content, isLoading, onContinue
状态：displayText, animationState
功能：API Key 配置和验证
Props：onSave, initialValue
状态：apiKey, isValid, testResult
7. 状态管理
7.1 Context 设计
const StoryContext = createContext<{ state : AppState ; dispatch : Dispatch <StoryAction >; }>({} as any );
const ConfigContext = createContext<{ apiKey : string | null ; setApiKey : (key : string void ; isConfigured : boolean ; }>({} as any );
7.2 状态更新流程 graph LR
A[用户操作] --> B[Action Dispatch]
B --> C[Reducer 处理]
C --> D[状态更新]
D --> E[组件重渲染]
E --> F[UI 更新]
8. 部署架构
8.1 构建配置
构建工具 : Vite输出格式 : 静态 HTML/CSS/JS 文件代码分割 : 路由级别的懒加载资源优化 : 图片压缩、CSS/JS 压缩
8.2 部署方案
推荐部署 : Vercel、Netlify 等静态托管平台备选方案 : GitHub Pages、云服务器静态托管CDN 加速 : 自动配置，提升全球访问速度HTTPS : 默认支持，确保 API 调用安全
#### 开发调整
检查完毕开发文档，发现确实按照自己所想的话，就可以直接让 Solo 根据文档进行开发了。如果文档有问题的话，可以手动进行调整，也可以让输入需求 Solo 进行调整。
![] (https :
Solo 不仅会自动定义需要实现的要点和任务，也会初始化项目基础架构，包括下载依赖，配置环境这些，Solo 统统给你打包完成，根本不需要自己操心：
![](https :
Solo 会严格按照自己指定的任务进行完成，如果我们再开发的过程中发现了 Solo 的方向不对，或者有需要补充的时候，可以直接打断 Solo 输入需求，因为 Solo 完全遵守上下文工程的理念的，不管从哪里开始，他都会项目目前各个信息整合之后进行开发，完全不用担心打断会对 Solo 的开发进度产生什么影响。
![](https :
开发完毕之后可以再内置浏览其中进行操作测试
![](https :
![](https :
但是我在测试的过程中发现，应用在 API 调用失败的时候会使用模拟数据，这是绝对不允许的，那么输入下方提示词让 Solo 给我改成回来！
项目中绝对不允许使用模拟数据，必须是 AI 生成的数据，API 调用参考： curl -X POST " https://open.bigmodel.cn/api/paas/v4/chat/completions " \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your-api-key" \
-d '{ "model": "glm-4.6", "messages": [ { "role": "user", "content": "作为一名营销专家，请为我的产品创作一个吸引人的口号" }, { "role": "assistant", "content": "当然，要创作一个吸引人的口号，请告诉我一些关于您产品的信息" }, { "role": "user", "content": "智谱 AI 开放平台" } ], "thinking": { "type": "enabled" }, "max_tokens": 65536, "temperature": 1.0 }'
那么 Solo 在接收到修改需求之后，还是严格按照先定义任务列表，将大任务拆解成小任务一项一项的去完成任务这个理念：
![] (https :
并且 Solo 在修改的过程中还会进行自测，确保我们想要的功能给到我们的时候是准备无误的。
