> ## Documentation Index
> Fetch the complete documentation index at: https://opensource.weam.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Configuration Workflow

Frontend process for integrating and managing third-party services using Model Context Protocol (MCP).

## Overview

MCP provides standardized connections between AI systems and external data sources, storing service data per user for secure access management.

## Integration Steps

### 1. Environment Setup

* Configure service environment variables:
  * `Client ID`
  * `Client Secret`
* Set up service configuration:
  * OAuth endpoints
  * Required scopes

### 2. OAuth Flow Implementation

**Initiation:**

* User clicks "Connect"
* Generate OAuth `state`
* Redirect to service OAuth URL

**Callback Processing:**

* Service redirects with `authorization code`
* Frontend exchanges code for access token
* Verify OAuth `state`
* Handle errors and display feedback

**Token Storage:**

* Encrypt access token
* Store with user information in database

### 3. Database Management

**Storage Structure:**

```json theme={null}
mcpdata: {
  SLACK: {},
  GITHUB: {},
  GOOGLE_DRIVE: {}
}
```

**Disconnect Process:**

* Remove specific service token from user collection
* Update user's MCP data object

### 4. State Management

**Redux Store:**

* Connection status tracking
* Loading states management
* MCP data persistence

**Secure Storage:**

* Encrypted token storage
* User service selections
* Tool configurations per service

### 5. Tool Integration

**Service Mapping:**

* Define available tools per service (Slack, GitHub, etc.)
* Configure UI service selection options
* Map service codes to tool functionality

**Tool Configuration:**

* Service-specific tool settings
* Parameter requirements per tool
* Permission management

### 6. Chat Interface Integration

**Service Loading:**

* Load connected MCP services on chat page load
* Display available tools grouped by service
* Dynamic tool selection interface

**Query Processing:**

* User selects tool from available list
* Collect required parameters via dynamic forms
* Submit query for tool invocation
* Display results inline in chat interface

### 7. Disconnect Workflow

**User Interface:**

* "Disconnect" button in service configuration modal
* Confirmation dialog to prevent accidental disconnection
* User confirmation required

**State Updates:**

* Display "Disconnecting..." loading state
* Disable disconnect button during process
* Show visual feedback (spinner, progress indicators)

**Backend Communication:**

* POST request to backend with:
  * User authentication credentials
  * Target service information
* Handle API response or error states

## Security Considerations

* Token encryption at rest
* Secure OAuth state validation
* Protected API endpoints
* User-specific data isolation

## Supported Services

* **Slack**: Channel management, messaging, user information
* **GitHub**: Repository operations, issue tracking, pull requests
* **Google Drive**: File management, content retrieval
* **Gmail**: Email operations, label management
* **Google Calendar**: Event management, calendar operations