一天一个开源项目（第47篇）：Cursor Chat Browser - 浏览和管理 Cursor AI 聊天历史的 Web 应用

引言

“View, search, and export your AI conversations in various formats.”

这是「一天一个开源项目」系列的第 47 篇文章。今天介绍的项目是 Cursor Chat Browser（GitHub）。

使用 Cursor 编辑器进行 AI 编程时，是否遇到过这些问题：想回顾之前的对话却找不到？想搜索某个技术问题的解决方案却无从下手？想导出聊天记录分享给团队却不知道如何操作？Cursor Chat Browser 是一个用于浏览和管理 Cursor 编辑器 AI 聊天历史的 Web 应用，支持查看、搜索和导出你的 AI 对话为 Markdown、HTML、PDF 等多种格式，让你轻松管理和回顾与 AI 的对话历史。

为什么值得看？

• 🔍 浏览和搜索：浏览所有工作区的 Cursor 聊天历史，全文搜索功能
• 🌐 多存储支持：支持工作区特定存储和全局存储（新版本 Cursor）
• 🤖 双重日志：同时支持 AI 聊天日志和 Composer 日志
• 📁 工作区组织：按工作区组织聊天记录
• 📱 响应式设计：支持深色/浅色模式，移动端友好
• ⬇️ 多格式导出：支持 Markdown、HTML（语法高亮）、PDF 导出
• 🎨 语法高亮：代码块语法高亮显示
• 📌 可收藏链接：支持书签化的聊天 URL

你将学到什么

• Cursor Chat Browser 的核心功能和特性
• Cursor 编辑器聊天历史的存储机制
• 如何浏览、搜索和导出聊天记录
• 跨平台路径自动检测机制
• Next.js + TypeScript + Tailwind CSS 技术栈实践
• SQLite 数据库读取和解析

前置知识

• 了解 Cursor 编辑器的基本使用
• 对 Web 应用开发有基本了解
• 了解 Next.js 框架（可选）
• 对 SQLite 数据库有基本了解（可选）

项目背景

项目简介

Cursor Chat Browser 是一个用于浏览和管理 Cursor 编辑器 AI 聊天历史的 Web 应用。它解决了 Cursor 编辑器本身无法方便地浏览、搜索和导出聊天历史的问题，让开发者能够更好地管理和回顾与 AI 的对话。

核心特点：

• 浏览功能：浏览所有工作区的聊天历史
• 搜索功能：全文搜索，支持按聊天类型过滤
• 导出功能：支持 Markdown、HTML、PDF 多种格式
• 多存储支持：兼容新旧版本的 Cursor 存储格式
• 双重日志：同时支持 AI 聊天和 Composer 日志
• 自动检测：自动检测 Cursor 工作区存储路径
• 响应式设计：支持深色/浅色模式，移动端友好

解决的核心问题：

• Cursor 编辑器无法方便地浏览历史聊天记录
• 无法搜索之前的对话内容
• 无法导出聊天记录分享或备份
• 多个工作区的聊天记录分散，难以统一管理
• 新版本 Cursor 改变了存储格式，需要兼容

面向的用户：

• 使用 Cursor 编辑器进行 AI 编程的开发者
• 需要回顾和整理 AI 对话历史的用户
• 需要导出聊天记录分享给团队的开发者
• 需要备份重要对话的用户
• 希望更好地管理 AI 编程对话的开发者

作者/团队介绍

• 作者：Thomas Pedersen（GitHub）
• 背景：开源开发者，专注于开发实用工具
• 理念：让开发者更好地管理和利用 AI 对话历史
• 社区：500+ stars，87+ forks，活跃的社区支持

项目数据

• ⭐ GitHub Stars: 500+
• 🍴 Forks: 87+
• 📦 版本: 持续更新中（32+ commits）
• 📄 License: MIT
• 🌐 仓库: github.com/thomas-pedersen/cursor-chat-browser
• 🐛 Issues: GitHub Issues

技术栈：

• 框架: Next.js 14 (App Router)
• 语言: TypeScript (93.7%)
• 样式: Tailwind CSS (6.0%)
• UI 组件: shadcn/ui
• 数据库: SQLite（读取 Cursor 聊天数据库）
• Node.js: 18+

重要特性：

• 支持 Windows、macOS、Linux、WSL2
• 自动检测 Cursor 工作区存储路径
• 支持新旧版本的 Cursor 存储格式
• 响应式设计，支持深色/浅色模式

主要功能

核心作用

Cursor Chat Browser 的核心作用是：提供一个 Web 界面来浏览、搜索和管理 Cursor 编辑器的 AI 聊天历史，让开发者能够：

使用场景

快速开始

安装：

# 克隆仓库
git clone https://github.com/thomas-pedersen/cursor-chat-browser.git
cd cursor-chat-browser

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问：

• 打开浏览器访问：http://localhost:3000

配置：

应用会自动检测 Cursor 工作区存储路径：

• Windows: %APPDATA%\\Cursor\\User\\workspaceStorage
• WSL2: /mnt/c/Users/<USERNAME>/AppData/Roaming/Cursor/User/workspaceStorage
• macOS: ~/Library/Application Support/Cursor/User/workspaceStorage
• Linux: ~/.config/Cursor/User/workspaceStorage
• Linux (remote/SSH): ~/.cursor-server/data/User/workspaceStorage

如果自动检测失败，可以在配置页面（⚙️）手动设置路径。

注意：新版本的 Cursor 已将聊天数据存储从工作区特定位置移动到全局存储。此应用现在支持两种存储方法，以确保与所有 Cursor 版本兼容。

核心特性

项目优势

为什么选择 Cursor Chat Browser？

• 便捷浏览：Web 界面，易于浏览和搜索历史对话
• 多格式导出：支持 Markdown、HTML、PDF，满足不同需求
• 全文搜索：快速找到需要的对话内容
• 统一管理：统一管理所有工作区的聊天记录
• 自动检测：自动检测 Cursor 存储路径，无需手动配置
• 开源免费：MIT 许可证，完全免费使用

项目详细剖析

架构设计

Cursor Chat Browser 采用 Next.js 14 App Router 架构，使用 TypeScript 开发，通过 SQLite 读取 Cursor 的聊天数据库。

核心组件：

Cursor Chat Browser
├── Next.js 14 (App Router)
│ ├── 页面路由
│ ├── 服务端组件
│ └── 客户端组件
├── SQLite 数据库读取
│ ├── 读取 state.vscdb 文件
│ ├── 解析聊天记录
│ └── 解析 Composer 日志
├── UI 组件 (shadcn/ui)
│ ├── 导航栏
│ ├── 搜索栏
│ ├── 聊天列表
│ └── 导出功能
└── 样式系统 (Tailwind CSS)
├── 响应式设计
└── 深色/浅色模式

设计理念：

Cursor 存储机制

Cursor 编辑器将聊天历史存储在 SQLite 数据库中（state.vscdb 文件）。

存储位置：

• Windows: %APPDATA%\\Cursor\\User\\workspaceStorage\\<workspace-id>\\state.vscdb
• macOS: ~/Library/Application Support/Cursor/User/workspaceStorage/<workspace-id>/state.vscdb
• Linux: ~/.config/Cursor/User/workspaceStorage/<workspace-id>/state.vscdb

新版本变化：

• 旧版本：每个工作区有独立的 state.vscdb 文件
• 新版本（v44.9+）：使用全局存储，聊天数据集中管理

数据库结构：

— 简化的数据库结构
CREATE TABLE ItemTable (
key TEXT PRIMARY KEY,
value TEXT — JSON 格式的聊天数据
);

路径自动检测

应用会自动检测不同平台的 Cursor 存储路径：

检测逻辑：

// 伪代码示例
function detectCursorPath(): string {
const platform = process.platform;

switch (platform) {
case 'win32':
return path.join(process.env.APPDATA, 'Cursor/User/workspaceStorage');
case 'darwin':
return path.join(os.homedir(), 'Library/Application Support/Cursor/User/workspaceStorage');
case 'linux':
// 检查是否是 WSL2
if (isWSL2()) {
return `/mnt/c/Users/${username}/AppData/Roaming/Cursor/User/workspaceStorage`;
}
return path.join(os.homedir(), '.config/Cursor/User/workspaceStorage');
default:
throw new Error('Unsupported platform');
}
}

手动配置：

如果自动检测失败，用户可以在配置页面手动设置路径：

搜索功能实现

搜索功能支持全文搜索和类型过滤：

搜索流程：

1. 用户输入搜索关键词
↓
2. 扫描所有工作区的 state.vscdb 文件
↓
3. 解析聊天记录和 Composer 日志
↓
4. 全文搜索匹配内容
↓
5. 按类型过滤（Chat/Composer/All）
↓
6. 显示搜索结果

搜索结果展示：

• 类型徽章（Chat/Composer）
• 匹配的文本片段（高亮显示）
• 工作区位置
• 标题
• 时间戳

导出功能

支持三种导出格式：

Markdown 导出：

# Chat Title

## User
用户消息内容

## Assistant
AI 回复内容

```code
代码块内容

**HTML 导出**：

– 带样式的 HTML 文档
– 代码块语法高亮（使用 highlight.js 或类似库）
– 响应式设计
– 可打印格式

**PDF 导出**：

– 使用浏览器打印功能或 PDF 库
– 格式化文档
– 适合分享和存档

**导出实现**：

```typescript
// 伪代码示例
async function exportChat(chatId: string, format: 'md' | 'html' | 'pdf') {
const chat = await loadChat(chatId);

switch (format) {
case 'md':
return exportAsMarkdown(chat);
case 'html':
return exportAsHTML(chat);
case 'pdf':
return exportAsPDF(chat);
}
}

技术栈详解

Next.js 14 App Router：

• 使用最新的 App Router 架构
• 服务端组件和客户端组件混合使用
• 文件系统路由
• 服务端数据获取

TypeScript：

• 类型安全
• 更好的开发体验
• 代码提示和错误检查

Tailwind CSS：

• 实用优先的 CSS 框架
• 快速开发
• 响应式设计
• 深色模式支持

shadcn/ui：

• 基于 Radix UI 的组件库
• 可访问性支持
• 可定制样式
• 组件丰富

SQLite：

• 使用 better-sqlite3 或类似库读取数据库
• 轻量级，无需额外服务
• 直接读取 Cursor 的数据库文件

兼容性处理

项目需要处理新旧版本的 Cursor 存储格式差异：

旧版本（工作区特定存储）：

workspaceStorage/
├── workspace-id-1/
│ └── state.vscdb
├── workspace-id-2/
│ └── state.vscdb
└── …

新版本（全局存储）：

User/
├── workspaceStorage/
│ └── (旧格式)
└── globalStorage/
└── (新格式)

兼容策略：

项目地址与资源

官方资源

• 🌟 GitHub: github.com/thomas-pedersen/cursor-chat-browser
• 🐛 Issue Tracker: GitHub Issues
• 💬 Pull Requests: GitHub PRs
• 📝 Changelog: CHANGELOG.md

适用人群

• Cursor 用户：使用 Cursor 编辑器进行 AI 编程的开发者
• 知识管理：需要整理和回顾 AI 对话历史的用户
• 团队协作：需要导出和分享聊天记录的团队
• 备份需求：需要备份重要对话的用户
• Web 开发者：学习 Next.js + TypeScript + Tailwind CSS 的开发者

欢迎来我中的个人主页找到更多有用的知识和有趣的产品