先聊聊为什么要把 AI 流程丢进 React + TypeScript 的锅里

说实话，AI 接口一旦涉及付费，光是安全和计费就Neng把你逼疯。

我之前玩儿个小项目，直接在前端硬写 fetch，结果 Key 全裸露，瞬间被爬虫刷爆。

于是乎，我决定把整个「请求‑流式‑扣费」链路搬到 React 前端，用 TypeScript 把每一步的参数dou给砍死。

哈哈，这种感觉像是给老房子装了防盗门，安心多了。

项目骨架：Vite 一键搞定，目录分层别乱搞

npm create vite@latest ai-app -- --template react-ts

目录结构我保持超简洁：

src/
  api/            // 所有网络请求
  components/    // UI 组件
  hooks/          // 自定义 hook，核心业务逻辑
  pages/          // 路由页面
  store/          // zustand 状态管理
  types/          // TS 类型定义

这样以后加支付、加配额，douNeng在对应层里改，不会把代码弄得七零八落。

用 TypeScript 把 AI 消息模型硬核化

先把对话的每条信息敲出类型：

export interface ChatMessage {
  role: 'user' | 'assistant' | 'system';
  content: string;
}
export interface ChatRequest {
  messages: ChatMessage;
}

不对不对，这里应该再加点可选字段，比如 temperature、max_tokens，后面会在后端统一管控。

自定义 Hook：useChatCompletion

这个 Hook 把「获取 token」‑「发起流式请求」‑「逐块geng新 UI」全包起来。

export function useChatCompletion {
  const  = useState;
  const  = useState;
  const abortRef = useRef;
  const sendMessage = useCallback(async (
    msgs: ChatMessage,
    onChunk:  => void,
    onDone:  => void,
    retry = 0
  ) => {
    if  return;
    setIsLoading;
    setError;
    const controller = new AbortController;
    abortRef.current = controller;
    try {
      for await ) {
        onChunk;
      }
      onDone;
    } catch  {
      if  {
        setError;
        // 自动重试一次Zui多两次
        if ) {
          sendMessage;
        }
      }
    } finally {
      setIsLoading;
      abortRef.current = null;
    }
  }, );
  const stop = useCallback => abortRef.current?.abort, );
  return { sendMessage, stop, isLoading, error };
}

流式请求到底怎么写？fetch + ReadableStream 才是王道

别傻傻用 EventSource，那玩意只Neng GET，还得把 token 暴露在 URL 上。

async function* streamChatCompletion(
  msgs: ChatMessage,
  signal?: AbortSignal
): AsyncGenerator {
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 
      'Content-Type': 'application/json',
      Authorization: `Bearer ${await getAccessToken}`
    },
    body: JSON.stringify,
    signal,
  });
  if  {
    const err = await res.json.catch => );
    throw new Error;
  }
  const reader = res.body?.getReader;
  if  throw new Error;
  const dec = new TextDecoder;
  let buf = '';
   while  {
     const { done, value } = await reader.read;
     if  break;
     buf += dec.decode;
     const lines = buf.split;
     buf = lines.pop || '';
     for  {
       if ) yield line;
     }
   }
   if ) yield buf;
}

计费与配额：前端先乐观扣，再让后端收回

用户点击「生成」前，我先检查 quota：

if  {
   setShowPurchase;
   return;
}
decrementQuota; // 乐观扣一次
sendMessage;

Ru果请求Zui终失败，我再调用 incrementQuota 把额度补回来。后端则在真正完成一次完整生成后才正式扣费，并返回Zui新的剩余次数。

为什么百度不收录？——来聊聊 SEO 小坑

说实话，我的这套 SPA 用 Vite 打包后默认是 hash 路由，搜索引擎爬虫抓不到真实内容。

解决办法就是加上 SSR 或者 prerender，让关键页面在服务器渲染出 HTML。还有一点别忘了在每个页面的 加上 和合适的