用户选剧情，AI写故事：Trae Solo+GLM-4.6实现沉浸式小说创作体验

用户选剧情，AI写故事：Trae Solo+GLM-4.6实现沉浸式小说创作体验

项目背景

在人工智能技术迅猛发展的今天，内容创作正经历从"人工主导"向"人机协同"的深刻变革。传统小说创作往往面临灵感枯竭、结构混乱、节奏把控难等痛点，而现有AI写作工具多为单向输出，缺乏互动性与叙事张力。为打破这一局限，我们打造了一款轻量级、免登录的 AI小说创作平台，旨在通过前沿大模型能力赋能每一位故事创作者。

本项目深度融合 Trae Solo 的高效前端开发与任务调度能力，以及 GLM-4.6 在中文叙事、情节构建和风格一致性上的卓越表现，构建出"用户选剧情，AI写故事"的沉浸式创作闭环。用户只需输入一个故事开头，系统即刻生成三个风格各异的情节分支概览；选定其一后，AI将续写300--500字的高质量正文，并在此基础上持续衍生新分支，形成一棵动态生长的故事树。整个过程无需注册，API Key 通过本地存储安全保存，兼顾隐私与便捷。

平台采用新粗野主义（Neo-Brutalism）视觉风格，以白色为基底，搭配橙、绿、蓝、灰等高对比色块，强调操作反馈与信息层级，营造出兼具个性与流畅交互的创作体验。我们相信，AI不应替代创作者，而应成为激发想象力的伙伴------这款平台正是对"人机共创"未来的一次实践探索。

智谱大模型

智谱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
        }'

Trae Solo

过去几年，Prompt Engineering（提示词工程）风靡一时------人们通过精心雕琢输入文本，试图"引导"大模型输出理想结果。然而，随着 AI 应用日益深入复杂场景，仅靠静态、孤立的提示词已难以为继。

以智能客服为例：系统不仅要理解用户当前的提问，还需融合历史对话、用户身份、业务状态，甚至动态调用不同后端服务。此时，传统 Prompt Engineering 的局限性暴露无遗------它把 AI 调用当作一次性的"黑箱请求"，缺乏对整体交互脉络的把握。

正是在这样的背景下，Context Engineering（上下文工程）应运而生，而 Trae Solo 正是这一范式演进的先行者与核心推动者。Trae Solo 不满足于仅仅优化提示词，而是构建了一个结构化、可演化、可追溯的上下文空间------在正确的时间，为正确的模型，注入正确的上下文信息。它将 AI 交互从"单次问答"升级为"持续、智能、情境感知的对话流"，真正实现了从 Prompt Engineering 到 Context Engineering 的跃迁。

Trae Solo开发实践

开发提示词

准备好下方的开发提示词并输入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: 'POST',
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
  })
};
```

```mermaid
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）**：单栏布局，各模块垂直堆叠，优化触摸交互

* **交互优化**：支持触摸手势，按钮尺寸适配移动端，文字大小自适应

技术架构文档：

复制代码

# AI小说创作平台 - 技术架构文档

## 1. 架构设计

```mermaid
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 + 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": "故事开头：[用户输入的开头] \n选择的情节方向：[用户选择的分支] \n请基于以上内容生成详细的情节发展。"
    }
  ],
  "temperature": 0.7,
  "max_tokens": 800,
  "stream": false
}
```

### 4.2 本地存储API

**API Key管理**
```typescript
// 保存API Key
localStorage.setItem('glm_api_key', apiKey);

// 获取API Key
const apiKey = localStorage.getItem('glm_api_key');

// 删除API Key
localStorage.removeItem('glm_api_key');
```

**故事数据缓存**
```typescript
// 保存当前故事状态
localStorage.setItem('current_story', JSON.stringify(storyData));

// 获取故事状态
const storyData = JSON.parse(localStorage.getItem('current_story') || '{}');
```

## 5. 数据模型

### 5.1 数据模型定义

```mermaid
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类型定义

```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<{
    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 组件层次结构

```mermaid
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 核心组件说明

**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
// 故事状态Context
const StoryContext = createContext<{
  state: AppState;
  dispatch: Dispatch<StoryAction>;
}>({} as any);

// 配置状态Context
const ConfigContext = createContext<{
  apiKey: string | null;
  setApiKey: (key: string) => void;
  isConfigured: boolean;
}>({} as any);
```

### 7.2 状态更新流程

```mermaid
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进行调整。

Solo不仅会自动定义需要实现的要点和任务，也会初始化项目基础架构，包括下载依赖，配置环境这些，Solo统统给你打包完成，根本不需要自己操心：

Solo会严格按照自己指定的任务进行完成，如果我们再开发的过程中发现了Solo的方向不对，或者有需要补充的时候，可以直接打断Solo输入需求，因为Solo完全遵守上下文工程的理念的，不管从哪里开始，他都会项目目前各个信息整合之后进行开发，完全不用担心打断会对Solo的开发进度产生什么影响。

开发完毕之后可以再内置浏览其中进行操作测试

但是我在测试的过程中发现，应用在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在接收到修改需求之后，还是严格按照先定义任务列表，将大任务拆解成小任务一项一项的去完成任务这个理念：

并且Solo在修改的过程中还会进行自测，确保我们想要的功能给到我们的时候是准备无误的。

这时候我又发现，在AI调用的过程中的超时时间太短了，导致AI报错，那么我们就可以直接点击控制台中的日志报错，添加到对话中，并给出具体的需求，这样Solo就会帮我们针对性的解决报错问题。

如果页面中还有什么不满意的地方，也可以继续让Solo继续改正，比如我发现在生成文章分支的时候只是一味的转圈等待，并没有进度条显示，这样的话用户就会干等着，会让用户体验感下降，我们就可以跟Solo说让他加上动态效果的进度条，让用户知道我们后台正在持续不断的运行中~

部署展示

所有的功能都按照自己的想法开发完毕之后，就可以进入到部署阶段。在 Trae Solo 中，Vercel 被深度集成作为默认的前端部署与托管平台，极大简化了从开发到上线的全流程。开发者只需在 Trae Solo 项目中完成基础配置（如框架类型、构建命令等），即可通过内置的 "Deploy to Vercel" 一键发布功能，将 React、Next.js 等现代前端应用快速部署至全球 CDN 网络。Vercel 提供的自动 HTTPS、边缘函数支持、预览部署（Preview Deployments）以及环境变量管理，与 Trae Solo 的 AI 辅助开发理念高度契合------不仅加速了迭代速度，还确保了生产环境的稳定性与安全性。此外，Vercel 的无缝 Git 集成（支持 GitHub、GitLab 等）使得每次代码推送都能自动触发构建与部署，真正实现"写完即上线"。对于像 AI 小说创作平台这类轻量级、静态优先的应用，Vercel 的免费套餐已完全满足需求，是 Trae Solo 推荐的高效、可靠部署方案。Trae Solo