用户选剧情，ai写故事：codebuddy+glm-4.6实现沉浸式小说创作体验
项目背景
在人工智能技术迅猛发展的今天，内容创作正经历从“人工主导”向“人机协同”的深刻变革。传统小说创作往往面临灵感枯竭、结构混乱、节奏把控难等痛点，而现有ai写作工具多为单向输出，缺乏互动性与叙事张力。为打破这一局限，我们打造了一款轻量级、免登录的 ai 小说创作平台，旨在通过前沿大模型能力赋能每一位故事创作者。
本项目深度融合 CodeBuddy 的高效前端开发与任务调度能力，以及 GLM-4.6 在中文叙事、情节构建和风格一致性上的卓越表现，构建出“用户选剧情，AI写故事”的沉浸式创作闭环。用户只需输入一个故事开头，系统即刻生成三个风格各异的情节分支概览；选定其一后，AI将续写 300–500 字的高质量正文，并在此基础上持续衍生新分支，形成一棵动态生长的故事树。整个过程无需注册，API Key 通过本地存储安全保存，兼顾隐私与便捷。
平台采用 新粗野主义（Neo-Brutalism） 视觉风格，以白色为基底，搭配橙、绿、蓝、灰等高对比色块，强调操作反馈与信息层级，营造出兼具个性与流畅交互的创作体验。我们相信，AI 不应替代创作者，而应成为激发想象力的伙伴——这款平台正是对“人机共创”未来的一次实践探索。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
智谱大模型
智谱AI（Zhipu AI）是中国领先的大模型技术公司，致力于推动通用人工智能（AGI）的发展。其自主研发的GLM（General Language Model）系列大模型，凭借强大的语言理解与生成能力、多模态融合能力以及高效的推理性能，已在学术界和产业界获得广泛认可。
最新发布的GLM-4.6不仅在逻辑推理、代码生成、多语言支持等方面实现显著突破，还具备更强的上下文理解与长文本处理能力；
在“AI小说创作平台”这一应用中，我们正是依托 Trae Solo 的高效调度能力，结合 GLM-4.6 在叙事生成、情节延展与风格控制上的强大语言建模优势，实现了从用户输入的故事开头到多分支剧情概览、再到沉浸式章节内容的端到端智能创作。通过本地化 API 管理与无登录轻量架构，智谱大模型不仅为写作者提供了低门槛、高自由度的创作杠杆，更重新定义了 AI 驱动下互动式小说生成的新范式。
获取API KEY
在智谱AI开放平台的控制台中，即可添加账号的API KEY
添加完之后需要使用的时候直接复制API KEY即可
GLM-4.6
智谱最新旗舰，代码能力全面对齐 Claude Sonnet 4，是国内最好的编程模型。在真实编程、长上下文处理、推理能力、信息搜索、写作能力与智能体应用等多个方面实现全面提升。
GLM-4.6调用示例
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 }'
CodeBuddy IDE
CodeBuddy IDE 是PHP中文网推出的全新AI集成开发环境，定位为全球首个实现“产品—设计—研发部署”全流程一体化的AI全栈工程师工作台。它不再只是一个代码补全工具，而是从创意源头介入，支持用户通过自然语言对话，无需编写一行代码即可完成从产品构思、交互设计到前后端开发与部署的完整闭环，极大降低了非技术背景创作者的开发门槛25。
最新版本的 CodeBuddy 引入多项突破性功能：其一是“设计模式”（Design Mode），可根据用户需求直接生成高保真产品原型图；其二是“Plan Mode”，能自动生成结构清晰的开发计划与技术方案；此外，平台已于2025年8月率先支持 DeepSeek V3.1 最新模型，并兼容 GPT、Claude、Gemini 等国际主流大模型，兼顾国内合规性与全球技术前沿18。同时，它还深度适配微信开发者工具，支持在小程序开发中通过 @Docs 指令实时调用微信官方文档，有效减少模型幻觉10。
CodeBuddy 的主打卖点在于“对话即编程”与“产设研一体化”。它将产品经理、UI设计师和全栈工程师的角色融合进一个AI智能体，用户只需用自然语言描述想法，即可获得可运行的应用成品。这种端到端的AI协同开发范式，不仅提升了专业开发者的效率，更让创意人士能真正“所想即所得”，重新定义了人机共创的边界。
CodeBuddy开发实践
开发提示词
我现在要开发一个叫做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: 'POST',headers: {Authorization: 'Bearer
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
开发文档
产品需求文档：
# 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调用示例：**```javascriptconst url = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';const options = { method: 'POST', headers: { Authorization: 'Bearer 技术架构文档： # AI小说创作平台 - 技术架构文档## 1. 架构设计```mermaidgraph 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 + useReducer- **HTTP客户端**: 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 |示例请求:```json{ "model": "glm-4.6", "messages": [ { "role": "system", "content": "你是一个专业的小说创作助手，擅长根据给定的故事开头和选择的情节方向创作引人入胜的详细情节。请生成300-500字的详细情节内容。" }, { "role": "user", "content": "故事开头：[用户输入的开头] 选择的情节方向：[用户选择的分支] 请基于以上内容生成详细的情节发展。" } ], "temperature": 0.7, "max_tokens": 800, "stream": false}```### 4.2 本地存储API**API Key管理**```typescript// 保存API KeylocalStorage.setItem('glm_api_key', apiKey);// 获取API Keyconst apiKey = localStorage.getItem('glm_api_key');// 删除API KeylocalStorage.removeItem('glm_api_key');```**故事数据缓存**```typescript// 保存当前故事状态localStorage.setItem('current_story', JSON.stringify(storyData));// 获取故事状态const storyData = JSON.parse(localStorage.getItem('current_story') || '{}');```## 5. 数据模型### 5.1 数据模型定义```mermaiderDiagram 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类型定义```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;}// API响应类型interface GLMResponse { choices: Array; 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 组件层次结构```mermaidgraph 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 核心组件说明**StoryInput组件**- 功能：处理用户故事开头输入- Props：onSubmit, isLoading, maxLength- 状态：inputValue, charCount, validation**BranchSelector组件**- 功能：展示和选择情节分支- Props：branches, onSelect, isLoading- 状态：selectedBranch, hoverBranch**StoryTree组件**- 功能：树形展示故事发展路径- Props：story, currentNodeId, onNodeClick- 状态：expandedNodes, treeLayout**ContentDisplay组件**- 功能：显示当前情节内容- Props：content, isLoading, onContinue- 状态：displayText, animationState**ApiKeyForm组件**- 功能：API Key配置和验证- Props：onSave, initialValue- 状态：apiKey, isValid, testResult## 7. 状态管理### 7.1 Context设计```typescript// 故事状态Contextconst StoryContext = createContext;}>({} as any);// 配置状态Contextconst ConfigContext = createContext void; isConfigured: boolean;}>({} as any);```### 7.2 状态更新流程```mermaidgraph 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调用安全 通过项目链接直接进入到项目中，在进入项目之前需要配置一下智谱的API KEY，这个操作在前文也提到过，这里不过多赘述： 输入API KEY之后，点击测试配置，检验API KEY是否正确，或者账户余额是否充足，测试完毕之后即可保存设置 配置完毕之后，即可开启故事创作，那么需要自己先拟定一个故事标题，和故事的开头，然后点击生成故事分支 点击之后会先讲当前操作的内容保存到创作树中 然后回到首页点击生成新分支 可以看到进度量实时展示着创作的进度 不一会儿就生成出三个不同的故事分支 这里我们选择任一一个故事分支，点击生成分支的详细内容 可以看到生成的详细内容，可以说是很有创意性了 这时候再回到创作树中，可以看到刚刚选择的分支以及详情，这样不管创作多久也可以返回看到自己的创作历程 接下来就是不断重复这个过程，一遍又一遍选择新的分支，探索不同分支带来的不同结果，最后形成一篇小说部署展示
