Context Forge Electron

A desktop application for managing MCP (Model Context Protocol) servers, tools, prompts, and resources. Built with Electron, React, TypeScript, and Python.

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Python 3.8+
• Git

Setup

1. Clone the repository

   git clone <repository-url>
   cd context-forge-electron

2. Install Node dependencies

   npm install

3. Build the Python backend

   cd python
   
   # On macOS/Linux:
   ./build.sh
   
   # On Windows:
   build.bat

4. Start the application

   # From the root directory
   npm start

That's it! The app will launch with the Python backend integrated.

📦 Building for Production

# Package the application
npm run package

# Create distributable installers
npm run make

Built applications will be in the out/ directory.

🏗️ Project Structure

context-forge-electron/
├── src/
│   ├── components/          # React components
│   │   ├── ui/             # Reusable UI components (Radix UI)
│   │   └── *.tsx           # Feature components
│   ├── hooks/              # Custom React hooks
│   ├── context/            # React contexts (Theme, Team)
│   ├── lib/                # Utilities and libraries
│   │   ├── api/           # API client layer
│   │   └── contextforge-client-ts/  # Generated API client
│   ├── types/              # TypeScript type definitions
│   ├── services/           # Application services
│   ├── main.ts             # Electron main process
│   ├── preload.ts          # Electron preload script
│   └── app.tsx             # React app root
├── python/                 # Python backend
│   ├── build.sh           # Build script (macOS/Linux)
│   ├── build.bat          # Build script (Windows)
│   └── dist/              # Built backend executable
├── assets/                 # Static assets (icons, images)
├── docs/                   # Documentation
└── forge.config.ts         # Electron Forge configuration

🎯 Features

MCP Server Management

• View, create, edit, and delete MCP servers
• Toggle server status (active/inactive)
• Filter by tags, visibility, and team
• Grid and table view modes

Virtual Servers

• Manage virtual server configurations
• Associate tools, resources, and prompts
• Configure transport and authentication

Tools Management

• Browse and manage available tools
• Test tools with custom parameters
• Bulk import from JSON
• Filter by annotations, types, and methods

Prompts Management

• Create and manage prompt templates
• Define template variables
• Execute prompts with arguments
• Track execution metrics

Resources Management

• Browse and manage MCP resources
• View resource metadata and content
• Filter and search capabilities

Catalog Integration

• Browse MCP server catalog
• Install servers from catalog
• View server details and documentation

LLM Playground

• Interactive chat interface
• Test prompts and tools
• Multiple LLM provider support
• Conversation history

Settings & Administration

• Multi-profile support with OAuth
• User management with RBAC
• Team management
• API token generation
• Permission management

Observability & Metrics

• Real-time metrics dashboard
• Performance monitoring
• Activity tracking
• Security insights

🐍 Python Backend

The Python backend is automatically managed by the application:

• Auto-start: Backend starts when the app launches
• Tray control: Start/stop from system tray menu
• Status monitoring: View PID and uptime
• Graceful shutdown: Automatic cleanup on app quit

The backend provides:

• MCP server catalog management
• Server configuration validation
• Plugin system support
• Local API endpoints

See python/README.md for backend-specific documentation.

🔧 Configuration

Environment Variables

Create a .env file in the root directory (optional):

# API Configuration
VITE_API_URL=http://localhost:4444

# Development
VITE_LOG_LEVEL=info
VITE_ENABLE_DEVTOOLS=true

Backend API

The application can connect to an external backend API at http://localhost:4444 by default. This is optional - the built-in Python backend provides core functionality.

🛠️ Development

Available Scripts

• npm start - Start development server with hot reload
• npm run package - Package the app for distribution
• npm run make - Create platform-specific installers
• npm run publish - Publish the app
• npm run lint - Run ESLint
• npm run lint -- --fix - Fix linting issues

Tech Stack

• Frontend: React 19, TypeScript, Tailwind CSS
• UI Components: Radix UI, Lucide Icons, shadcn/ui
• Desktop: Electron 39, Electron Forge
• Build: Vite 7
• Backend: Python 3.8+ with FastAPI
• State Management: React Context + Hooks

📝 Documentation

• Python Backend
• Python Backend Integration
• Toast & Tray Integration
• Multi-Profile Authentication
• LLM Playground Design
• Prompts Page Design
• Metrics Dashboard

🧪 Testing

# Run linter
npm run lint

# Fix linting issues
npm run lint -- --fix

Note: Comprehensive test suite to be added

🔐 Security

• Profile credentials stored securely using Electron's safeStorage API
• OAuth 2.0 support for authentication
• HTTPS recommended for production API endpoints
• Input validation on all user inputs
• Role-based access control (RBAC)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

Apache License 2.0 - see LICENSE file for details

👤 Author

Rynne Whitnah ([email protected])

🗺️ Roadmap

• Add comprehensive test coverage
• Implement error boundaries
• Upgrade to TypeScript 5.7+
• Add CI/CD pipeline
• Enhanced plugin system
• Advanced metrics and analytics
• Component library/Storybook
• Mobile companion app

💬 Support

For issues and questions, please open an issue on GitHub.