企业官网建设流程全解析

1. 前端转 AI 前端，一周冲刺到底在冲什么

2026 年的金九银十，前端面试已经不太问“手写 Promise”了。面试官更可能直接甩一句：浏览器端怎么调大模型 API？SSE 流式输出怎么处理粘包？RAG 检索在前端怎么落地？MCP 工具调用你写过 Server 吗？这些问题背后其实指向同一个能力——你能不能把大模型能力接进一个真实可跑的前端项目里。

我试过用一周时间把这条链路串起来，核心思路不是从头啃 Transformer 原理，而是用 TypeScript 做底座，把 SSE 流式输出、RAG 检索增强、MCP 工具调用这三块拼成一个能写进简历的 AI 前端项目。多模型调用最烦的是 Key 和通道管理，这里用 TaoToken 统一收口，一个 Key 走多个模型，省掉到处注册和切换的麻烦。

这篇按“一周冲刺路径”来写：先讲清楚要产出什么，再给可复制的配置骨架，然后是 CC Switch / Cline 接入步骤，最后是 SSE 与 RAG 链路的本地验证动作和排障。目标很明确——一周后你手里有一个能演示、能讲清楚、能扛住面试追问的 AI 前端项目。

适合谁：有 TypeScript 基础、写过 React/Vue、想转 AI 前端但不知道从哪下手的前端。不适合完全没写过前端的人，因为下面很多配置需要你自己动手改。

2. TaoToken 前置：统一 Key 与 API 通道

2.1 为什么需要统一 Key

做 AI 前端项目，最开始的坑往往不是代码，而是 Key 管理。你可能会同时用到 Claude、GPT、Gemini 等不同模型，每个平台一套 Key、一套计费、一套限流。项目里如果硬编码多个 Key，换模型就要改代码，演示时还容易暴露密钥。

TaoToken 的思路是提供一个统一的 API 通道，你用同一个 Key 就能调用多个模型。对前端项目来说，这意味着你的请求层只需要维护一套鉴权逻辑，模型切换通过参数完成，而不是改环境变量。

官网入口在这里：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api ，注意 API 地址不带 UTM 参数。

2.2 拿 Key 与验证通道

进入控制台创建 API Key，建议按项目分 Key，比如ai-frontend-demo一个、rag-test一个，方便排查问题时定位是哪个项目超限。创建后先别急着写代码，用 curl 验证通道是否通：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $TAOTOKEN_API_KEY" \ -d '{ "model": "claude-sonnet-4-20250514", "messages": [{"role": "user", "content": "用一句话解释什么是 SSE"}], "stream": false }'

如果返回正常 JSON，说明 Key 和通道都没问题。这一步很重要，因为后面 SSE 调试时如果一直没输出，你至少能确定不是 Key 的问题。

注意：不要把 Key 写进前端代码里提交到 Git。前端项目里用环境变量或本地配置文件，生产环境走服务端代理。

3. 可复制配置：settings.json 与 config.toml 骨架

3.1 Claude Code 的 settings.json

如果你用 Claude Code 做日常编码，可以在项目根目录建.claude/settings.json，把模型通道指向 TaoToken：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "你的_TAOTOKEN_API_KEY", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" }, "permissions": { "allow": [ "Read", "Write", "Bash(npm run *)", "Bash(git status)" ] } }

这个配置的作用是让 Claude Code 走统一通道，同时限制它能执行的命令范围。permissions.allow里我建议只放你确定安全的命令，比如npm run和git status，不要一上来就放开所有 Bash。

3.2 Cline 的 config.toml 骨架

Cline 是 VS Code 里的 AI 编码插件，配置方式不太一样。在项目根目录建.cline/config.toml：

[provider] name = "taotoken" base_url = "https://taotoken.net/api" api_key = "你的_TAOTOKEN_API_KEY" [model] default = "claude-sonnet-4-20250514" fallback = "gpt-4o" [request] timeout_ms = 60000 max_retries = 2 stream = true [features] auto_approve_read = true auto_approve_write = false

这里stream = true是关键，Cline 的很多交互依赖流式返回。auto_approve_write = false是安全考虑，让 AI 改文件前先给你确认。

3.3 前端项目里的请求层封装

配置只是通道，真正写进简历的是你的请求层。用 TypeScript 封装一个统一的调用函数：

// src/lib/ai-client.ts export interface ChatMessage { role: 'system' | 'user' | 'assistant'; content: string; } export interface ChatOptions { model?: string; stream?: boolean; signal?: AbortSignal; } const BASE_URL = import.meta.env.VITE_TAOTOKEN_BASE_URL; const API_KEY = import.meta.env.VITE_TAOTOKEN_API_KEY; export async function chat( messages: ChatMessage[], options: ChatOptions = {} ): Promise<Response> { const { model = 'claude-sonnet-4-20250514', stream = true, signal } = options; const res = await fetch(`${BASE_URL}/v1/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${API_KEY}`, }, body: JSON.stringify({ model, messages, stream }), signal, }); if (!res.ok) { throw new Error(`AI request failed: ${res.status} ${res.statusText}`); } return res; }

这个函数返回原始Response，把流式解析留给上层，这样 SSE 和普通请求可以复用同一个入口。

4. SSE 流式输出：从粘包到 AbortController

4.1 SSE 解析的核心问题

大模型流式返回不是一条完整消息，而是一堆 chunk。每个 chunk 可能是半截 JSON，前端要自己维护 buffer，按分隔符拼接。常见格式是data: {...}\n\n，遇到[DONE]结束。

// src/lib/sse-parser.ts export async function* parseSSE( response: Response ): AsyncGenerator<string, void, unknown> { const reader = response.body?.getReader(); if (!reader) throw new Error('Response body is not readable'); const decoder = new TextDecoder('utf-8'); let buffer = ''; try { while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop() ?? ''; for (const line of lines) { const trimmed = line.trim(); if (!trimmed || !trimmed.startsWith('data:')) continue; const data = trimmed.slice(5).trim(); if (data === '[DONE]') return; try { const parsed = JSON.parse(data); const content = parsed.choices?.[0]?.delta?.content; if (content) yield content; } catch { // 半截 JSON，留在 buffer 里等下一个 chunk buffer = line + '\n' + buffer; } } } } finally { reader.releaseLock(); } }

这里有个细节：buffer = lines.pop() ?? ''把最后一行留在 buffer，因为它可能是半截的。如果 JSON.parse 失败，也要把当前行塞回 buffer，等下一个 chunk 补齐。

4.2 AbortController 中断生成

用户点“停止生成”时，不能只停 UI，还要中断请求并清理状态：

// src/hooks/useChatStream.ts import { useRef, useState, useCallback } from 'react'; import { chat, type ChatMessage } from '../lib/ai-client'; import { parseSSE } from '../lib/sse-parser'; export function useChatStream() { const [output, setOutput] = useState(''); const [loading, setLoading] = useState(false); const abortRef = useRef<AbortController | null>(null); const send = useCallback(async (messages: ChatMessage[]) => { abortRef.current?.abort(); const controller = new AbortController(); abortRef.current = controller; setOutput(''); setLoading(true); try { const res = await chat(messages, { signal: controller.signal }); for await (const chunk of parseSSE(res)) { setOutput((prev) => prev + chunk); } } catch (err) { if ((err as Error).name !== 'AbortError') { console.error('Stream error:', err); } } finally { setLoading(false); abortRef.current = null; } }, []); const stop = useCallback(() => { abortRef.current?.abort(); abortRef.current = null; setLoading(false); }, []); return { output, loading, send, stop }; }

AbortController中断后，reader.read()会抛AbortError，这里要单独判断，不要当成真实错误上报。

4.3 本地验证动作

写完后先别接 UI，用 Node 脚本验证解析逻辑：

npx tsx scripts/test-sse.ts

// scripts/test-sse.ts import { chat } from '../src/lib/ai-client'; import { parseSSE } from '../src/lib/sse-parser'; async function main() { const res = await chat([ { role: 'user', content: '用三句话解释 SSE 和 WebSocket 的区别' }, ]); let full = ''; for await (const chunk of parseSSE(res)) { full += chunk; process.stdout.write(chunk); } console.log('\n--- 总长度:', full.length); } main().catch(console.error);

如果能看到逐字输出，说明 SSE 链路通了。这一步跑通再写 React 组件，能省掉大量调试时间。

5. RAG 检索增强：前端本地向量匹配

5.1 轻量级 RAG 的定位

面试里问 RAG，不一定要你搭一套完整向量数据库。前端场景下，轻量级方案是用 Transformers.js 在浏览器里算 embedding，存到 IndexedDB，检索时做余弦相似度匹配。适合文档量不大、对隐私要求高的场景。

// src/lib/rag.ts import { pipeline } from '@xenova/transformers'; let embedder: Awaited<ReturnType<typeof pipeline>> | null = null; async function getEmbedder() { if (!embedder) { embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2'); } return embedder; } export async function embed(text: string): Promise<number[]> { const model = await getEmbedder(); const output = await model(text, { pooling: 'mean', normalize: true }); return Array.from(output.data as Float32Array); } export function cosineSimilarity(a: number[], b: number[]): number { let dot = 0; let normA = 0; let normB = 0; for (let i = 0; i < a.length; i++) { dot += a[i] * b[i]; normA += a[i] * a[i]; normB += b[i] * b[i]; } return dot / (Math.sqrt(normA) * Math.sqrt(normB)); }

5.2 检索与拼接

把文档切片、算 embedding、存 IndexedDB，检索时取 top-k 拼进 prompt：

// src/lib/retriever.ts import { embed, cosineSimilarity } from './rag'; export interface DocChunk { id: string; text: string; vector: number[]; } export async function buildIndex(chunks: string[]): Promise<DocChunk[]> { const result: DocChunk[] = []; for (let i = 0; i < chunks.length; i++) { result.push({ id: `chunk-${i}`, text: chunks[i], vector: await embed(chunks[i]), }); } return result; } export async function retrieve( query: string, index: DocChunk[], topK = 3 ): Promise<DocChunk[]> { const queryVec = await embed(query); return index .map((chunk) => ({ chunk, score: cosineSimilarity(queryVec, chunk.vector), })) .sort((a, b) => b.score - a.score) .slice(0, topK) .map((item) => item.chunk); }

5.3 本地验证动作

用一个简单脚本验证检索效果：

// scripts/test-rag.ts import { buildIndex, retrieve } from '../src/lib/retriever'; const docs = [ 'SSE 是基于 HTTP 的单向流式传输协议，适合大模型逐字输出。', 'WebSocket 是双向通信，适合聊天室和实时协作。', 'RAG 是检索增强生成，先检索相关文档再让模型回答。', 'MCP 是模型上下文协议，让模型安全调用外部工具。', ]; async function main() { const index = await buildIndex(docs); const results = await retrieve('前端怎么处理流式输出', index); console.log('检索结果:', results.map((r) => r.text)); } main().catch(console.error);

如果检索结果里 SSE 那条排第一，说明向量匹配逻辑没问题。这一步跑通后，把retrieve的结果拼进chat的 messages 里，就是一个最小可用的 RAG 链路。

6. MCP 工具调用：前端视角的理解与接入

6.1 MCP 是什么，前端为什么要懂

MCP 可以理解成 AI 时代的 RPC：模型不直接执行代码，而是通过标准协议调用外部工具。前端面试里问 MCP，通常不是让你写一个完整 Server，而是考你知不知道它解决什么问题、和 Function Call 有什么区别。

Function Call 是模型厂商各自的实现，MCP 是跨厂商的标准。一个 MCP Server 可以暴露多个工具，模型通过tools/list发现工具，通过tools/call调用。前端项目里，你可以把“查天气”“查数据库”“发邮件”这些能力封装成 MCP 工具，让模型按需调用。

6.2 最小 MCP Server 骨架

用 TypeScript 写一个最小 Server，暴露一个“查当前时间”的工具：

// mcp-server/index.ts import { Server } from '@modelcontextprotocol/sdk/server/index.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'; const server = new Server( { name: 'demo-server', version: '1.0.0' }, { capabilities: { tools: {} } } ); server.setRequestHandler('tools/list', async () => ({ tools: [ { name: 'get_current_time', description: '获取当前时间', inputSchema: { type: 'object', properties: {} }, }, ], })); server.setRequestHandler('tools/call', async (request) => { if (request.params.name === 'get_current_time') { return { content: [{ type: 'text', text: new Date().toISOString() }], }; } throw new Error(`Unknown tool: ${request.params.name}`); }); const transport = new StdioServerTransport(); await server.connect(transport);

这个 Server 通过 stdio 通信，Claude Code 或 Cline 可以直接把它挂上去。

6.3 在 Cline 里挂载 MCP Server

在.cline/config.toml里加一段：

[mcp_servers.demo] command = "npx" args = ["tsx", "mcp-server/index.ts"]

重启 Cline 后，模型就能发现get_current_time这个工具。你可以问它“现在几点”，它会调用工具而不是瞎编。

6.4 本地验证动作

单独跑一下 Server，确认能启动：

npx tsx mcp-server/index.ts

如果没有报错、进程保持运行，说明 Server 骨架没问题。然后用 Cline 发一条需要工具调用的消息，看它是否触发tools/call。这一步能跑通，面试时你就可以说“我写过 MCP Server 并接入了编码工具”。

7. 本篇常见错排查

7.1 SSE 一直没输出

先确认stream: true传了，再确认Content-Type是application/json。如果 curl 能返回但前端不行，大概率是 CORS 或代理问题。本地开发时可以在 Vite 里配 proxy：

// vite.config.ts export default defineConfig({ server: { proxy: { '/api': { target: 'https://taotoken.net', changeOrigin: true, }, }, }, });

然后把BASE_URL改成/api，避免浏览器直接跨域。

7.2 JSON.parse 频繁失败

检查 buffer 拼接逻辑。常见错误是buffer = lines.pop()之后没有把失败的行塞回去。另外注意decoder.decode(value, { stream: true })的stream: true不能省，否则多字节字符会被截断。

7.3 RAG 检索结果不相关

先确认 embedding 模型加载成功，再检查文档切片粒度。切片太长会导致语义稀释，太短会丢上下文。一般 200-500 字一段比较合适。如果还是不行，打印 query 和 chunk 的相似度分数，看看是不是归一化没做。

7.4 MCP Server 启动失败

检查@modelcontextprotocol/sdk版本，不同版本 API 有差异。另外 stdio 模式下不要往 stdout 打日志，会污染协议数据。要调试就写文件或 stderr。

7.5 Key 泄露风险

前端项目里绝对不要把 Key 写进代码。用.env.local并在.gitignore里排除。生产环境走服务端代理，前端只调自己的后端。TaoToken 的 Key 也一样，按项目分 Key，泄露了直接吊销重发。

8. 一周冲刺路径与面试话术

一周怎么排：第 1-2 天把 TaoToken 通道和请求层跑通，第 3 天搞定 SSE 解析和 AbortController，第 4 天做 RAG 本地检索，第 5 天写 MCP Server 并接入 Cline，第 6 天把三块拼成一个完整 demo，第 7 天整理简历描述和面试话术。

简历上可以这样写：基于 TypeScript 构建 AI 前端项目，统一 Key 管理多模型调用，实现 SSE 流式输出与中断控制，集成 RAG 本地检索增强，开发 MCP Server 支持工具调用。面试时重点讲“为什么用 SSE 而不是 WebSocket”“RAG 检索怎么保证相关性”“MCP 和 Function Call 的区别”，这些都能从上面的代码里找到答案。

需要长期跑编码和 Agent 任务的，可以看 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。验证模型效果用模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。接入排障看文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。Key 管理在 API Keys：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。

最后说个实际经验：面试官问 AI 前端问题时，最想听的不是你背了多少概念，而是你踩过什么坑、怎么解决的。比如 SSE 粘包怎么处理、AbortController 中断后状态怎么清理、RAG 检索不准怎么调。这些细节比“我了解 RAG”有说服力得多。