Skip to main content
The Model Context Protocol (MCP) integration system enables seamless connection between your development environment and external services, APIs, and tools. MCP provides a standardized way to extend your application’s capabilities through secure, approved tool executions.

​
Overview

MCP allows you to connect to various external services like databases, payment processors, analytics platforms, and AI services. Each connection provides tools that can be executed with proper approval workflows, ensuring security while maintaining productivity.

Service Integration

Connect to databases, APIs, and external services

Tool Execution

Execute approved operations with security controls

Marketplace

Pre-configured integrations for popular services

​
System Architecture

​
Main System Components

The MCP system consists of several interconnected components working together:

Integration Panel

Central hub for managing all MCP connections and activities

Marketplace

Pre-configured templates for popular services and APIs

Tool Registry

Catalog of all available tools from connected servers

Execution History

Complete log of all tool executions and their results

​
Connection Protocols

MCP supports multiple connection protocols for different use cases:STDIO Servers: Local command-line tools and scripts SSE Servers: Real-time streaming connections HTTP Servers: RESTful API integrations

​
Approval & Security

Built-in security controls ensure safe tool execution:
  • Tool Approval: Manual approval required for tool execution
  • Auto-Approval: Trusted tools can be pre-approved
  • Timeout Protection: Automatic denial after timeout period
  • Parameter Validation: Input validation before execution

​
Getting Started

1

Access MCP Panel

Click the MCP integrations button in the toolbar to open the main panel
2

Browse Marketplace

Explore pre-configured templates for popular services
3

Configure Integration

Fill in required credentials and connection details
4

Test Connection

Verify the integration works before saving
5

Execute Tools

Use approved tools in your development workflow

​
Marketplace Integrations

​
Database & Storage

Connect to databases and storage services:
  • Supabase: PostgreSQL with real-time subscriptions
  • Custom Databases: Any PostgreSQL-compatible database
  • File Systems: Local and remote file operations

​
Payment Processing

Integrate payment and subscription services:
  • Stripe: Payment processing and subscriptions
  • Custom Payment APIs: Third-party payment processors

​
Analytics Platforms

Connect to analytics and monitoring services:
  • PostHog: Product analytics and feature flags
  • Custom Analytics: Internal analytics platforms

​
Communication Tools

Integrate messaging and collaboration platforms:
  • Slack: Team communication and notifications
  • Custom APIs: Internal communication systems

​
Development Services

Connect to development and deployment tools:
  • GitHub: Repository management and code collaboration
  • Vercel: Deployment and hosting platform
  • 21st.dev: Component generation and development tools

​
Artificial Intelligence

Integrate AI and machine learning services:
  • Claude Code: AI-powered code generation
  • OpenAI: GPT models and AI capabilities
  • Custom AI APIs: Proprietary AI services

​
Productivity Tools

Connect to productivity and knowledge platforms:
  • HubSpot: CRM and marketing automation
  • Notion: Knowledge base and documentation
  • Custom Tools: Internal productivity systems

​
Server Management

​
Manual Server Configuration

Add custom MCP servers with full configuration control:
  • Server Types: STDIO, SSE, or HTTP connections
  • Authentication: API keys, tokens, and custom headers
  • Environment Variables: Runtime configuration
  • Connection Testing: Verify configuration before saving

​
Connection Health

Monitor the status of all connected servers:
  • Connection Status: Real-time availability checking
  • Tool Count: Number of available tools per server
  • Error Reporting: Connection and authentication issues
  • Auto-Reconnection: Automatic retry on connection loss

​
Configuration Management

Manage existing server configurations:
  • Edit Settings: Update credentials and configuration
  • Delete Servers: Remove unused integrations
  • Bulk Operations: Manage multiple servers simultaneously
  • Export/Import: Backup and restore configurations

​
Tool Execution Workflow

​
Finding Available Tools

Browse and search through all available tools:
  • Tool Registry: Complete catalog of available operations
  • Search & Filter: Find tools by name, server, or category
  • Parameter Preview: View required and optional parameters
  • Documentation: Access tool descriptions and usage examples

​
Secure Tool Execution

Execute tools with built-in security controls:
  • Approval Interface: Review tool calls before execution
  • Parameter Validation: Ensure correct input values
  • Timeout Protection: Automatic denial after 30 seconds
  • Trusted Tools: Pre-approve frequently used operations

​
Track Tool Usage

Monitor and analyze tool execution patterns:
  • Execution History: Complete log of all tool calls
  • Performance Metrics: Execution time and success rates
  • Error Analysis: Failed executions and error details
  • Usage Statistics: Most frequently used tools

​
Advanced Features

​
Advanced Capabilities

  • Auto-Approval: Pre-approve trusted tools for instant execution
  • Bulk Operations: Manage multiple servers and tools simultaneously
  • Data Export: Export execution history and configurations
  • Real-time Updates: Live status monitoring and notifications

​
Best Practices

Security First: Always review tool parameters before approval, especially for operations that modify data or execute commands.
Start Small: Begin with marketplace templates for popular services, then add custom integrations as needed.
Credential Management: Store API keys and tokens securely. MCP configurations are stored locally and never transmitted to external servers.

​
Troubleshooting

​
Server Connection Problems

Common connection issues and solutions:
  • Network Errors: Check internet connectivity and firewall settings
  • Authentication Failures: Verify API keys and credentials
  • Server Unavailable: Check service status and retry later
  • Configuration Errors: Validate server URLs and parameters

​
Tool Execution Problems

Issues with tool execution and approval:
  • Approval Timeouts: Tools auto-deny after 30 seconds
  • Parameter Errors: Check required field validation
  • Permission Issues: Verify API permissions and scopes
  • Rate Limiting: Respect API rate limits and retry logic

​
Performance Optimization

Improve MCP system performance:
  • Connection Pooling: Reuse connections for better performance
  • Caching: Cache frequently accessed data
  • Batch Operations: Group multiple operations when possible
  • Monitoring: Track performance metrics and bottlenecks

​
Integration Examples

​
Connecting to Supabase

// Example: Query user data from Supabase
const users = await mcp.executeTool('supabase', 'query_users', {
  table: 'users',
  filter: { status: 'active' }
});

​
Stripe Integration

// Example: Process a payment
const payment = await mcp.executeTool('stripe', 'create_payment_intent', {
  amount: 1000,
  currency: 'usd',
  customer_id: 'cus_123'
});

​
Claude Code Integration

// Example: Generate code with AI
const code = await mcp.executeTool('claude-code', 'generate_component', {
  component_type: 'React',
  description: 'User profile form'
});