diff --git a/docs/AI/images/claude-desktop-add-connector-advanced.png b/docs/AI/images/claude-desktop-add-connector-advanced.png new file mode 100644 index 0000000..66bcbb0 Binary files /dev/null and b/docs/AI/images/claude-desktop-add-connector-advanced.png differ diff --git a/docs/AI/images/claude-desktop-add-connector.png b/docs/AI/images/claude-desktop-add-connector.png new file mode 100644 index 0000000..70465ab Binary files /dev/null and b/docs/AI/images/claude-desktop-add-connector.png differ diff --git a/docs/AI/images/claude-desktop-connectors.png b/docs/AI/images/claude-desktop-connectors.png new file mode 100644 index 0000000..2cb6416 Binary files /dev/null and b/docs/AI/images/claude-desktop-connectors.png differ diff --git a/docs/AI/images/claude-desktop-settings.png b/docs/AI/images/claude-desktop-settings.png new file mode 100644 index 0000000..1a5f83f Binary files /dev/null and b/docs/AI/images/claude-desktop-settings.png differ diff --git a/docs/AI/images/df-ai-services-list.png b/docs/AI/images/df-ai-services-list.png new file mode 100644 index 0000000..8b4700f Binary files /dev/null and b/docs/AI/images/df-ai-services-list.png differ diff --git a/docs/AI/images/df-mcp-api-docs.png b/docs/AI/images/df-mcp-api-docs.png new file mode 100644 index 0000000..7c82fa4 Binary files /dev/null and b/docs/AI/images/df-mcp-api-docs.png differ diff --git a/docs/AI/images/df-mcp-create-form-with-options.png b/docs/AI/images/df-mcp-create-form-with-options.png new file mode 100644 index 0000000..fe9cf82 Binary files /dev/null and b/docs/AI/images/df-mcp-create-form-with-options.png differ diff --git a/docs/AI/images/df-mcp-service-config.png b/docs/AI/images/df-mcp-service-config.png new file mode 100644 index 0000000..ea74052 Binary files /dev/null and b/docs/AI/images/df-mcp-service-config.png differ diff --git a/docs/AI/images/df-mcp-service-type-dropdown.png b/docs/AI/images/df-mcp-service-type-dropdown.png new file mode 100644 index 0000000..588f2ea Binary files /dev/null and b/docs/AI/images/df-mcp-service-type-dropdown.png differ diff --git a/docs/AI/mcp-service-creation.md b/docs/AI/mcp-service-creation.md index f7cbff4..d24c8a6 100644 --- a/docs/AI/mcp-service-creation.md +++ b/docs/AI/mcp-service-creation.md @@ -88,4 +88,114 @@ Show me tables in my database/list tables ``` ![mcp-example-list](/img/api-generation-and-connections/api-types/utility/creating-mcp-server/mcp-example-list.png) -The Agent will connect to the MCP server using the mcp_endpoint and return the available database tables, allowing you to interact with your data directly from ChatGPT. \ No newline at end of file +The Agent will connect to the MCP server using the mcp_endpoint and return the available database tables, allowing you to interact with your data directly from ChatGPT. + +### Claude Desktop + +Claude Desktop supports remote MCP servers with OAuth authentication through its **Connectors** feature. DreamFactory fully supports Claude's Dynamic Client Registration (DCR), making setup straightforward — no manual OAuth credential entry is required. + +**Requirements:** +- Claude Pro, Max, Team, or Enterprise subscription +- Claude Desktop application (v1.5+) installed +- Your DreamFactory MCP endpoint URL (found in the API Docs tab after creating your MCP service) + +#### Step 1: Create Your MCP Service in DreamFactory + +First, ensure you have an MCP service configured in DreamFactory. Navigate to the **AI** tab in the DreamFactory admin to see your existing MCP services: + +![DreamFactory AI tab showing the list of configured MCP services with their name, label, description, and type](images/df-ai-services-list.png) + +To create a new MCP service, click the purple **+** button. Select **MCP Server Service** as the service type from the dropdown: + +![Service Type dropdown expanded showing the MCP Server Service option](images/df-mcp-service-type-dropdown.png) + +Fill in the service details — **Namespace** (used in the endpoint URL), **Label**, and **Description**. Under **Advanced Options**, select the database service to expose via the **API Name** dropdown. The **OAuth Client ID** and **OAuth Client Secret** are auto-generated: + +![MCP service creation form with MCP Server Service selected, showing Namespace, Label, Description fields and the Advanced Options section with API Name, OAuth Client ID, and OAuth Client Secret](images/df-mcp-create-form-with-options.png) + +Click **Save** to create your MCP service. You can review the configuration at any time by clicking on the service in the AI list: + +![Saved MCP service detail view showing the completed configuration with namespace, label, description, API Name set to a database service, and the auto-generated OAuth credentials](images/df-mcp-service-config.png) + +#### Step 2: Get Your MCP Endpoint URL + +After saving, go to the **API Docs** tab and run the GET request to find your `mcp_endpoint`. The API Docs page shows the available endpoints for your MCP service, including the GET endpoint that returns the `mcp_endpoint` URL: + +![API Docs page for the MCP service showing the Swagger/OAS3 documentation with the GET endpoint to retrieve MCP service configuration](images/df-mcp-api-docs.png) + +Your `mcp_endpoint` will look like: + +``` +https://your-dreamfactory-instance.com/mcp/your-service-name +``` + +#### Step 3: Connect Claude Desktop + +1. Open Claude Desktop and go to **Settings**. You'll see the Settings sidebar with several options. Click on **Connectors** in the left navigation: + +![Claude Desktop Settings page showing the sidebar with General, Account, Privacy, Billing, Usage, Capabilities, Connectors, and Claude Code options](images/claude-desktop-settings.png) + +2. On the Connectors page, you'll see both built-in connectors (Google Drive, Gmail, GitHub, etc.) and any custom MCP connectors you've previously added. Scroll down past the built-in connectors to find the custom connector section, then click **Add Connector**: + +![Claude Desktop Connectors page showing built-in connectors like Google Drive, Gmail, Google Calendar, and GitHub, along with custom MCP connectors at the bottom](images/claude-desktop-connectors.png) + +3. In the **Add custom connector** dialog, enter a **Name** for your connector (e.g., "DreamFactory MCP") and paste your DreamFactory `mcp_endpoint` URL into the **Remote MCP server URL** field: + +![Add custom connector dialog with Name and Remote MCP server URL fields, Advanced settings toggle, and Add button](images/claude-desktop-add-connector.png) + + You can optionally expand **Advanced settings** to manually provide OAuth Client ID and OAuth Client Secret, though DreamFactory's DCR support means these are typically not required: + +![Add custom connector dialog with Advanced settings expanded, showing optional OAuth Client ID and OAuth Client Secret fields](images/claude-desktop-add-connector-advanced.png) + +4. Click **Add**. Claude will automatically: + - Discover the OAuth authorization and token endpoints + - Register itself as an OAuth client via Dynamic Client Registration (DCR) + - Open a browser window for you to log in to DreamFactory + +5. Log in with your DreamFactory credentials. After successful authentication, you'll be redirected back to Claude Desktop. + +6. Your connector is now active. You can start using natural language to interact with your database: + ``` + Show me all tables in the database + List the first 10 records from the customers table + ``` + +:::tip +Claude Desktop handles OAuth automatically through DCR — you do **not** need to manually enter the Client ID or Client Secret. Just provide the MCP endpoint URL and Claude takes care of the rest. +::: + +**Troubleshooting:** + +| Issue | Solution | +|-------|----------| +| **"Redirect URI not registered"** | Ensure your DreamFactory instance is accessible over HTTPS. Claude uses `https://claude.ai/api/mcp/auth_callback` as its redirect URI, which is automatically registered during DCR. | +| **Connection timeout** | Verify your DreamFactory instance is publicly accessible or that Claude can reach it through your network configuration. | +| **Authentication failed** | Check that your DreamFactory user account has appropriate permissions to access the database service exposed through MCP. | +| **"Client registration failed"** | Ensure the MCP service is active (green toggle) in the DreamFactory AI tab and that the server supports the DCR endpoint at `/.well-known/oauth-authorization-server`. | + +### Cursor + +Cursor IDE supports MCP servers for AI-assisted development. Unlike Claude Desktop, Cursor requires manual OAuth credential configuration. + +**Setup Steps:** + +1. Open Cursor Settings and navigate to the **MCP** configuration section (under **Features**). + +2. Click **Add new MCP server** and select **SSE** as the transport type. + +3. Enter your DreamFactory MCP endpoint URL in the **Server URL** field: + ``` + https://your-dreamfactory-instance.com/mcp/your-service-name + ``` + +4. Configure OAuth credentials from your DreamFactory MCP service's **Advanced Options**: + - **Client ID**: Copy from the **OAuth Client ID** field in DreamFactory + - **Client Secret**: Copy from the **OAuth Client Secret** field in DreamFactory + + You can find these values in the DreamFactory admin under **AI > your MCP service > Advanced Options**: + + ![MCP service Advanced Options showing OAuth Client ID and OAuth Client Secret fields](images/df-mcp-service-config.png) + +5. Save and connect. Cursor will prompt you to authenticate via your DreamFactory login page. + +6. Once connected, you can use Cursor's AI features to query and manipulate your database directly from the IDE. \ No newline at end of file diff --git a/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-ai-services-list.png b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-ai-services-list.png new file mode 100644 index 0000000..8b4700f Binary files /dev/null and b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-ai-services-list.png differ diff --git a/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-create-ai-service.png b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-create-ai-service.png new file mode 100644 index 0000000..830fa9e Binary files /dev/null and b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-create-ai-service.png differ diff --git a/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-config-detail.png b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-config-detail.png new file mode 100644 index 0000000..ea74052 Binary files /dev/null and b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-config-detail.png differ diff --git a/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-create-filled.png b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-create-filled.png new file mode 100644 index 0000000..6333274 Binary files /dev/null and b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-mcp-service-create-filled.png differ diff --git a/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-service-type-dropdown.png b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-service-type-dropdown.png new file mode 100644 index 0000000..87961a5 Binary files /dev/null and b/static/img/api-generation-and-connections/api-types/utility/creating-mcp-server/df-service-type-dropdown.png differ