> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Integration

> Connect CodinIT to other services and tools

MCP (Model Context Protocol) lets CodinIT connect to other services like databases, payment systems, and more. Think of it like adding plugins to make CodinIT more powerful.

## What is MCP?

MCP lets you connect CodinIT to other services you use. For example, you can connect to a database to save user data, or to Stripe to process payments.

<CardGroup cols={3}>
  <Card title="Connect Services" icon="plug">
    Link to databases, APIs, and other tools
  </Card>

  <Card title="Run Actions" icon="zap">
    Do things in those services safely
  </Card>

  <Card title="Ready-Made Connections" icon="storefront">
    Pre-built connections for popular services
  </Card>
</CardGroup>

## How It Works

### Main Parts

MCP has a few main parts:

<CardGroup cols={2}>
  <Card title="Control Panel" icon="sidebar">
    Where you manage all your connections
  </Card>

  <Card title="Marketplace" icon="shopping-bag">
    Ready-made connections you can use
  </Card>

  <Card title="Tool List" icon="wrench">
    All the actions you can do
  </Card>

  <Card title="History" icon="clock">
    Record of what you've done
  </Card>
</CardGroup>

### Types of Connections

MCP can connect in different ways:

* **STDIO**: Local tools on your computer
* **SSE**: Real-time streaming connections
* **HTTP**: Web-based APIs

### Staying Safe

MCP keeps you safe:

* **Approval needed**: You have to approve actions before they run
* **Auto-approve**: You can trust certain actions to run automatically
* **Timeout**: Actions are cancelled if they take too long
* **Check inputs**: Makes sure the data is valid before running

## How to Start

<Steps>
  <Step title="Open MCP Panel">Click the MCP button in the toolbar</Step>
  <Step title="Look at Marketplace">See what ready-made connections are available</Step>
  <Step title="Set Up Connection">Enter your login info and settings</Step>
  <Step title="Test It">Make sure it works before saving</Step>
  <Step title="Use It">Start using the tools in your project</Step>
</Steps>

## Available Services

### Databases

Save and get data:

* **Supabase**: Database with real-time updates
* **Custom Databases**: Any PostgreSQL database
* **File Systems**: Save files locally or online

### Payments

Handle money:

* **Stripe**: Accept payments and subscriptions
* **Custom Payment APIs**: Other payment services

### Analytics

Track how people use your app:

* **PostHog**: See what users do
* **Custom Analytics**: Your own tracking systems

### Communication

Send messages:

* **Slack**: Team chat and notifications
* **Custom APIs**: Your own messaging systems

### Development

Build and deploy:

* **GitHub**: Save code and work with others
* **Vercel**: Put your app online
* **21st.dev**: Generate components

### AI Services

Use artificial intelligence:

* **Claude Code**: AI that writes code
* **OpenAI**: GPT models
* **Custom AI APIs**: Your own AI services

### Productivity

Get organized:

* **HubSpot**: Manage customers
* **Notion**: Take notes and organize
* **Custom Tools**: Your own productivity apps

## Managing Connections

### Adding New Services

Add your own custom connections:

* Choose connection type (STDIO, SSE, or HTTP)
* Enter your API keys or tokens
* Set up any special settings
* Test it before saving

### Checking Status

See how your connections are doing:

* Check if they're connected
* See how many tools are available
* Get alerts if something's wrong
* Automatic reconnection if disconnected

### Editing Connections

Manage your existing connections:

* Update login info
* Delete ones you don't use
* Manage multiple at once
* Save and restore settings

## Using Tools

### Finding Tools

Look through available actions:

* See all available tools
* Search by name or type
* See what info each tool needs
* Read instructions for each tool

### Running Tools Safely

Execute tools with safety checks:

* Review before running
* Check that inputs are correct
* Auto-cancel after 30 seconds
* Trust certain tools to run automatically

### Tracking Usage

See what you've done:

* History of all actions
* How long things took
* Errors and problems
* Most-used tools

## Tips for Success

<Callout type="info">
  **Safety First**: Always check what a tool will do before approving it, especially if it changes data.
</Callout>

<Callout type="tip">
  **Start Simple**: Use ready-made connections first, then add custom ones later.
</Callout>

<Callout type="warning">
  **Keep Secrets Safe**: Store API keys securely. MCP keeps everything on your computer and doesn't send it anywhere.
</Callout>

## Fixing Problems

### Can't Connect

Common connection problems:

* **No internet**: Check your internet and firewall
* **Wrong password**: Check your API keys
* **Service down**: Check if the service is working
* **Wrong settings**: Double-check your URLs and settings

### Tools Won't Run

Problems running tools:

* **Timeout**: Tools cancel after 30 seconds
* **Wrong info**: Check required fields
* **No permission**: Make sure your API key has permission
* **Too many requests**: Wait a bit and try again

### Running Slow

Make things faster:

* Reuse connections
* Save frequently-used data
* Do multiple things at once when possible
* Watch for slow spots

## Examples

### Database Example

```typescript theme={null}
// Get user data from Supabase
const users = await mcp.executeTool('supabase', 'query_users', {
  table: 'users',
  filter: { status: 'active' }
});
```

### Payment Example

```typescript theme={null}
// Process a payment with Stripe
const payment = await mcp.executeTool('stripe', 'create_payment_intent', {
  amount: 1000,
  currency: 'usd',
  customer_id: 'cus_123'
});
```

### AI Example

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