🤦让你的Vibe Coding长长脑子🧠

要睡不睡四点半
141 阅读8分钟

🚀 项目简介

Recall Kit 是一个基于 Model Context Protocol (MCP) 的经验分享平台，旨在解决 AI 开发过程中重复对话和 token 浪费的问题。通过记录、分享和复用开发经验，让 AI Agent 能够自动查询和复用历史经验，提高开发效率。

仓库地址：github.com/zzusp/recal…

🤔 为什么需要 Recall Kit？

在 Vibe Coding 中，你是否遇到过这样的痛苦场景？

  • 改不对地方：你只能告诉 AI "问题没修复"或者"不是我要的效果"，AI 却不断尝试各种方案，浪费大量 token 和时间 😫
  • 上下文灾难：为了让 AI 记住之前的讨论，你只能用一个对话压缩所有上下文，结果越用越卡 🤯
  • 重复排查：每次遇到类似问题都要重新解释一遍，AI 无法"记住"之前的解决方案 🤦

Recall Kit 能为你做什么？

  • 📝 经验记录：AI 自动总结并保存开发经验，拒绝重复造轮子！
  • 🔍 智能检索：AI Agent 自动查询相关经验，快速定位你的问题！
  • 🔄 经验复用：复用历史解决方案，减少重复排查，节省宝贵时间！
  • 🧠 知识积累：让 AI 拥有"记忆"，越用越聪明！

⚡ 快速开始

  1. 启动 MCP Server（如果还没运行）

    cd mcp-server
npm run dev

  2. 在 Cursor 中配置 MCP Server

    • 打开设置 → 搜索 "MCP" → 添加服务器
    • URL: http://localhost:3001/mcp
    • 重启 Cursor

  3. 开始使用

    • 在 Cursor 聊天中直接询问："我遇到了 XXX 问题，请查询相关经验"
    • AI 会自动查询并返回解决方案

📖 详细配置步骤见下方 使用指南

🛠️ 系统架构

Recall Kit 由三个核心模块组成，简单又强大：

  1. 🧠 MCP Server：AI 的"经验大脑"，提供经验查询和提交服务

  2. 🌐 Web 应用：直观的 Web 界面，让你轻松搜索、浏览和管理经验

  3. 💾 数据库：基于 Supabase 的智能存储，支持向量搜索和全文搜索，让经验"一搜即达"！

💡 技术栈概览

  • 前端：Next.js 15 + React 18 + TypeScript + Tailwind CSS 🎨
  • 后端：MCP Server (TypeScript) + Express 🚀
  • 数据库：Supabase (PostgreSQL + pgvector) 📊
  • 搜索：向量搜索 (OpenAI Embedding) + 全文搜索 (PostgreSQL FTS) 🔎
  • 协议：Model Context Protocol (MCP) 📡

🚀 使用指南

⚙️ 第一步：配置 MCP Server

⚠️ 重要：这是使用 Recall Kit 的核心步骤，配置完成后才能在 Cursor 中使用经验查询功能。

在 Cursor 中配置 MCP Server：

编辑配置文件

在 Cursor 的 MCP 配置文件中添加：

{
  "mcpServers": {
    "recall-kit": {
      "url": "http://localhost:3001/mcp",
      "description": "Recall Kit Experience Sharing Platform"
    }
  }
}

💡 配置文件位置和详细说明：参考 docs/MCP_CURSOR_SETUP.md

🔍 第二步：在 Vibe Coding 中使用

配置完成后，你就可以在 Cursor 的 AI 聊天中直接使用 Recall Kit 了！

场景 1：查询相关经验

当遇到问题时，直接在 Cursor 聊天中询问：

我遇到了 Next.js 的 hydration 错误，请帮我查询相关的解决方案

AI 会自动调用 query_experiences 工具，搜索相关经验并返回解决方案。

场景 2：自动复用经验

我正在处理这段代码中的错误：
[粘贴你的代码]

请查询类似问题的解决方案，并帮我修复

AI 会：

  1. 分析你的代码问题
  2. 自动查询 Recall Kit 中的相关经验
  3. 根据历史经验提供精准的解决方案

场景 3：提交新经验

当 AI 成功帮你解决一个问题后，按以下流程提交经验：

步骤 1：生成经验文档

使用内置的 prompt 模板：

/recall-kit/summarize_experience

或者直接说：

请用 recall-kit 模板总结当前对话经验并写入 specs/experiences

AI 会：

  1. 提取对话中的问题、解决方案等信息
  2. 生成标准化的 Markdown 文档
  3. 保存到 specs/experiences/ 目录

步骤 2：检查并修改文档

打开生成的 Markdown 文件，检查并修改：

  • 过滤敏感信息
  • 调整关键词
  • 完善问题描述和解决方案

步骤 3：提交文档为经验

在 Cursor 中引用文档并提交：

请将 @specs/experiences/xxx.md 提交为经验记录

或者使用 submit_experience 工具直接提交文档内容。AI 会将文档转换为经验记录并保存到平台。

🌐 第三步：使用 Web 平台

Recall Kit 提供了完整的 Web 端平台，让你可以通过浏览器访问和管理经验库。

Web 平台功能

搜索和浏览

  • 智能搜索：支持向量搜索（语义搜索）和全文搜索，输入关键词即可快速找到相关经验
  • 经验列表：浏览所有已发布的经验记录，按相关性、使用频率或时间排序
  • 详情查看：点击经验标题查看完整的问题描述、根本原因、解决方案和上下文信息

管理功能（需要管理员权限）

  • 经验审核：审核、编辑和删除经验记录
  • 数据统计：查看平台数据统计和概览
  • 系统设置：配置 AI 参数和系统选项

访问方式

  • 本地开发：http://localhost:3000
  • 生产环境：部署后的 Web 应用地址

💡 提示：Web 平台适合浏览、搜索和管理经验，而核心的查询和提交功能建议在 Cursor 中通过 MCP 协议使用，体验更流畅。

💡 使用技巧

1. 关键词选择技巧

提交经验时，关键词很重要：

  • ✅ 包含技术栈：如 nextjs, react, typescript
  • ✅ 包含问题类型：如 hydration, error, performance
  • ✅ 至少 3 个关键词：提高搜索匹配度
  • ❌ 避免过于宽泛：如 bug, problem 这样的词

2. 经验描述规范

好的经验记录应该包含：

  • 清晰的问题描述：具体说明遇到了什么问题
  • 根本原因：为什么会出现这个问题
  • 完整解决方案：详细的解决步骤，最好包含代码示例
  • 上下文信息：环境、版本、相关配置等

3. 查询优化

  • 使用自然语言描述问题，AI 会自动提取关键词
  • 可以结合代码上下文，让 AI 更精准地匹配经验
  • 如果结果不理想，尝试调整关键词或描述更具体的问题

4. 经验复用流程

遇到问题 → AI 自动查询经验 → 查看匹配结果 → 应用解决方案 → 成功解决 → 提交新经验

形成良性循环，让知识库越来越丰富！

🎯 实际使用示例

示例 1：解决 Next.js Hydration 错误

你的问题：

我的 Next.js 应用出现了 hydration 错误，错误信息显示在嵌套布局中

AI 的处理流程：

  1. 自动调用 query_experiences，关键词：["nextjs", "hydration", "layout"]
  2. 返回相关经验，包含解决方案
  3. 根据经验提供修复建议

结果：问题快速解决，无需重复解释！

示例 2：提交新经验

步骤 1：生成经验文档

/recall-kit/summarize_experience

AI 生成的经验文档：

  • 自动提取问题、解决方案、关键词
  • 生成标准 Markdown 格式
  • 保存到 specs/experiences/nextjs-hydration-error-nested-layout.md

步骤 2：检查并修改

  • 打开生成的文档
  • 过滤敏感信息
  • 调整关键词
  • 完善描述

步骤 3：提交为经验

请将 @specs/experiences/nextjs-hydration-error-nested-layout.md 提交为经验记录

AI 会将文档转换为经验记录并保存到平台。

📚 更多文档

核心文档

技术文档

❓ 常见问题

Q: MCP Server 连接失败怎么办？

A: 检查以下几点：

  1. 确认 MCP Server 正在运行：curl http://localhost:3001/health
  2. 检查配置文件中的 URL 是否正确（包含 /mcp 路径）
  3. 重启 Cursor 使配置生效
  4. 查看服务器日志排查问题

Q: 查询不到相关经验怎么办？

A:

  1. 尝试使用不同的关键词
  2. 用自然语言更详细地描述问题
  3. 检查经验库中是否有相关内容（通过 Web 应用搜索）
  4. 如果没有，这正是提交新经验的好时机！

Q: 如何提高经验匹配的准确性？

A:

  1. 提交经验时使用准确、具体的关键词
  2. 包含完整的问题描述和解决方案
  3. 查询时尽量详细地描述问题
  4. 系统会自动使用向量搜索，理解语义相似性

Q: 可以在其他 IDE 中使用吗？

A: 目前主要支持 Cursor，因为 Cursor 原生支持 MCP 协议。其他支持 MCP 的 IDE 理论上也可以使用，但需要参考相应的配置文档。

🤝 贡献与反馈

欢迎提交 Issue 和 Pull Request，让我们一起让 Recall Kit 更强大！💪

遇到问题？

  • 📩 通过 GitHub Issue 反馈
  • 💬 查看文档中的故障排查章节
  • 🔍 搜索已有的 Issue 和讨论

想要贡献？

  • 🐛 报告 Bug
  • 💡 提出功能建议
  • 📝 完善文档
  • 🔧 提交代码改进

让我们一起打造更好的 AI 开发体验！🚀

avatar
文章
阅读
粉丝