前端开发者做大模型应用开发 - 完整技能图谱

// 1. OpenAI官方SDK（最常用）
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
  dangerouslyAllowBrowser: true // 仅开发用，生产环境要走后端
});

async function chat(message: string) {
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: message }],
    stream: true, // 流式返回，用户体验更好
  });

  for await (const chunk of response) {
    const text = chunk.choices[0]?.delta?.content || '';
    console.log(text); // 逐字显示
  }
}

// 前端代码 - 调用你自己的后端API
async function chatWithAI(message: string) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message }),
  });

  const reader = response.body?.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;

    const text = decoder.decode(value);
    // 更新UI显示
    appendToChat(text);
  }
}

// React组件示例
function ChatBox() {
  const [messages, setMessages] = useState<string[]>([]);
  const [currentResponse, setCurrentResponse] = useState('');

  async function sendMessage(text: string) {
    setCurrentResponse(''); // 清空上次的响应

    const eventSource = new EventSource(
      `/api/chat-stream?message=${encodeURIComponent(text)}`
    );

    eventSource.onmessage = (event) => {
      const chunk = event.data;
      setCurrentResponse(prev => prev + chunk); // 逐字累加
    };

    eventSource.onerror = () => {
      eventSource.close();
      setMessages(prev => [...prev, currentResponse]);
      setCurrentResponse('');
    };
  }

  return (
    <div>
      {messages.map((msg, i) => <p key={i}>{msg}</p>)}
      {currentResponse && <p className="typing">{currentResponse}</p>}
    </div>
  );
}

async function streamChat(message: string) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message }),
  });

  const reader = response.body!.getReader();
  const decoder = new TextDecoder();

  let fullText = '';

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value, { stream: true });
    fullText += chunk;

    // 实时更新UI
    updateChatDisplay(fullText);
  }
}

const ws = new WebSocket('ws://localhost:3000/chat');

ws.onopen = () => {
  ws.send(JSON.stringify({ message: 'Hello AI' }));
};

ws.onmessage = (event) => {
  const chunk = JSON.parse(event.data);
  appendText(chunk.text);
};

function useTypewriter(text: string, speed = 30) {
  const [displayText, setDisplayText] = useState('');

  useEffect(() => {
    let i = 0;
    const timer = setInterval(() => {
      if (i < text.length) {
        setDisplayText(text.slice(0, i + 1));
        i++;
      } else {
        clearInterval(timer);
      }
    }, speed);

    return () => clearInterval(timer);
  }, [text, speed]);

  return displayText;
}

// 使用
function AIResponse({ text }: { text: string }) {
  const displayed = useTypewriter(text);
  return <div>{displayed}<span className="cursor">|</span></div>;
}

function StreamingText({ stream }: { stream: AsyncIterable<string> }) {
  const [text, setText] = useState('');

  useEffect(() => {
    (async () => {
      for await (const chunk of stream) {
        setText(prev => prev + chunk);
        // 自动滚动到底部
        scrollToBottom();
      }
    })();
  }, [stream]);

  return <div className="markdown-body">{text}</div>;
}

npm install react-markdown remark-gfm rehype-highlight

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import 'highlight.js/styles/github-dark.css';

function AIMessage({ content }: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]} // 支持表格、删除线等
      rehypePlugins={[rehypeHighlight]} // 代码高亮
      components={{
        // 自定义代码块样式
        code({ node, inline, className, children, ...props }) {
          if (inline) {
            return <code className="inline-code">{children}</code>;
          }
          return (
            <div className="code-block">
              <button onClick={() => copyCode(children)}>复制</button>
              <code className={className} {...props}>
                {children}
              </code>
            </div>
          );
        },
        // 自定义链接在新窗口打开
        a({ href, children }) {
          return <a href={href} target="_blank" rel="noopener">{children}</a>;
        },
      }}
    >
      {content}
    </ReactMarkdown>
  );
}

interface Message {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: number;
  tokens?: number; // 可选：记录消耗的token
}

interface Conversation {
  id: string;
  title: string; // 对话标题（通常用第一句话生成）
  messages: Message[];
  createdAt: number;
  updatedAt: number;
}

import create from 'zustand';
import { persist } from 'zustand/middleware';

interface ChatStore {
  conversations: Conversation[];
  currentConvId: string | null;

  // 创建新对话
  createConversation: () => string;

  // 添加消息
  addMessage: (convId: string, message: Omit<Message, 'id' | 'timestamp'>) => void;

  // 删除对话
  deleteConversation: (convId: string) => void;

  // 切换对话
  setCurrentConversation: (convId: string) => void;
}

export const useChatStore = create<ChatStore>()(
  persist(
    (set, get) => ({
      conversations: [],
      currentConvId: null,

      createConversation: () => {
        const id = crypto.randomUUID();
        const newConv: Conversation = {
          id,
          title: '新对话',
          messages: [],
          createdAt: Date.now(),
          updatedAt: Date.now(),
        };
        set(state => ({
          conversations: [newConv, ...state.conversations],
          currentConvId: id,
        }));
        return id;
      },

      addMessage: (convId, message) => {
        const fullMessage: Message = {
          ...message,
          id: crypto.randomUUID(),
          timestamp: Date.now(),
        };

        set(state => ({
          conversations: state.conversations.map(conv =>
            conv.id === convId
              ? {
                  ...conv,
                  messages: [...conv.messages, fullMessage],
                  updatedAt: Date.now(),
                  // 如果是第一条消息，用它作为标题
                  title: conv.messages.length === 0
                    ? message.content.slice(0, 30)
                    : conv.title,
                }
              : conv
          ),
        }));
      },

      deleteConversation: (convId) => {
        set(state => ({
          conversations: state.conversations.filter(c => c.id !== convId),
          currentConvId: state.currentConvId === convId
            ? state.conversations[0]?.id || null
            : state.currentConvId,
        }));
      },

      setCurrentConversation: (convId) => {
        set({ currentConvId: convId });
      },
    }),
    {
      name: 'chat-storage', // localStorage key
    }
  )
);

function ChatInterface() {
  const {
    conversations,
    currentConvId,
    addMessage,
    createConversation
  } = useChatStore();

  const currentConv = conversations.find(c => c.id === currentConvId);

  async function handleSend(text: string) {
    // 1. 添加用户消息
    addMessage(currentConvId!, { role: 'user', content: text });

    // 2. 调用AI
    const response = await chatWithAI(text);

    // 3. 添加AI回复
    addMessage(currentConvId!, { role: 'assistant', content: response });
  }

  return (
    <div className="chat-container">
      <MessageList messages={currentConv?.messages || []} />
      <InputBox onSend={handleSend} />
    </div>
  );
}

// app/api/chat/route.ts
import { OpenAI } from 'openai';
import { StreamingTextResponse, OpenAIStream } from 'ai';

export const runtime = 'edge'; // 边缘运行时，更快

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  // 调用OpenAI
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages,
    stream: true,
  });

  // 转换为前端可读的流
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

import { useChat } from 'ai/react';

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">发送</button>
      </form>
    </div>
  );
}

interface PromptTemplate {
  system: string;
  examples?: Array<{ user: string; assistant: string }>;
  userMessage: string;
}

function buildPrompt(template: PromptTemplate): Message[] {
  const messages: Message[] = [
    { role: 'system', content: template.system },
  ];

  // 添加Few-shot示例
  if (template.examples) {
    template.examples.forEach(ex => {
      messages.push(
        { role: 'user', content: ex.user },
        { role: 'assistant', content: ex.assistant }
      );
    });
  }

  // 添加实际用户消息
  messages.push({ role: 'user', content: template.userMessage });

  return messages;
}

// 使用
const codeReviewPrompt: PromptTemplate = {
  system: `你是一个专业的代码审查专家。
分析代码时要关注：
1. 潜在的bug
2. 性能问题
3. 代码风格
4. 最佳实践

用中文回答，格式清晰。`,

  examples: [
    {
      user: 'const arr = [1,2,3]; for(let i=0; i<=arr.length; i++) console.log(arr[i]);',
      assistant: '发现问题：\n1. 边界错误：i<=arr.length 会导致访问undefined\n应改为：i<arr.length',
    },
  ],

  userMessage: userCode,
};

const messages = buildPrompt(codeReviewPrompt);

// 场景1：代码生成
const codeGenPrompt = `请生成一个React组件，要求：
- 使用TypeScript
- 使用Tailwind CSS
- 支持暗黑模式
- 添加完整的TypeScript类型定义

组件需求：${userRequirement}

返回格式：只返回代码，不要解释。`;

// 场景2：文档总结
const summaryPrompt = `请总结以下文档的核心内容，要求：
- 3-5个要点
- 每个要点一句话
- 用中文

文档内容：
${document}`;

// 场景3：数据提取（返回JSON）
const extractPrompt = `从以下文本中提取信息，以JSON格式返回。

期望格式：
{
  "name": "姓名",
  "email": "邮箱",
  "phone": "电话"
}

文本：${text}

只返回JSON，不要其他内容。`;

async function callAIWithRetry(
  message: string,
  maxRetries = 3
): Promise<string> {
  let lastError: Error | null = null;

  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        body: JSON.stringify({ message }),
        signal: AbortSignal.timeout(30000), // 30秒超时
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      return await response.text();

    } catch (error) {
      lastError = error as Error;

      // 区分不同错误类型
      if (error.name === 'AbortError') {
        console.log(`请求超时，重试 ${i + 1}/${maxRetries}`);
      } else if (error.message.includes('429')) {
        console.log('Rate limit，等待5秒后重试');
        await sleep(5000);
      } else if (error.message.includes('500')) {
        console.log('服务器错误，重试');
        await sleep(1000 * (i + 1)); // 指数退避
      } else {
        throw error; // 其他错误直接抛出
      }
    }
  }

  throw new Error(`请求失败，已重试${maxRetries}次: ${lastError?.message}`);
}

function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

npm install gpt-tokenizer

import { encode } from 'gpt-tokenizer';

function estimateTokens(text: string): number {
  return encode(text).length;
}

function estimateCost(tokens: number, model: string): number {
  const pricing = {
    'gpt-4': { input: 0.03 / 1000, output: 0.06 / 1000 },
    'gpt-3.5-turbo': { input: 0.0015 / 1000, output: 0.002 / 1000 },
  };

  const price = pricing[model];
  return tokens * price.input; // 简化计算
}

// 在发送前提示用户
function InputBox() {
  const [text, setText] = useState('');
  const tokens = estimateTokens(text);
  const cost = estimateCost(tokens, 'gpt-4');

  return (
    <div>
      <textarea value={text} onChange={e => setText(e.target.value)} />
      <div className="stats">
        大约 {tokens} tokens，预计花费 ${cost.toFixed(4)}
      </div>
    </div>
  );
}

// 前端 - 让用户输入自己的API Key
function Settings() {
  const [apiKey, setApiKey] = useState(
    localStorage.getItem('openai_key') || ''
  );

  function saveKey() {
    localStorage.setItem('openai_key', apiKey);
  }

  return (
    <div>
      <input
        type="password"
        value={apiKey}
        onChange={e => setApiKey(e.target.value)}
        placeholder="输入你的OpenAI API Key"
      />
      <button onClick={saveKey}>保存</button>
    </div>
  );
}

// 调用时带上Key
async function chat(message: string) {
  const apiKey = localStorage.getItem('openai_key');
  const response = await fetch('/api/chat', {
    headers: {
      'X-API-Key': apiKey,
    },
    body: JSON.stringify({ message }),
  });
}

// 1. 文件上传
function DocumentUpload() {
  async function handleUpload(file: File) {
    const formData = new FormData();
    formData.append('file', file);

    await fetch('/api/documents/upload', {
      method: 'POST',
      body: formData,
    });

    alert('文档已上传，正在处理...');
  }

  return <input type="file" onChange={e => handleUpload(e.target.files[0])} />;
}

// 2. 显示引用来源
interface Source {
  content: string;
  filename: string;
  page?: number;
}

function AnswerWithSources({ answer, sources }: {
  answer: string;
  sources: Source[]
}) {
  return (
    <div>
      <div className="answer">{answer}</div>

      <div className="sources">
        <h4>来源：</h4>
        {sources.map((src, i) => (
          <div key={i} className="source-card">
            <strong>{src.filename}</strong>
            {src.page && <span>第{src.page}页</span>}
            <p>{src.content.slice(0, 200)}...</p>
          </div>
        ))}
      </div>
    </div>
  );
}

async function askWithRAG(question: string) {
  const response = await fetch('/api/rag/query', {
    method: 'POST',
    body: JSON.stringify({
      question,
      topK: 3, // 取最相关的3个文档片段
    }),
  });

  const data = await response.json();
  return {
    answer: data.answer,
    sources: data.sources,
  };
}

// 定义可用的工具
const tools = [
  {
    type: 'function',
    function: {
      name: 'get_weather',
      description: '获取指定城市的天气',
      parameters: {
        type: 'object',
        properties: {
          city: { type: 'string', description: '城市名称' },
          unit: { type: 'string', enum: ['celsius', 'fahrenheit'] },
        },
        required: ['city'],
      },
    },
  },
  {
    type: 'function',
    function: {
      name: 'search_products',
      description: '在商品数据库中搜索',
      parameters: {
        type: 'object',
        properties: {
          query: { type: 'string' },
          category: { type: 'string' },
        },
        required: ['query'],
      },
    },
  },
];

// 实际的函数实现
async function getWeather(city: string, unit = 'celsius') {
  const response = await fetch(`https://api.weather.com/${city}`);
  return response.json();
}

async function searchProducts(query: string, category?: string) {
  // 搜索你的商品数据库
  return await db.products.search({ query, category });
}

// 处理流程
async function chatWithTools(userMessage: string) {
  // 1. 发送消息和可用工具列表
  let response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: userMessage }],
    tools,
  });

  let message = response.choices[0].message;

  // 2. 如果AI要调用函数
  if (message.tool_calls) {
    for (const toolCall of message.tool_calls) {
      const functionName = toolCall.function.name;
      const args = JSON.parse(toolCall.function.arguments);

      // 3. 执行对应的函数
      let result;
      if (functionName === 'get_weather') {
        result = await getWeather(args.city, args.unit);
      } else if (functionName === 'search_products') {
        result = await searchProducts(args.query, args.category);
      }

      // 4. 把结果返回给AI
      response = await openai.chat.completions.create({
        model: 'gpt-4',
        messages: [
          { role: 'user', content: userMessage },
          message,
          {
            role: 'tool',
            tool_call_id: toolCall.id,
            content: JSON.stringify(result),
          },
        ],
      });

      message = response.choices[0].message;
    }
  }

  return message.content;
}

function FunctionCallDisplay({ call }: { call: FunctionCall }) {
  return (
    <div className="function-call">
      <div className="icon">🔧</div>
      <div>
        调用函数: <code>{call.name}</code>
        <pre>{JSON.stringify(call.arguments, null, 2)}</pre>
      </div>
    </div>
  );
}

async function analyzeImage(file: File) {
  // 转成base64
  const base64 = await fileToBase64(file);

  const response = await openai.chat.completions.create({
    model: 'gpt-4-vision-preview',
    messages: [
      {
        role: 'user',
        content: [
          { type: 'text', text: '这张图片里有什么？' },
          {
            type: 'image_url',
            image_url: { url: `data:image/jpeg;base64,${base64}` }
          },
        ],
      },
    ],
  });

  return response.choices[0].message.content;
}

function fileToBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      resolve(result.split(',')[1]); // 去掉data:image/jpeg;base64,前缀
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

function VoiceInput({ onTranscript }: { onTranscript: (text: string) => void }) {
  const [isListening, setIsListening] = useState(false);

  function startListening() {
    const recognition = new (window as any).webkitSpeechRecognition();
    recognition.lang = 'zh-CN';
    recognition.continuous = false;

    recognition.onstart = () => setIsListening(true);
    recognition.onend = () => setIsListening(false);

    recognition.onresult = (event: any) => {
      const transcript = event.results[0][0].transcript;
      onTranscript(transcript);
    };

    recognition.start();
  }

  return (
    <button onClick={startListening}>
      {isListening ? '正在听...' : '🎤 语音输入'}
    </button>
  );
}

function DocumentSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);

  async function search() {
    const response = await fetch('/api/search', {
      method: 'POST',
      body: JSON.stringify({ query }),
    });

    const data = await response.json();
    setResults(data.results);
  }

  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="搜索文档..."
      />
      <button onClick={search}>搜索</button>

      <div className="results">
        {results.map(r => (
          <div key={r.id} className="result-card">
            <h3>{r.title}</h3>
            <p>{r.content}</p>
            <div className="score">相似度: {(r.score * 100).toFixed(1)}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CollaborativeChat({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const wsRef = useRef<WebSocket | null>(null);

  useEffect(() => {
    wsRef.current = new WebSocket(`ws://localhost:3000/room/${roomId}`);

    wsRef.current.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages(prev => [...prev, message]);
    };

    return () => wsRef.current?.close();
  }, [roomId]);

  function sendMessage(text: string) {
    wsRef.current?.send(JSON.stringify({
      type: 'user_message',
      content: text,
      userId: getCurrentUserId(),
    }));
  }

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <Avatar userId={msg.userId} />
          {msg.content}
        </div>
      ))}
    </div>
  );
}

推荐：Next.js 14 (App Router)
- 自带API Routes，前后端一体
- 部署简单（Vercel一键部署）
- SSR/SSG支持好
- 大部分AI应用都在用

备选：
- Nuxt 3（Vue生态）
- Remix（如果你喜欢）

推荐：shadcn/ui + Tailwind CSS
- 现代设计
- 复制即用，不需要npm install
- 暗黑模式支持好
- AI应用标配

备选：
- Chakra UI
- Ant Design
- Material UI

推荐：Zustand
- 轻量，学习成本低
- TypeScript支持好
- 配合persist中间件做持久化

备选：
- Redux Toolkit（如果团队在用）
- Jotai / Recoil

必备：Vercel AI SDK
- 统一封装了各家API
- 自动处理流式响应
- React Hooks超好用

const { messages, input, handleSubmit } = useChat();

开发阶段：
- SQLite（本地开发）
- Firebase（快速原型）

生产环境：
- PostgreSQL + Prisma ORM（推荐）
- Supabase（PostgreSQL + 即时API）

推荐：Pinecone
- 托管服务，不用自己部署
- 免费额度够用
- API简单

备选：
- Supabase Vector（如果你已经在用Supabase）
- Weaviate（开源，功能强）

// 错误示范
const openai = new OpenAI({
  apiKey: 'sk-xxxxxx', // 千万不要硬编码在前端！
  dangerouslyAllowBrowser: true,
});

// 正确做法：通过后端代理
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ message }),
});

// 错误示范
for await (const chunk of stream) {
  appendText(chunk);
  // 如果用户点了停止，流还在继续
}

// 正确做法
const abortController = new AbortController();

async function streamChat() {
  try {
    for await (const chunk of stream) {
      if (abortController.signal.aborted) break;
      appendText(chunk);
    }
  } catch (e) {
    if (e.name === 'AbortError') {
      console.log('用户停止了生成');
    }
  }
}

// 停止按钮
<button onClick={() => abortController.abort()}>停止</button>

// 错误示范：把所有历史都发给AI
const response = await openai.chat.completions.create({
  messages: allMessages, // 可能有几千条消息！
});

// 正确做法：只取最近的N条
const recentMessages = messages.slice(-10); // 最近10条
const response = await openai.chat.completions.create({
  messages: [
    systemMessage,
    ...recentMessages,
  ],
});

// 错误示范：每收到一个字符就更新整个组件
setMessages([...messages, newMessage]); // 每次都复制整个数组

// 正确做法：用reducer或者只更新最后一条
const [messages, dispatch] = useReducer(messageReducer, []);
dispatch({ type: 'APPEND_TO_LAST', text: chunk });

纯前端
  ↓
AI应用前端（会调API）
  ↓
全栈AI应用开发（前后端都会）
  ↓
AI产品架构师（懂产品+技术）