Cursor Chat Browser：浏览和管理 Cursor AI 聊天历史的 Web 应用

引言

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

Cursor Chat Browser 是一个用于浏览和管理 Cursor 编辑器 AI 聊天历史的 Web 应用，支持查看、搜索和导出你的 AI 对话为 Markdown、HTML、PDF 等多种格式，让你轻松管理和回顾与 AI 的对话历史。

核心特点：

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

项目背景

项目简介

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

解决的核心问题：

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

技术栈：

• 框架: 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 聊天历史，让开发者能够：

1. 浏览历史：查看所有工作区的聊天记录
2. 搜索对话：全文搜索所有聊天内容
3. 导出记录：导出为 Markdown、HTML、PDF 格式
4. 组织管理：按工作区组织聊天记录
5. 类型区分：区分 AI 聊天和 Composer 日志
6. 跨平台：支持 Windows、macOS、Linux、WSL2

快速开始

安装：

# 克隆仓库
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 版本兼容。

核心特性

1. 浏览功能：查看所有工作区的聊天历史，按工作区组织聊天记录，浏览 AI 聊天日志和 Composer 日志。
2. 搜索功能：在导航栏中使用搜索栏搜索所有日志，按聊天日志、Composer 日志或两者过滤结果。
3. 导出功能：支持 Markdown（纯文本格式，带代码块）、HTML（带语法高亮的样式文档）、PDF（适合分享的格式化文档）。
4. 多存储支持：支持工作区特定存储（旧版本）和全局存储（新版本 Cursor），自动检测存储位置。
5. 双重日志支持：AI 聊天日志和 Composer 日志，类型区分和过滤，合并视图。
6. 用户体验：响应式设计，深色/浅色模式支持，语法高亮的代码块，可收藏的聊天 URL，自动工作区路径检测。

项目优势

对比项	Cursor Chat Browser	Cursor 编辑器内置	手动导出
浏览历史	✅ Web 界面，易于浏览	⚠️ 仅当前会话	❌ 不支持
搜索功能	✅ 全文搜索，支持过滤	❌ 不支持	❌ 需手动查找
导出格式	✅ Markdown、HTML、PDF	❌ 不支持	⚠️ 需手动复制
多工作区	✅ 统一管理所有工作区	⚠️ 分散在各工作区	⚠️ 需逐个处理
类型区分	✅ 区分 Chat 和 Composer	⚠️ 需手动区分	❌ 不支持
跨平台	✅ Windows、macOS、Linux	✅ 跨平台	✅ 跨平台
语法高亮	✅ 代码块语法高亮	✅ 支持	❌ 需手动处理
备份管理	✅ 导出备份	⚠️ 需手动复制文件	⚠️ 需手动操作

项目详细剖析

架构设计

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)
    ├── 响应式设计
    └── 深色/浅色模式

设计理念：

1. 简单易用：Web 界面，无需复杂配置
2. 自动检测：自动检测 Cursor 存储路径
3. 兼容性：支持新旧版本的 Cursor 存储格式
4. 响应式：支持桌面和移动端
5. 可扩展：基于 Next.js，易于扩展功能

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. 输入 Cursor 工作区存储路径
3. 保存配置

搜索功能实现

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

搜索流程：

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/
    └── (新格式)

兼容策略：

1. 同时检查两种存储位置
2. 优先使用新格式
3. 如果新格式不存在，回退到旧格式
4. 统一数据模型处理两种格式

适用人群

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

项目地址：

• GitHub: github.com/thomas-pedersen/cursor-chat-browser