Set up the GrapesJS Studio MCP app

The GrapesJS Studio MCP app lets AI assistants create and edit websites and emails in your GrapesJS Studio workspace. Once connected, you can generate new pages and emails, update existing projects, and work with an interactive editing experience directly from chat.

Before you start

To use the GrapesJS Studio MCP app, you'll need:

• A supported AI assistant:
  • ChatGPT
  • Claude
• A GrapesJS Studio account
• Any GrapesJS Studio plan

When you connect for the first time, you'll be asked to sign in to GrapesJS Studio and allow access to your workspace.

Connect your AI assistant

Each assistant has a slightly different setup flow.

ChatGPT

ChatGPT currently refers to connectors as apps in some parts of the product, so the menu labels may vary slightly. Custom MCP apps/connectors also depend on your ChatGPT plan and workspace settings.

1. Open ChatGPT (web or desktop).
2. In a new chat, click Tools, then select Use connectors.
3. Use the Add sources button to find the GrapesJS Studio connector and go through the process of enabling it.
4. You'll be asked to allow the connector to access your GrapesJS Studio account. Click Allow.

Claude

There are two ways you can use Claude to connect to the GrapesJS Connector: using Claude connectors or configuring an MCP server.

• Claude connectors: This is the easiest and recommended way to connect to the GrapesJS Connector, and is available for the web and desktop versions of Claude.
• MCP server: This is only available on Claude Desktop, and is a manual method for setting up a custom MCP server.

Claude connectors (Recommended)

1. Open Claude (web or desktop).
2. In a new chat, click the Search and tools button, and select Manage connectors.
3. Find the GrapesJS Studio connector and click Connect. If you don't see the connector, click Browse connectors and find it under the Web tab.
4. You'll be asked to allow the connector to access your GrapesJS Studio account. Click Allow.

MCP server (Advanced)

Configuring the GrapesJS Studio Connector as an MCP server requires Node.js 22.16 or later, with npm. If you don't already have Node.js installed, you can install it from https://nodejs.org/en/download.

1. Open Claude Desktop.
2. Open Claude Desktop Settings:
   • On Windows, use the keyboard shortcut Ctrl + ,.
   • On macOS, use the keyboard shortcut Command + ,.
3. Navigate to the Developer tab.
4. Click Edit Config and add the following configuration:

   {
     "mcpServers": {
       "GrapesJS Studio": {
         "command": "npx",
         "args": [
           "-y",
           "mcp-remote@latest",
           "https://app.grapesjs.com/api/mcp"
         ]
       }
     }
   }

For more information, see the MCP quickstart guide.

Restart your Claude Desktop app

1. Make sure you have your web browser open and are logged into your claude.ai account.
2. Restart Claude Desktop app to apply the new settings.
3. The app should open a browser tab to ask you allow the GrapesJS Studio Connector to access your GrapesJS Studio account. Click Allow.

Check the connection

To confirm the connection is working:

1. Look for visual indicators in your AI assistant app. For example, in Claude you should see the GrapesJS Studio connector listed in the Search and tools button near the prompt.

2. Ask a simple question to test the connection. For example:

   How many GrapesJS Studio projects do I have right now?

   If the connection is successful, your assistant should show GrapesJS Studio as an available app/connector and ask you to approve tool usage when needed.