Your first editable SmartArt

Claude (web & desktop)

1. Open NativeDiagram in the Claude directory and click Connect.
2. Sign in to NativeDiagram and choose Allow.
3. In a chat, enable it from the + menu → Connectors.

On Team and Enterprise, an owner may need to add it under Organization settings → Connectors first. Claude Code signed in with the same Claude account picks up the connection automatically.

Claude Code

Already connected NativeDiagram in Claude? Claude Code signed in with the same Claude account picks up that connection automatically; check /mcp. For the skill and connection together, use the development plugin in step 3 below. After loading it, run /mcp, select its NativeDiagram server, and choose Authenticate.

claude mcp add --transport http nativediagram https://nativediagram.com/mcp

ChatGPT

1. Open Settings → Apps (called Plugins or Connectors on some plans) → Advanced settings and turn on Developer mode.
2. Choose Create, enter the name and the MCP server URL, and select OAuth authentication.
3. Confirm, sign in, and choose Allow. Enable it in a chat from the tools menu.

Developer mode availability depends on your ChatGPT plan and workspace settings.

OpenAI Codex (CLI, IDE extension & app)

1. In the desktop app, open Settings → MCP servers → Add server.
2. Enter NativeDiagram, select Streamable HTTP, and paste the server URL above.
3. Save, then select Restart. Select Authenticate to sign in to NativeDiagram and allow access.
4. Start a task and type /mcp to check available servers, then send the example below.

In the IDE extension, open the gear menu → MCP servers and restart the extension after saving. See the official setup guide if your interface differs.

codex mcp add nativediagram --url https://nativediagram.com/mcp
codex mcp login nativediagram

[mcp_servers.nativediagram]
url = "https://nativediagram.com/mcp"

Cursor

Add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project):

{
  "mcpServers": {
    "nativediagram": {
      "url": "https://nativediagram.com/mcp"
    }
  }
}

Open Settings → MCP and click Connect next to nativediagram to sign in.

VS Code (GitHub Copilot)

Add to .vscode/mcp.json, or run MCP: Add Server from the Command Palette and choose HTTP:

{
  "servers": {
    "nativediagram": {
      "type": "http",
      "url": "https://nativediagram.com/mcp"
    }
  }
}

Click Start above the server entry and sign in when prompted. Use it in Copilot Chat's Agent mode.

Gemini

Gemini CLI — add to ~/.gemini/settings.json, then run /mcp auth nativediagram:

{
  "mcpServers": {
    "nativediagram": {
      "httpUrl": "https://nativediagram.com/mcp"
    }
  }
}

Gemini app — at gemini.google.com open Settings → Connected Apps → Add a custom app and paste the MCP server URL. Currently limited to personal Google accounts in the US.

Grok

Grok's custom connectors (Business and Enterprise) don't complete OAuth sign-in yet, so use an API key. With the xAI API:

import os
from xai_sdk import Client
from xai_sdk.chat import user
from xai_sdk.tools import mcp

client = Client(api_key=os.environ["XAI_API_KEY"])
chat = client.chat.create(
    model="grok-4.6",
    tools=[mcp(server_url="https://nativediagram.com/mcp", server_label="nativediagram", authorization=os.environ["DIAGRAM_API_KEY"])],
)
chat.append(user("Use the Native SmartArt skill if available, and use NativeDiagram to create native, editable SmartArt with these steps: Plan, Build, Test. Provide Word and PowerPoint downloads."))
print(chat.sample().content)

Claude API & OpenAI API

Pass the MCP server URL with an API key. Claude API (Python):

import os
import anthropic

client = anthropic.Anthropic()
response = client.beta.messages.create(
    model="claude-opus-5",
    max_tokens=16000,
    betas=["mcp-client-2025-11-20"],
    mcp_servers=[{
        "type": "url",
        "url": "https://nativediagram.com/mcp",
        "name": "nativediagram",
        "authorization_token": os.environ["DIAGRAM_API_KEY"],
    }],
    tools=[{"type": "mcp_toolset", "mcp_server_name": "nativediagram"}],
    messages=[{"role": "user", "content": "Use the Native SmartArt skill if available, and use NativeDiagram to create native, editable SmartArt with these steps: Plan, Build, Test. Provide Word and PowerPoint downloads."}],
)
print(response.content)

OpenAI Responses API (Python):

import os
from openai import OpenAI

client = OpenAI()
response = client.responses.create(
    model="gpt-5",
    tools=[{
        "type": "mcp",
        "server_label": "nativediagram",
        "server_url": "https://nativediagram.com/mcp",
        "headers": {"Authorization": f"Bearer {os.environ['DIAGRAM_API_KEY']}"},
        "require_approval": "never",
    }],
    input="Use the Native SmartArt skill if available, and use NativeDiagram to create native, editable SmartArt with these steps: Plan, Build, Test. Provide Word and PowerPoint downloads.",
)
print(response.output_text)

Any other MCP client that supports custom headers works the same way: Authorization: Bearer nd_…