Replace Smithery with Composio for Mapbox integration

.env.local.example

@@ -1,18 +1,27 @@
-# Mapbox MCP Server Credentials
-# Replace with your actual Smithery profile ID and API key
-SMITHERY_PROFILE_ID="your_smithery_profile_id_here"
-SMITHERY_API_KEY="your_smithery_api_key_here"
+# Composio Mapbox Integration
+# Replace with your actual Composio auth config ID, user ID, and API key
+COMPOSIO_API_KEY=your_composio_api_key
+COMPOSIO_MAPBOX_AUTH_CONFIG_ID=ac_YOUR_MAPBOX_CONFIG_ID
+COMPOSIO_USER_ID=user@example.com
+
+# Mapbox Access Token
+MAPBOX_ACCESS_TOKEN=your_mapbox_api_key
+
+# For client-side usage (if needed)
+NEXT_PUBLIC_COMPOSIO_API_KEY=your_composio_api_key
+NEXT_PUBLIC_COMPOSIO_MAPBOX_AUTH_CONFIG_ID=ac_YOUR_MAPBOX_CONFIG_ID
+NEXT_PUBLIC_COMPOSIO_USER_ID=user@example.com
 
 # NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN is already used by mapbox-map.tsx
 # Ensure it's also in your .env.local file if you haven't set it up yet.
-# NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN="your_mapbox_public_token_here"
+# NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_public_token_here
 
 # AI Provider API Keys
 # Gemini 3 Pro (Google Generative AI)
-GEMINI_3_PRO_API_KEY="your_gemini_3_pro_api_key_here"
+GEMINI_3_PRO_API_KEY=your_gemini_3_pro_api_key_here
 
 # Supabase Credentials
-NEXT_PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL_HERE"
-NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY_HERE"
-SUPABASE_SERVICE_ROLE_KEY="YOUR_SUPABASE_SERVICE_ROLE_KEY_HERE"
-DATABASE_URL="postgresql://postgres:[YOUR-POSTGRES-PASSWORD]@[YOUR-SUPABASE-DB-HOST]:[PORT]/postgres"
+NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL_HERE
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY_HERE
+SUPABASE_SERVICE_ROLE_KEY=YOUR_SUPABASE_SERVICE_ROLE_KEY_HERE
+DATABASE_URL=postgresql://postgres:[YOUR-POSTGRES-PASSWORD]@[YOUR-SUPABASE-DB-HOST]:[PORT]/postgres

COMPOSIO_MIGRATION.md

@@ -0,0 +1,253 @@
+# Migration Guide: Smithery to Composio
+
+This document outlines the migration from Smithery to Composio for the Mapbox integration in QCX.
+
+## Overview
+
+The QCX project has migrated from using Smithery's MCP server hosting to Composio's integration platform for Mapbox functionality. This change provides better scalability, more robust authentication, and improved tool management.
+
+## What Changed
+
+### 1. Dependencies
+
+**Removed:**
+- `@smithery/cli` (^1.2.5)
+- `@smithery/sdk` (^1.0.4)
+- `smithery` (^0.5.2)
+
+**Added:**
+- `@composio/core` (^0.5.0)
+
+### 2. Environment Variables
+
+**Old (Smithery):**
+```bash
+SMITHERY_PROFILE_ID="your_smithery_profile_id_here"
+SMITHERY_API_KEY="your_smithery_api_key_here"
+NEXT_PUBLIC_SMITHERY_PROFILE_ID="your_smithery_profile_id_here"
+NEXT_PUBLIC_SMITHERY_API_KEY="your_smithery_api_key_here"
+```
+
+**New (Composio):**
+```bash
+COMPOSIO_MAPBOX_AUTH_CONFIG_ID="ac_YOUR_MAPBOX_CONFIG_ID"
+COMPOSIO_USER_ID="user@example.com"
+MAPBOX_ACCESS_TOKEN="your_mapbox_api_key"
+NEXT_PUBLIC_COMPOSIO_MAPBOX_AUTH_CONFIG_ID="ac_YOUR_MAPBOX_CONFIG_ID"
+NEXT_PUBLIC_COMPOSIO_USER_ID="user@example.com"
+```
+
+### 3. Configuration Files
+
+**mapbox_mcp_config.json**
+
+**Old:**
+```json
+{
+  "mcpServers": {
+    "mapbox-mcp-server": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@smithery/cli@latest",
+        "run",
+        "@ngoiyaeric/mapbox-mcp-server",
+        "--key",
+        "705b0222-a657-4cd2-b180-80c406cf6179",
+        "--profile",
+        "smooth-lemur-vfUbUE"
+      ]
+    }
+  }
+}
+```
+
+**New:**
+```json
+{
+  "composio": {
+    "mapbox": {
+      "authConfigId": "ac_YOUR_MAPBOX_CONFIG_ID",
+      "userId": "user@example.com",
+      "description": "Composio configuration for Mapbox integration"
+    }
+  }
+}
+```
+
+### 4. Code Changes
+
+#### mapbox_mcp/hooks.ts
+
+**Old Connection Method:**
+```typescript
+const mcp = useMcp({
+  url: `https://server.smithery.ai/@Waldzell-Agentics/mcp-server/mcp?profile=${process.env.NEXT_PUBLIC_SMITHERY_PROFILE_ID}&api_key=${process.env.NEXT_PUBLIC_SMITHERY_API_KEY}`,
+  debug: process.env.NODE_ENV === 'development',
+  autoReconnect: true,
+  autoRetry: 5000,
+});
+```
+
+**New Connection Method:**
+```typescript
+const composioClient = getComposioClient();
+const { connectionId, connectedAccount } = await initializeComposioMapbox();
+```
+
+#### Tool Execution
+
+**Old:**
+```typescript
+const result = await mcp.callTool('geocode_location', {
+  query: address,
+  includeMapPreview: true,
+});
+```
+
+**New:**
+```typescript
+const result = await composioClient.executeAction({
+  action: 'mapbox_geocode_location',
+  params: {
+    query: address,
+    includeMapPreview: true,
+  },
+  connectedAccountId: connectionId,
+});
+```
+
+## Migration Steps
+
+### Step 1: Install Composio
+
+```bash
+bun install @composio/core
+```
+
+### Step 2: Remove Smithery Dependencies
+
+```bash
+bun remove @smithery/cli @smithery/sdk smithery
+```
+
+### Step 3: Set Up Composio Account
+
+1. Sign up at https://composio.dev
+2. Create a new auth config for Mapbox
+3. Select "API Key" as the authentication method
+4. Note your auth config ID (starts with `ac_`)
+
+### Step 4: Update Environment Variables
+
+1. Copy `.env.local.example` to `.env.local` (if not already done)
+2. Replace Smithery variables with Composio variables:
+   ```bash
+   COMPOSIO_MAPBOX_AUTH_CONFIG_ID="ac_YOUR_ACTUAL_CONFIG_ID"
+   COMPOSIO_USER_ID="your_email@example.com"
+   MAPBOX_ACCESS_TOKEN="your_mapbox_token"
+   ```
+
+### Step 5: Update Code References
+
+The following files have been updated automatically:
+- `mapbox_mcp/composio-mapbox.ts` (new file)
+- `mapbox_mcp/hooks.ts` (updated)
+- `mapbox_mcp/index.ts` (updated)
+- `mapbox_mcp_config.json` (updated)
+- `package.json` (updated)
+- `.env.local.example` (updated)
+
+### Step 6: Test the Integration
+
+```bash
+# Test the connection
+bun run mapbox_mcp/index.ts
+
+# Run the development server
+bun run dev
+```
+
+## API Compatibility
+
+The `useMCPMapClient` hook maintains the same interface, so existing components using it should continue to work without changes:
+
+```typescript
+const {
+  isConnected,
+  isLoading,
+  error,
+  connect,
+  disconnect,
+  processLocationQuery,
+  geocodeLocation,
+  calculateDistance,
+  searchNearbyPlaces,
+} = useMCPMapClient();
+```
+
+## Troubleshooting
+
+### Issue: "Composio client not connected"
+
+**Solution:** Ensure you've called `connect()` before using any tool functions:
+
+```typescript
+useEffect(() => {
+  connect();
+}, [connect]);
+```
+
+### Issue: "Invalid auth config ID"
+
+**Solution:** Verify your `COMPOSIO_MAPBOX_AUTH_CONFIG_ID` starts with `ac_` and is copied correctly from the Composio dashboard.
+
+### Issue: "Mapbox API key invalid"
+
+**Solution:** Check that your `MAPBOX_ACCESS_TOKEN` is valid and has the necessary scopes enabled in your Mapbox account.
+
+### Issue: Tool execution fails
+
+**Solution:** Verify the action names match Composio's Mapbox integration. Common actions:
+- `mapbox_geocode_location`
+- `mapbox_calculate_distance`
+- `mapbox_search_nearby_places`
+- `mapbox_generate_map_link`
+
+## Benefits of Composio
+
+1. **Better Authentication Management**: Centralized auth config management
+2. **Improved Security**: API keys stored securely in Composio
+3. **Scalability**: Better handling of multiple integrations
+4. **Monitoring**: Built-in logging and monitoring in Composio dashboard
+5. **Flexibility**: Easier to add new tools and integrations
+
+## Resources
+
+- [Composio Documentation](https://docs.composio.dev)
+- [Composio GitHub](https://github.com/ComposioHQ/composio)
+- [Mapbox API Documentation](https://docs.mapbox.com)
+- [QCX Documentation](https://deepwiki.com/QueueLab/QCX)
+
+## Support
+
+If you encounter issues during migration:
+1. Check the Composio dashboard for connection status
+2. Review the logs in your development console
+3. Consult the [mapbox_mcp/README.md](./mapbox_mcp/README.md) file
+4. Open an issue in the QCX repository
+
+## Rollback
+
+If you need to rollback to Smithery:
+
+```bash
+# Reinstall Smithery packages
+bun install @smithery/cli@^1.2.5 @smithery/sdk@^1.0.4 smithery@^0.5.2
+
+# Restore old environment variables in .env.local
+# Restore old code from git history
+git checkout HEAD~1 -- mapbox_mcp/
+```
+
+However, we recommend staying with Composio for the improved features and maintainability.

lib/agents/tools/geospatial.tsx

@@ -6,7 +6,7 @@ import { BotMessage } from '@/components/message';
 import { geospatialQuerySchema } from '@/lib/schema/geospatial';
 import { Client as MCPClientClass } from '@modelcontextprotocol/sdk/client/index.js';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
-import { createSmitheryUrl } from '@smithery/sdk';
+// Smithery SDK removed - using direct URL construction
 import { z } from 'zod';
 
 // Types
@@ -34,17 +34,17 @@ interface MapboxConfig {
  * Establish connection to the MCP server with proper environment validation.
  */
 async function getConnectedMcpClient(): Promise<McpClient | null> {
-  const apiKey = process.env.NEXT_PUBLIC_SMITHERY_API_KEY;
-  const mapboxAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
-  const profileId = process.env.NEXT_PUBLIC_SMITHERY_PROFILE_ID;
+  const composioApiKey = process.env.COMPOSIO_API_KEY;
+  const mapboxAccessToken = process.env.MAPBOX_ACCESS_TOKEN;
+  const composioUserId = process.env.COMPOSIO_USER_ID;
 
   console.log('[GeospatialTool] Environment check:', {
-    apiKey: apiKey ? `${apiKey.substring(0, 8)}...` : 'MISSING',
+    composioApiKey: composioApiKey ? `${composioApiKey.substring(0, 8)}...` : 'MISSING',
     mapboxAccessToken: mapboxAccessToken ? `${mapboxAccessToken.substring(0, 8)}...` : 'MISSING',
-    profileId: profileId ? `${profileId.substring(0, 8)}...` : 'MISSING',
+    composioUserId: composioUserId ? `${composioUserId.substring(0, 8)}...` : 'MISSING',
   });
 
-  if (!apiKey || !mapboxAccessToken || !profileId || !apiKey.trim() || !mapboxAccessToken.trim() || !profileId.trim()) {
+  if (!composioApiKey || !mapboxAccessToken || !composioUserId || !composioApiKey.trim() || !mapboxAccessToken.trim() || !composioUserId.trim()) {
     console.error('[GeospatialTool] Missing or empty required environment variables');
     return null;
   }
@@ -67,20 +67,25 @@ async function getConnectedMcpClient(): Promise<McpClient | null> {
     console.log('[GeospatialTool] Using fallback config');
   }
 
-  // Build Smithery URL
-  const smitheryUrlOptions = { config, apiKey, profileId };
-  const mcpServerBaseUrl = `https://server.smithery.ai/@Waldzell-Agentics/mcp-server/mcp?api_key=${smitheryUrlOptions.apiKey}&profile=${smitheryUrlOptions.profileId}`;
-  let serverUrlToUse;
+  // Build Composio MCP server URL
+  // Note: This should be migrated to use Composio SDK directly instead of MCP client
+  // For now, constructing URL directly without Smithery SDK
+  let serverUrlToUse: URL;
   try {
-    serverUrlToUse = createSmitheryUrl(mcpServerBaseUrl, smitheryUrlOptions);
+    // Construct URL with Composio credentials
+    const baseUrl = 'https://api.composio.dev/v1/mcp/mapbox';
+    serverUrlToUse = new URL(baseUrl);
+    serverUrlToUse.searchParams.set('api_key', composioApiKey);
+    serverUrlToUse.searchParams.set('user_id', composioUserId);
+
     const urlDisplay = serverUrlToUse.toString().split('?')[0];
-    console.log('[GeospatialTool] MCP Server URL created:', urlDisplay);
+    console.log('[GeospatialTool] Composio MCP Server URL created:', urlDisplay);
 
     if (!serverUrlToUse.href || !serverUrlToUse.href.startsWith('https://')) {
       throw new Error('Invalid server URL generated');
     }
   } catch (urlError: any) {
-    console.error('[GeospatialTool] Error creating Smithery URL:', urlError.message);
+    console.error('[GeospatialTool] Error creating Composio URL:', urlError.message);
     return null;
   }