上下文包生成器

一键聚合来自多个来源的上下文——在开始任何任务之前节省15分钟的手动研究时间

![License: MIT](LICENSE) ](https://nodejs.org/) ![Powered by Skybridge](https://docs.skybridge.tech) ![Built with Claude](https://claude.ai)

描述

上下文包生成器 是一个MCP（模型上下文协议）应用程序，可以在开始任何任务之前自动收集所需的所有上下文。与其手动搜索代码库、文档、git历史和日历，不如简单地描述你的目标，让应用程序在几秒钟内构建一个全面的上下文包。

专为软件开发人员、项目经理以及任何需要快速完成任务、功能或bug修复的人而设计。通过将相关文件、提交、会议和文档聚合到一个有组织的视图中，解决了“我从哪里开始？”的普遍工作场所问题。

非常适合：

开始开发新功能
调试事件
准备代码审查
加入不熟悉的项目
计划冲刺或季度工作

特性

🎯 一键式上下文聚合 --输入任务描述，如“发货特征X”，并在几秒钟内获取所有相关上下文
📁 文件系统搜索 --通过MCP文件系统集成自动查找相关文件（代码、文档、配置）
🔀 Git历史分析 --搜索提交消息和与表面相关的代码更改的差异
🤖 LLM动力总结 -Claude API智能地将结果聚合到结构化部分中
💾 持久化存储 --将上下文包保存到Supabase以供重用和历史参考
🎨 漂亮的UI --干净的紫色渐变主题界面，具有分组资源和加载状态
🔐 安全认证 --Supabase中基于职员的行级安全身份验证（RLS）
🔧 可扩展架构 --易于添加更多MCP服务器（GitHub、日历、Slack、电子邮件）

技术栈

前端：

React 19与TypeScript
Vite 7（构建工具和开发服务器）
Lucide React（图标）
带有渐变主题的自定义CSS

后端：

天桥（MCP服务器框架）
Express.js 5
Node.js 24.13+
TypeScript

MCP集成：

模型上下文协议SDK
文件系统MCP（文件搜索）
Git MCP（提交历史）

数据库验证（&A）：

Supabase（带RLS的PostgreSQL）
办事员（身份验证和用户管理）

AI/LLM：

人类克劳德3.5十四行诗API
Zod（模式验证）

DevOps：

pnpm（包管理）
Alpic（部署平台）
Cloudflared（用于测试的本地隧道）

架构概述

flowchart TB
    User[👤 User] --> Widget[React Widget
build-context-pack]
    Widget --> McpServer[Skybridge MCP Server
context.buildPack]

    McpServer --> FsMcp[Filesystem MCP
Search Files]
    McpServer --> GitMcp[Git MCP
Search Commits]
    McpServer --> LLM[Claude API
Aggregate & Structure]

    FsMcp --> Results[Raw Results]
    GitMcp --> Results
    Results --> LLM

    LLM --> Supabase[(Supabase DB
context_packs)]
    Supabase --> Widget

    Clerk[Clerk Auth] -.->|Authenticate| User
    Widget --> Display[Context Pack Display
Summary • Resources • Actions]

运作原理

用户输入：用户在小部件中输入任务目标（例如“调试登录超时问题”）
MCP编排：服务器并行调用多个MCP工具：

- 文件系统MCP 搜索与关键字匹配的文件（例如，“登录”、“超时”、“身份验证”） - Git MCP 查询相关代码更改的提交历史记录

LLM聚合：Claude API接收所有原始结果并生成：

- 任务上下文的两句总结 - 分组资源（代码、文档、其他） - 3-5个待调查的开放性问题 - 3建议的下一步行动

存储：使用user_id将上下文包保存到Supabase以供将来重用
显示：小部件呈现带有链接、摘要和可操作项的结构化部分

这种架构将关注点清晰地分开：前端处理用户交互，MCP服务器协调数据收集，外部MCP提供原始数据，LLM增加智能，Supabase确保持久性。

有关更多信息，请参阅架构概述.

安装

先决条件

安装前，请确保：

Node.js v24.13+(下载)

- macOS： brew install node - Linux/Windows：

pnpm (安装指南)

  npm install -g pnpm

Supabase命令行界面 (入门指南)

- macOS： brew install supabase/tap/supabase - 其他：见Supabase文档

Supabase项目 (创建项目)

- 您需要： SUPABASE_URL 和 SUPABASE_SERVICE_ROLE_KEY

文员项目 (创建项目)

- 您需要： CLERK_SECRET_KEY 和 CLERK_PUBLISHABLE_KEY

无烟煤API密钥 (获取API密钥)

- 您需要： ANTHROPIC_API_KEY

逐步设置

1.克隆存储库

git clone https://github.com/alpic-ai/claude-hacknight-starter-20-02-2026.git context-pack-builder
cd context-pack-builder

2.安装依赖项

pnpm install

这将安装约342个软件包，包括React、Vite、Skybridge、Supabase客户端、Clerk和Anthropic SDK。

3.配置环境变量

cp .env.example .env

编辑 .env 并添加您的API密钥：

# Supabase (https://supabase.com/dashboard)
SUPABASE_URL=https://your-project-id.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Clerk (https://dashboard.clerk.com)
CLERK_SECRET_KEY=sk_test_xxxxx
CLERK_PUBLISHABLE_KEY=pk_test_xxxxx

# Anthropic (https://console.anthropic.com/settings/keys)
ANTHROPIC_API_KEY=sk-ant-xxxxx

4.链接您的Supabase项目

supabase link --project-ref your-project-ref

您可以在Supabase仪表板URL中找到您的项目参考。

5.推动数据库迁移

supabase db push

这将创建 context_packs 具有以下架构的表：

id （uuid，主键）
user_id （文本，索引）
title （文本）
summary （文本）
resources （jsonb）
actions （jsonb）
created_at （时间戳）

6.启动开发服务器

pnpm dev

该应用程序运行于 http://localhost:3000。打开此URL以使用Skybridge开发工具进行测试。

用法

本地运行

启动开发服务器：

pnpm dev

打开 http://localhost:3000 在浏览器中访问Skybridge开发工具界面。

与Claude一起测试

要将本地服务器连接到Claude Desktop或Claude Web，请执行以下操作：

1.通过隧道连接本地服务器 （暴露 /mcp 端点）：

cloudflared tunnel --url http://localhost:3000

这将返回一个临时URL，如下所示 https://xxx.trycloudflare.com.

2.在Claude中添加为MCP服务器：

打开Claude设置→ MCP服务器
添加远程服务器： https://xxx.trycloudflare.com/mcp
需要Claude Pro、Team、Max或Enterprise

3.克劳德测试：

Build a context pack for "Ship authentication feature"

Claude将调用MCP服务器，该服务器搜索您的文件系统和git历史记录，将结果与LLM聚合，并返回一个结构化的上下文包。

工作流示例

输入（在小部件中或通过Claude）：

Ship feature X

输出（上下文包）：

Summary:
Feature X adds real-time notifications to the dashboard.
Last work was done on branch feature/notifications, with
8 commits merged 3 days ago.

Code:
- src/feature-x.ts (111 lines)
- src/feature-x.test.ts (126 lines)

Docs:
- docs/spec.md (Feature X specifications)
- docs/design.md (Architecture and design decisions)

Git History:
- commit abc123: "Add notification service" (3 days ago)
- commit def456: "Update dashboard UI" (2 days ago)

Open Questions:
1. What is the rollout timeline for production?
2. Are there any known edge cases with Safari?
3. Who owns the integration testing?

Next Actions:
1. Review PR #12 for final approval
2. Confirm QA owner for end-to-end testing
3. Schedule rollout meeting with product team

生产大楼

pnpm build
pnpm start

或直接部署到 Alpic:

![Deploy on Alpic](https://app.alpic.ai/new/clone?repositoryUrl=https%3A%2F%2Fgithub.com%2Falpic-ai%2Fclaude-hacknight-starter-20-02-2026)

配置

环境变量

所有配置均通过 .env 文件：

变量	描述	必填	示例
`SUPABASE_URL`	您的Supabase项目URL	✅	`https://abc123.supabase.co`
`SUPABASE_SERVICE_ROLE_KEY`	Supabase服务角色键（设置→ API✅	`eyJhbGci...`
`CLERK_SECRET_KEY`	服务器端身份验证的职员密钥	✅	`sk_test_xxxxx`
`CLERK_PUBLISHABLE_KEY`	客户端职员可发布密钥	✅	`pk_test_xxxxx`
`ANTHROPIC_API_KEY`	Claude的Anthropic API密钥	✅	`sk-ant-xxxxx`

MCP服务器配置

默认情况下，该应用程序使用两个MCP服务器：

文件系统MCP --按关键字搜索本地文件

配置于 server/src/context-pack.ts
默认值：在当前工作目录中搜索
可通过以下方式定制 searchPath 参数

Git MCP --解析git提交历史记录

配置于 server/src/context-pack.ts
默认值：过去30天内的搜索提交
可通过以下方式定制 since 参数

要添加更多MCP服务器（GitHub、日历、Slack），请参阅添加新MCP 在路线图部分。

优化RLS策略

行级安全性确保用户只能看到自己的上下文包：

-- Users can only read their own packs
CREATE POLICY "Users can read own packs"
  ON context_packs FOR SELECT
  USING (auth.uid()::text = user_id);

-- Users can only insert their own packs
CREATE POLICY "Users can insert own packs"
  ON context_packs FOR INSERT
  WITH CHECK (auth.uid()::text = user_id);

视频演示

![Video Demo](https://youtu.be/D_D2Vei1Jcs)

屏幕截图/演示

1.小部件界面

_占位符：带有输入字段和“构建上下文包”按钮的构建上下文包小部件的屏幕截图。_

2.上下文包显示

_占位符：显示渲染的上下文包的屏幕截图，其中包含摘要、分组资源、开放问题和下一步操作。_

3.过去的包列表

_占位符：显示以前生成的上下文包的过去包历史的屏幕截图。_

现场演示

现在试试克劳德：

添加 https://context-pack-builder.alpic.live/mcp 在Claude设置中作为远程MCP服务器（需要Pro、Team、Max或Enterprise）。

然后问克劳德：

Build a context pack for debugging the login flow

_注意：部署后替换为实际部署URL。_

API/CLI参考

MCP工具： `build-context-pack`

工具名称： build-context-pack

输入架构：

{
  goal: string; // Task description (e.g., "Ship feature X")
}

输出架构：

{
  summary: string;        // 2-sentence summary
  resources: {
    code: Array;
    docs: Array;
    other: Array;
  };
  openQuestions: string[]; // 3-5 questions to investigate
  nextActions: string[];   // 3 suggested actions
}

克劳德提示示例：

Use the build-context-pack tool to gather context for "fixing memory leak in Node.js service"

示例cURL（API直接调用）：

curl -X POST https://context-pack-builder.alpic.live/mcp \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_CLERK_TOKEN" \
  -d '{
    "method": "tools/call",
    "params": {
      "name": "build-context-pack",
      "arguments": {
        "goal": "Prepare Q2 planning review"
      }
    }
  }'

测试

测试框架： _尚未实施_

添加测试（建议用于生产）：

# Install test dependencies
pnpm add -D vitest @testing-library/react @testing-library/jest-dom

# Run tests
pnpm test

建议测试范围：

单元测试 context-pack.ts 函数（buildContextPack、callFilesystemMcp、callGitMcp、aggregateWithLLM）
MCP服务器端点的集成测试
React小部件的组件测试（build-context-pack.tsx、ContextPackDisplay.tsx）
全用户流（输入）的E2E测试→ MCP → LLM → 速贝→ 显示器）

路线图

✅ 已完成（MVP+延伸目标）

\[x\] 文件系统MCP集成
\[x\] Git MCP集成
\[x\] 使用Claude API进行LLM聚合
\[x\] Supabase持久性
\[x\] 具有加载状态的漂亮UI
\[x\] 过去的包历史
\[x\] 演示材料和脚本

🔜 计划的功能

高优先级：

\[ \] GitHub MCP集成 -直接从GitHub API搜索问题、PR和代码
\[ \] 日历MCP --查找相关会议和活动
\[ \] Slack/团队MCP --搜索相关消息线索和渠道
\[ \] 电子邮件MCP --向利益相关者展示重要的电子邮件线索

中等优先级：

\[ \] 编辑/删除包 --用于管理已保存上下文包的CRUD操作
\[ \] 共享包 --为团队协作生成可共享的链接
\[ \] 导出到Markdown --将上下文包下载为.md文件
\[ \] 标签系统 --按项目、类型或自定义标签组织包
\[ \] 搜索包 --在已保存的上下文包中进行全文搜索

低优先级：

\[ \] 团队工作区 --为整个团队共享上下文包
\[ \] 分析 --跟踪哪些资源随着时间的推移最有用
\[ \] 自定义MCP插件 --允许用户添加自己的MCP服务器
\[ \] 移动应用 --iOS/Android的React Native版本

贡献

我们欢迎捐款！以下是如何开始：

报告问题

发现错误或有功能请求？

检查现有问题第一
如果没有找到，打开一个新问题
提供：

- 清晰的标题和描述 - 复制步骤（针对bug） - 预期行为与实际行为 - 环境详细信息（节点版本、操作系统、浏览器）

拉取请求

流程：

分叉存储库
创建要素分支： git checkout -b feature/your-feature-name
按照我们的代码风格进行更改：

- TypeScript适用于所有代码 - ESLint+格式化预处理 - 有意义的变量名 - 复杂逻辑评论

在本地测试您的更改(pnpm dev)
以明确的信息承诺： git commit -m "Add calendar MCP integration"
推你的叉子： git push origin feature/your-feature-name
打开一个PR main 分支

指导方针：

保持PR的专注（每个PR一个功能/修复）
如果添加新功能，请更新README
添加数据库更改的迁移
提交前使用Claude Desktop进行测试

许可证

该项目根据 MIT许可证.

看许可证文件以获取完整详细信息。

MIT License

Copyright (c) 2026 Context Pack Builder Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

[Full MIT License text...]

联系/支持

维护者

上下文包生成器团队

github： @阿尔卑斯山人工智能
网站： alpic.ai
电子邮件：support@alpic.ai

社区

问题和Bug：
功能请求：
松弛： 加入 Alpic社区Slack （占位符链接）

资源

______________________________________________________________________

建于❤️ 使用克劳德代码, 天桥，以及模型上下文协议

Alpic AI黑客之夜冠军 （2026年2月20日）

Context Pack Builder

快速接入

详细介绍