使用指南

用 Claude 开发 Web 原型：React、FastAPI 与受控 API 接入

从模拟写作助手开始验证输入和错误状态，再分阶段接入 Claude API；原型不直接等于生产应用。

原发表：2026-03-28修订：2026-10-04编辑说明

先写出一页可验收需求

原创原型是一页写作助手：输入一段公开文本，点击生成，显示草稿、加载和错误状态。先不加账号、数据库、支付或自动发布。验收条件包括空输入被拦截、重复提交被禁用、失败能恢复、草稿不会直接发送出去。

让 Claude 按需求、接口约定、最小后端、最小前端、测试的顺序工作，每步查看差异。下面示例使用模拟结果，目的是检查数据流，不能称为真正调用模型的 AI 应用。

FastAPI 模拟后端

下面的 Python 示例限制文本长度，并拒绝全空白输入。它不调用 Claude，不保存用户内容。代码经过本地语法检查，没有启动网络服务器；需要自行准备 FastAPI、Pydantic 等匹配依赖。

python · 示例

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field

app = FastAPI()

class DraftInput(BaseModel):
    text: str = Field(min_length=1, max_length=2000)

@app.post("/api/draft")
def draft(body: DraftInput):
    text = body.text.strip()
    if not text:
        raise HTTPException(status_code=422, detail="请输入非空文本")
    return {"draft": "[模拟草稿] " + text, "demo": True}

离线原型后端，未调用 Claude API。

React 的最小交互

以下组件使用 createElement，避免示例依赖 JSX 转译细节。前后端需通过同源路由或开发代理连接；相对路径不会自动找到另一个端口。JavaScript 已做语法检查，未进行浏览器联调。

javascript · 示例

import { createElement as h, useState } from "react";
export default function DraftDemo() {
  const [text, setText] = useState("");
  const [output, setOutput] = useState("");
  const [busy, setBusy] = useState(false);
  async function submit() {
    if (busy || !text.trim()) return;
    setBusy(true); setOutput("");
    try {
      const response = await fetch("/api/draft", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text })
      });
      if (!response.ok) throw new Error(`请求失败：${response.status}`);
      const data = await response.json();
      setOutput(data.draft);
    } catch (error) { setOutput(error.message); }
    finally { setBusy(false); }
  }
  return h("main", null,
    h("label", null, "公开文本", h("textarea", { value: text, maxLength: 2000,
      onChange: event => setText(event.target.value) })),
    h("button", { disabled: busy || !text.trim(), onClick: submit }, busy ? "生成中" : "生成模拟草稿"),
    h("pre", { "aria-live": "polite" }, output));
}

只展示文本，未把模型输出作为 HTML 执行。

何时接入真实 API，何时部署

交接原型时，附上接口约定、模拟数据说明、启动环境和未实现清单。审阅者应能区分“按钮已经能点击”与“请求被真实服务接受”，也应知道哪些错误状态只通过模拟验证；这种明确标注比在演示中隐藏失败更有价值。

通过模拟测试后，才在服务端用官方 SDK 替换生成步骤：校验输入 → 检查用户授权和预算 → 发送 Messages 请求 → 检查结束原因 → 提取文本 → 返回草稿。密钥不能进入 React 打包文件。加入认证、限流、超时、取消、日志脱敏和输出安全处理后，再评估公开访问。

测试超长输入、断网、重复点击、服务失败和空输出，打开移动视口检查可读性。部署前核对平台计费、环境变量和数据存储规则；本文不承诺任何托管商永久免费，也没有部署、连接生产数据或运行付费请求。

参考来源

资料核对日期：2026-10-04。涉及产品与账户条件时，请以当前官方说明为准。