Claude Code前端实战：从零构建高可维护性AI应用界面

1次阅读

共计 3204 个字符，预计需要花费 9 分钟才能阅读完成。

构建 AI 应用前端界面时，开发者常面临三个典型挑战：异步状态管理的复杂度随对话轮次增加呈指数级增长，流式响应 (streaming response) 处理需要特殊的分块渲染逻辑，以及 API 调用与 UI 组件的高度耦合导致代码难以维护。本文将基于 Claude Code 技术栈，通过模块化设计解决这些问题。

通过自定义 Hook 封装 API 调用逻辑，可以实现业务代码与接口调用的解耦。以下是 TypeScript 实现示例：

/**
 * Claude API 调用 Hook
 * @param initialPrompt 初始化提示词
 * @param options 配置项
 */
function useClaudeAPI(initialPrompt: string, options?: {
  temperature?: number;
  maxTokens?: number;
}) {const [response, setResponse] = useState('');
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchClaudeResponse = useCallback(async (input: string) => {setIsLoading(true);
    try {
      const res = await fetch('/api/claude', {
        method: 'POST',
        body: JSON.stringify({ 
          prompt: input,
          ...options 
        })
      });

      if (!res.ok) throw new Error(res.statusText);

      const reader = res.body?.getReader();
      if (!reader) return;

      let result = '';
      while (true) {const { done, value} = await reader.read();
        if (done) break;
        result += new TextDecoder().decode(value);
        setResponse(result); // 流式更新
      }
    } catch (err) {setError(err as Error);
    } finally {setIsLoading(false);
    }
  }, [options]);

  return {response, error, isLoading, fetchClaudeResponse};
}

注意：
– 使用 TextDecoder 处理 SSE(Server-Sent Events)流式响应
– 错误处理需要覆盖网络错误和 API 返回错误

对于对话历史管理，Zustand 相比 Redux 有显著优势：

维度	Redux	Zustand
代码量	需要定义 action/reducer	直接修改状态
异步处理	需要中间件	内置支持
性能	较慢（依赖 context）	更快（直接订阅）
包大小	较大（7.2kB）	极小（1.1kB）

Zustand 实现示例：

import {create} from 'zustand';

type Message = {
  id: string;
  content: string;
  role: 'user' | 'assistant';
};

type ChatState = {messages: Message[];
  addMessage: (msg: Message) => void;
  clearMessages: () => void;};

const useChatStore = create<ChatState>((set) => ({messages: [],
  addMessage: (msg) => 
    set((state) => ({messages: [...state.messages, msg] })),
  clearMessages: () => set({ messages: [] }),
}));

处理流式响应需要特殊的 UI 更新策略：

使用 useEffect 监听响应变化
通过 requestAnimationFrame 优化渲染频次
实现打字机效果提升用户体验

function StreamingResponse({text}: {text: string}) {const [displayText, setDisplayText] = useState('');

  useEffect(() => {if (text.length <= displayText.length) return;

    let frameId: number;
    let i = displayText.length;

    const animate = () => {if (i < text.length) {setDisplayText(text.substring(0, i + 1));
        i++;
        frameId = requestAnimationFrame(animate);
      }
    };

    frameId = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(frameId);
  }, [text]);

  return <div className="response-text">{displayText}</div>;
}

使用 React Profiler 记录组件更新时间（测试环境：M1 Macbook Pro 16GB，Chrome 112）：

初始渲染：12.4ms
流式更新平均耗时：1.2ms/ 次
完整对话历史渲染：18.7ms（50 条消息）

const debouncedFetch = useMemo(() => debounce(fetchClaudeResponse, 500), 
  [fetchClaudeResponse]
);

// 实际调用次数减少 60%-70%

const filterSensitiveInfo = (text: string) => {
  const patterns = [/\b\d{4}[-]?\d{4}[-]?\d{4}[-]?\d{4}\b/g, // 信用卡号
    /\b\d{3}-?\d{2}-?\d{4}\b/g, // SSN
    /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g // 邮箱
  ];

  return patterns.reduce((str, pattern) => 
    str.replace(pattern, '[REDACTED]'), text);
};

import DOMPurify from 'dompurify';

const safeHTML = (dirty: string) => ({
  __html: DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'br'],
    FORBID_ATTR: ['style', 'onerror']
  })
});

// 使用方式
<div dangerouslySetInnerHTML={safeHTML(userInput)} />