🚀 MCP QuickBar

A beautiful, lightweight system tray application that integrates Claude AI with powerful tools via the Model Context Protocol (MCP). Built with Tauri for native performance and modern web technologies.

✨ Features

🤖 Claude AI Integration - Chat with Claude directly from your system tray
🔧 MCP Tools - Access to multiple powerful tools:
- 🔍 Web Search - Search the web using Serper API
- 📁 GitHub - List and manage your repositories
- 📸 Screenshot - Capture screenshots instantly
- ☁️ Local Files - Access and manage Local files
🎨 Beautiful UI - Modern, clean interface with dark mode support
⚡ Native Performance - Built with Tauri for speed and efficiency
🔒 Secure - API keys stored locally in .env file
🖥️ System Tray - Quick access from your menu bar/system tray

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download
Rust (latest stable) - Install
Tauri Prerequisites - Follow the Tauri setup guide

Platform-Specific Requirements

macOS

xcode-select --install

Windows

Microsoft Visual Studio C++ Build Tools
WebView2 (usually pre-installed on 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

🚀 Installation & Setup

Step 1: Clone the Repository

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

Step 2: Install Dependencies

npm install

This will install all required Node.js dependencies.

Step 3: Configure Environment Variables

Copy the example environment file:
```
cp .env.example .env
```

Edit .env and add your API keys:

# 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

⚠️ IMPORTANT: Never commit your .env file to version control! It's already in .gitignore.

🎮 Running the Application

Development Mode

Start the development server with hot-reload:

npm run dev

This will:

Start the Vite dev server on port 5173
Launch the Tauri application
Enable hot-reload for both frontend and backend changes

The app window will open automatically. You can also access it from the system tray icon.

Production Build

Build the application for production:

npm run build

The built application will be located in:

macOS: src-tauri/target/release/bundle/macos/
Windows: src-tauri/target/release/bundle/msi/
Linux: src-tauri/target/release/bundle/appimage/

📖 How to Use

1. Launch the App

Run npm run dev or double-click the built application.

2. Access from System Tray

macOS: Click the icon in the menu bar
Windows: Click the icon in the system tray
Linux: Click the icon in the system tray

3. Use Quick Actions

Click on any tool button:

🔍 Web Search - Enter a search query and get results
📁 GitHub Repos - List your repositories
📸 Screenshot - Capture your screen
☁️ Drive Files - Access Google Drive

4. Minimize Window

Click "Minimize" to minimize the window to the Dock. You can restore it by:

Clicking the app icon in the Dock
Clicking the tray icon in the menu bar (macOS) or system tray

🔑 Getting API Keys

Anthropic API Key (Claude AI)

Go to Anthropic Console
Sign up or log in
Navigate to API Keys
Click Create Key
Copy the key (starts with sk-ant-)

GitHub Personal Access Token

Go to GitHub Settings > Tokens
Click Generate new token (classic)
Select scopes: repo, read:user
Click Generate token
Copy the token (starts with ghp_)

Serper API Key (Web Search)

Go to Serper.dev
Sign up for a free account
Get 2,500 free searches per month
Copy your API key from the dashboard

🛠️ Development

Project Structure

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

Available Scripts

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

Adding New MCP Tools

Define the tool in src/mcp-setup.js
Add the tool handler in src-tauri/src/main.rs
Update the UI in src/index.html and src/main.js

🐛 Troubleshooting

Port 5173 Already in Use

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

Rust Compilation Errors

# Update Rust toolchain
rustup update

Missing Dependencies

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

System Tray Not Showing

macOS: Check System Preferences > Dock & Menu Bar
Windows: Check taskbar settings
Linux: Ensure you have a system tray (e.g., via GNOME Shell extension)

Build Fails

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

🎨 Customization

Change Window Size

Edit src-tauri/tauri.conf.json:

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

Modify UI Theme

Edit CSS variables in src/styles.css:

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

🚢 Deployment

Building for Distribution

# Build for your current platform
npm run build

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

Code Signing (macOS)

For distribution on macOS, you'll need to sign the app:

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Tauri - For the amazing framework
Anthropic - For Claude AI
Model Context Protocol - For the MCP specification
Serper - For the web search API

📞 Support

Documentation: Check the SETUP.md and CHECKLIST.md files
Issues: GitHub Issues
Discussions: GitHub Discussions

Loom Demo

Video Url

🗺️ Roadmap

[ ] Full Claude AI chat interface
[ ] More MCP tools (Calendar, Email, etc.)
[ ] Conversation history
[ ] Custom keyboard shortcuts
[ ] Multiple theme options
[ ] Plugin system for custom tools

Made with ❤️ using Tauri and MCP