《60天AI学习计划启动 | Day 53: Code Assistant 接入聊天 + RAG + Function Calling（实战）》

Day 53：Code Assistant 接入聊天 + RAG + Function Calling（实战）

学习目标

• 把 Day 52 的页面状态 串到一个真实的 AI 接口
• 结合：模式（explain/fix/refactor/test）+ 代码 + 问题 → Prompt / 工具调用
• 形成 一个可跑通的“前端代码助手”端到端请求结构

---

核心知识点

• 1. 前端请求结构（面向 Code Assistant 的 payload）

export type Mode = 'explain' | 'fix' | 'refactor' | 'test'

export interface CodeAssistantRequest {
  mode: Mode
  language: string       // 'typescript' | 'javascript' | 'vue' ...
  code: string
  question?: string
  history?: { role:'user'|'assistant'; content:string }[]
}

• 2. 后端处理思路（概念）

  • 根据 mode 选择 Prompt 模板：
    • explain：解释代码含义、逻辑
    • fix：定位 bug 并给出修复版代码
    • refactor：提高可读性/可维护性
    • test：生成单元测试
  • 可选：结合 Function Calling，比如：
    • lint_code 工具：调用 ESLint/TS 编译器搜集错误
    • run_tests 工具：在沙箱中跑测试并返回结果

• 3. 前端接线（简单示例：非流式）

async function callCodeAssistant(req: CodeAssistantRequest) {
  const res = await fetch('/api/code-assistant', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify(req)
  })
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json() as Promise<{ answer:string }>
}

---

明日学习计划预告（Day 54）

• 主题：调试面板 / Prompt 模板 / 日志接入 Code Assistant
• 方向：
  • 在 Code Assistant 页面中集成 Day 35 的调试面板
  • 显示每个模式对应的实际 Prompt，以便调优和 A/B 对比