MCP Quickbar

🚀 MCP快速条

一个美观、轻量级的系统托盘应用程序，通过模型上下文协议（MCP）将Claude AI与强大的工具集成在一起。采用Tauri构建，具有原生性能和现代网络技术。

______________________________________________________________________

✨ 特性

• 🤖 Claude AI集成 -直接从系统托盘与Claude聊天
• 🔧 MCP工具 -使用多种强大的工具：

- 🔍 网页搜索 -使用Serper API搜索网页 - 📁 GitHub -列出并管理您的存储库 - 📸 截图 -立即捕获屏幕截图 - ☁️ 本地文件 -访问和管理本地文件

• 🎨 漂亮的UI -现代、干净的界面，支持暗模式
• ⚡ 本地性能 -采用Tauri制造，速度快，效率高
• 🔒 安全 -API密钥本地存储在 .env 文件
• 🖥️ 系统托盘 -从菜单栏/系统托盘快速访问

______________________________________________________________________

📋 先决条件

在开始之前，请确保已安装以下内容：

• Node.js （v18或更高版本）- 下载
• 锈 （最新稳定）- 安装
• 牛磺酸先决条件 -跟随 Tauri设置指南

平台特定要求

macOS

xcode-select --install

视窗

• Microsoft Visual Studio C++生成工具
• WebView2（通常预装在Windows 10/11上）

Linux（Debian/Ubuntu）

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    file \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

______________________________________________________________________

🚀 安装和设置

步骤1：克隆存储库

git clone https://github.com/yourusername/mcp-quickbar.git
cd mcp-quickbar

步骤2：安装依赖项

npm install

这将安装所有必需的Node.js依赖项。

步骤3：配置环境变量

1. 复制示例环境文件：

   cp .env.example .env

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

   # Anthropic API Key - Get from https://console.anthropic.com/
   ANTHROPIC_API_KEY=sk-ant-api03-your-key-here

   # GitHub Personal Access Token - Generate from https://github.com/settings/tokens
   GITHUB_TOKEN=ghp_your-token-here

   # Serper API Key - Get from https://serper.dev/ (2,500 free searches/month)
   SERPER_API_KEY=your-serper-key-here

   # For Vite (frontend access)
   VITE_ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
   VITE_GITHUB_TOKEN=ghp_your-token-here
   VITE_SERPER_API_KEY=your-serper-key-here

⚠️ 重要： 永远不要承诺你的 .env 文件到版本控制！它已经在里面了 .gitignore.

______________________________________________________________________

🎮 运行应用程序

发展模式

使用热重载启动开发服务器：

npm run dev

这将：

• 在端口5173上启动Vite-dev服务器
• 启动Tauri应用程序
• 为前端和后端更改启用热重新加载

应用程序窗口将自动打开。您还可以从系统托盘图标访问它。

生产建设

构建生产应用程序：

npm run build

构建的应用程序将位于：

• macOS: src-tauri/target/release/bundle/macos/
• 视窗: src-tauri/target/release/bundle/msi/
• Linux: src-tauri/target/release/bundle/appimage/

______________________________________________________________________

📖 如何使用

1.启动应用程序

跑 npm run dev 或者双击构建的应用程序。

2.从系统托盘进入

• macOS：单击菜单栏中的图标
• 视窗：单击系统托盘中的图标
• Linux：单击系统托盘中的图标

3.使用快速行动

点击任何工具按钮：

• 🔍 网页搜索 -输入搜索查询并获取结果
• 📁 GitHub仓库 -列出您的存储库
• 📸 截图 -捕捉您的屏幕
• ☁️ 驱动器文件 -访问谷歌云端硬盘

4.最小化窗口

单击“最小化”以最小化Dock的窗口。您可以通过以下方式恢复它：

• 点击Dock中的应用程序图标
• 单击菜单栏（macOS）或系统托盘中的托盘图标

______________________________________________________________________

🔑 获取API密钥

无烟煤API密钥（Claude AI）

1. 首选 拟人控制台
2. 注册或登录
3. 导航至 API密钥
4. 点击 创建密钥
5. 复制密钥（以开头 sk-ant-)

GitHub个人访问令牌

1. 首选
2. 点击 生成新令牌（经典）
3. 选择范围： repo, read:user
4. 点击 生成令牌
5. 复制令牌（以开头 ghp_)

Serper API密钥（网络搜索）

1. 首选 Serper.dev
2. 注册一个免费帐户
3. 每月获得2500次免费搜索
4. 从仪表板复制API密钥

______________________________________________________________________

🛠️ 发展

项目结构

mcp-quickbar/
├── src/                    # Frontend source code
│   ├── index.html         # Main HTML file
│   ├── main.js            # UI logic and MCP integration
│   ├── mcp-setup.js       # MCP tools configuration
│   ├── styles.css         # Modern styling
│   └── assets/            # Images and icons
├── src-tauri/             # Rust backend
│   ├── src/
│   │   └── main.rs        # Tauri app with system tray
│   ├── Cargo.toml         # Rust dependencies
│   ├── tauri.conf.json    # Tauri configuration
│   └── icons/             # App icons
├── .env                   # API keys (DO NOT COMMIT!)
├── .env.example           # Template for .env
├── package.json           # Node.js dependencies
├── vite.config.js         # Vite configuration
└── README.md              # This file

可用脚本

npm run dev       # Start development server
npm run build     # Build for production
npm run tauri     # Run Tauri CLI commands

添加新的MCP工具

1. 在中定义工具 src/mcp-setup.js
2. 在中添加工具处理程序 src-tauri/src/main.rs
3. 更新中的UI src/index.html 和 src/main.js

______________________________________________________________________

🐛 故障排除

端口5173已在使用中

# Kill the process using the port
lsof -ti:5173 | xargs kill -9

Rust编译错误

# Update Rust toolchain
rustup update

缺失依赖项

# Clean install
rm -rf node_modules package-lock.json
npm install

系统托盘未显示

• macOS：检查系统首选项>Dock和菜单栏
• 视窗：检查任务栏设置
• Linux：确保你有一个系统托盘（例如，通过GNOME Shell扩展）

构建失败

# Clean build
rm -rf dist src-tauri/target
npm run build

______________________________________________________________________

🎨 定制

更改窗口大小

编辑 src-tauri/tauri.conf.json:

{
  "app": {
    "windows": [{
      "width": 900,
      "height": 700
    }]
  }
}

修改UI主题

在中编辑CSS变量 src/styles.css:

:root {
  --primary: #6366f1;  /* Change primary color */
  --bg: #ffffff;       /* Change background */
}

______________________________________________________________________

🚢 部署

配电楼

# Build for your current platform
npm run build

# The installer will be in src-tauri/target/release/bundle/

代码签名（macOS）

要在macOS上分发，您需要对应用程序进行签名：

# Set up in tauri.conf.json
{
  "bundle": {
    "macOS": {
      "signingIdentity": "Your Developer ID"
    }
  }
}

______________________________________________________________________

🤝 贡献

欢迎投稿！请随时提交拉取请求。

1. 复刻仓库
2. 创建功能分支(git checkout -b feature/AmazingFeature)
3. 提交您的更改(git commit -m 'Add some AmazingFeature')
4. 推到分支(git push origin feature/AmazingFeature)
5. 打开拉取请求

______________________________________________________________________

📄 许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。

______________________________________________________________________

🙏 致谢

• 涛瑞 -对于令人惊叹的框架
• Anthropic -致克劳德·AI
• 模型上下文协议 -对于MCP规范
• 搜索 -用于网络搜索API

______________________________________________________________________

📞 支持

• 文档：检查 SETUP.md 和 CHECKLIST.md 文件
• 问题:
• 讨论:

______________________________________________________________________

织机演示

视频链接

🗺️ 路线图

• \[\]完整的Claude AI聊天界面
• \[\]更多MCP工具（日历、电子邮件等）
• \[\]对话历史记录
• \[\]自定义键盘快捷键
• \[\]多个主题选项
• \[\]自定义工具插件系统

______________________________________________________________________

由...制作❤️ 使用Tauri和MCP