JDoodle.ai docs

Appearance

JDoodle AI MCP ​

JDoodle AI MCP (Model Context Protocol) allows AI assistants like ChatGPT, Claude, and other MCP-supported platforms to connect with JDoodle AI and build real applications through conversational prompts.

Once connected, you can:

  • Generate full projects using natural language

  • Automatically create and modify project files

  • Preview your app instantly with a preview URL

  • Continuously update your project without leaving the AI assistant

  • Deploy and publish your app directly from chat

This guide explains how to connect JDoodle AI MCP with:

  • ChatGPT (Web)

  • Claude (Web + Desktop)

What is JDoodle AI MCP? ​

JDoodle AI MCP is a remote MCP server that enables AI assistants to interact with JDoodle AI’s app-building environment. By connecting JDoodle AI MCP, your AI assistant can:

  • Write and update project files

  • Generate frontend + backend code

  • Maintain project state across multiple prompts

  • Provide a live preview link

  • Deploy your project and generate a published URL

This makes JDoodle AI a true conversational app builder rather than a one-time code generator.

Supported Platforms (MCP-Compatible Services) ​

JDoodle AI MCP works with services and tools that support MCP, including:

  • Gemini CLI

  • Claude Desktop

  • Claude Code

  • Claude Web

  • ChatGPT (Web only)

  • Codex

  • Le Chat (Mistral AI)

Prerequisites ​

Before connecting JDoodle AI MCP, make sure you have:

  • A valid JDoodle AI account

  • JDoodle AI Client ID and Client Secret

  • A supported AI platform account:

    • ChatGPT account

    • Claude Pro / Paid Plan (required for connectors)

Connecting JDoodle AI MCP with ChatGPT (Web) ​

This method works on ChatGPT Web.

Step 1: Enable Developer Mode in ChatGPT ​

  1. Open ChatGPT

  2. Click your profile icon

  3. Go to Settings

  4. Navigate to Apps

    • You can also open Apps from the left sidebar and click the settings icon

  5. Open Advanced Settings

  6. Toggle Developer Mode ON

Step 2: Create a New App ​

  1. Click Create App

  2. Enter an App Name (example: JDoodle AI)

  3. Add the MCP server URL:

https://jdoodle.ai/mcp/sse ​

Step 3: Add JDoodle AI Credentials ​

To get credentials:

  1. Log in to JDoodle AI

  2. Click your profile icon

  3. Go to Settings

  4. Select Manage Credentials

  5. Copy:

    • Client ID

    • Client Secret

Now return to ChatGPT and paste the credentials into the authentication section.

  1. Confirm by selecting:

I understand and want to continue

  1. Click Create

ChatGPT will take a few seconds to create the app.

Step 4: Grant Access Permission ​

After app creation, JDoodle AI will prompt you to grant ChatGPT access.

  1. Click Accept

Once accepted, your connection is complete.

JDoodle AI MCP is now connected to ChatGPT.

Step 5: Start Using JDoodle AI MCP in ChatGPT ​

  1. Open a new chat

  2. Type @

  3. Search for JDoodle AI

  4. Select the JDoodle AI connector

Now you can begin building.

Example prompt:

Build a website with today’s date. ​

Step 6: Approve File Access (If Prompted) ​

During project creation, ChatGPT may request permission to write files into the project.

Approve the request by selecting:

Allow / Write Files

Step 7: Preview the App ​

Once the project is generated, ChatGPT will provide a Preview Link.

  1. Click the preview link

  2. Select Open Link

  3. Your app will open in a new tab

Continuous Updates in ChatGPT (Key Feature) ​

JDoodle AI MCP is not a one-time generation tool.

You can continue updating the same project directly inside ChatGPT by asking for changes like:

Make the website responsive and add a hero section.

The preview link remains the same and updates automatically.

Deploying / Publishing via ChatGPT ​

When your app is ready, ask ChatGPT:

Deploy this project.

or

Publish my app.

ChatGPT will deploy the app and provide a published URL.

Connecting JDoodle AI MCP with Claude (Web + Desktop) ​

JDoodle AI MCP works with both:

  • Claude Web

  • Claude Desktop

Note: Claude requires a Pro / Paid Plan to use custom connectors.

Step 1: Open Claude Settings ​

  1. Open Claude

  2. Click your profile icon

  3. Select Settings

Step 2: Add a Custom Connector ​

  1. In Settings, open Connectors (left sidebar)

  2. Click Add Custom Connector

  3. Enter the connector name:

Example:

JDoodle AI

  1. Add the Remote MCP Server URL:

https://jdoodle.ai/mcp/sse ​

Step 3: Add Authentication Credentials ​

  1. Click Advanced Settings

  2. Add:

    • Client ID

    • Client Secret

To get credentials:

  1. Log in to JDoodle AI

  2. Click your profile icon

  3. Go to Settings

  4. Select Manage Credentials

  5. Copy Client ID and Client Secret

Paste them into Claude Advanced Settings.

  1. Click Add

Step 4: Connect and Grant Access ​

Once the connector is added:

  1. Click Connect

  2. JDoodle AI will prompt you to grant Claude access

  3. Click Accept

JDoodle AI MCP is now connected to Claude.

Step 5: Enable JDoodle AI Connector in a Chat ​

To use JDoodle AI MCP inside Claude:

  1. Start a new chat

  2. Click the Plus (+) icon

  3. Scroll down to Connectors

  4. Select JDoodle AI

  5. Toggle it ON

Step 6: Call JDoodle AI in Claude ​

In the chat input, type:

/jdoodle

(or select JDoodle AI using the slash command menu)

Now Claude is ready to build using JDoodle AI MCP.

Step 7: Build an App Using Claude ​

Example:

Build a landing page with today’s date and a signup button.

Claude will begin generating the project using JDoodle AI MCP.

Step 8: Approve Permissions (If Prompted) ​

Claude may ask you to allow certain actions.

Choose:

Always Allow

This ensures smooth project generation and file updates.

Step 9: Preview the App ​

Once the project is created, Claude provides a preview link.

  1. Click the preview link

  2. Select Open Link

  3. View your project in a new browser tab

The preview updates automatically as you continue making changes.

Continuous Updates in Claude (Key Feature) ​

You can keep improving your app inside the same Claude chat.

Example follow-up prompts:

Add a testimonials section.
Change the theme to dark mode.
Make the button animated.

All changes are applied directly, and the preview link updates automatically.

Deploying / Publishing via Claude ​

When the app is ready, ask Claude:

Deploy this app.

or

Publish my project.

Claude will deploy the app and share a published URL.

Why JDoodle AI MCP is Different ​

Most AI tools generate code once and require you to export or manually manage it afterward.

JDoodle AI MCP provides a continuous workflow:

  • You build inside ChatGPT or Claude

  • You preview through a live preview link

  • You make updates conversationally

  • The preview updates automatically

  • You deploy directly when ready

No additional editor, whiteboarding tool, or external platform is required.

Troubleshooting ​

Connector Not Showing in ChatGPT ​

  • Ensure Developer Mode is enabled

  • Confirm the app was created successfully in Apps settings

  • Refresh ChatGPT and try again

Claude Connector Not Available ​

  • Claude requires a Pro / Paid Plan

  • Make sure the connector is enabled in the chat using the Plus (+) menu

Authentication Errors ​

  • Double-check Client ID and Client Secret

  • Re-copy credentials from JDoodle AI Settings → Manage Credentials

  • Reconnect the connector after updating credentials

  • Ensure you approved file write permissions

  • Retry the build prompt

  • Check if the browser is blocking popups

Support ​

If you need help, contact the JDoodle AI team:

📩 [email protected]