Connect an AI Assistant
Connect your AI assistant to Tailwind’s remote MCP server. OAuth is the recommended setup wherever the client supports it: your client opens Tailwind in a browser, you sign in and approve access, and no API key needs to be copied.
https://mcp.tailwind.aiChoose your client below. If you are building a server-side integration rather than connecting an assistant, use the REST API documentation.
Quick install for coding agents
Section titled “Quick install for coding agents”Using Claude Code, Cursor, or Codex? One command sets up the connection and installs a usage playbook that teaches the agent how Tailwind’s Pins, Boards, and drafts fit together:
npx @tailwind-app/skillsThe installer detects which of those tools you have, asks before writing anything, and prints every file it touches. Pass --dry-run to see the plan without changing a file, or --harness cursor to target one tool. Restart your agent afterwards — MCP configuration is read at startup.
It needs Node 20 or later and has no runtime dependencies. Aside from npx downloading the package from npm the first time — as it would for any package — the installer makes no outbound requests of its own: the playbook ships inside the published package, so nothing is fetched from Tailwind’s servers and a pinned version cannot change underneath you. The source is at github.com/tailwind/skills, and every release is published from that repository’s own CI with npm provenance.
Prefer to configure things yourself? The per-client instructions below do the same job by hand.
claude.ai
Section titled “claude.ai”claude.ai uses a native remote connector and OAuth. Custom remote connectors are currently in beta and available on Pro, Max, Team, and Enterprise plans.
- Open Connectors. In Claude, go to Settings > Connectors.
- Add a custom connector. Choose Add custom connector and enter https://mcp.tailwind.ai. On a Team or Enterprise plan, an org Owner must add the connector.
- Connect Tailwind. Follow the browser prompt to sign in to Tailwind and approve access.
- Enable the connector. Open Connectors from the + menu in a conversation and enable Tailwind.
Claude Desktop
Section titled “Claude Desktop”Claude Desktop can use the same native remote connector and OAuth flow as claude.ai. This remote-connector feature is currently in beta.
- Open Connectors. In Claude Desktop, go to Settings > Connectors.
- Add a custom connector. Enter https://mcp.tailwind.ai as the remote MCP server URL.
- Connect Tailwind. Follow the browser prompt to sign in to Tailwind and approve access.
Legacy API-key fallback
Section titled “Legacy API-key fallback”Use this only if the native remote connector is unavailable in your Claude Desktop installation. It runs mcp-remote through Node.js and stores a Tailwind API key in your local Claude configuration.
- Create a Tailwind API key.
- Open the Claude Desktop configuration file:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
- macOS:
- Add the configuration below and replace
your_api_key_herewith your key. - Quit and reopen Claude Desktop.
{ "mcpServers": { "tailwind": { "command": "npx", "args": [ "-y", "mcp-remote", "https://mcp.tailwind.ai", "--header", "Authorization: Bearer your_api_key_here" ] } }}ChatGPT
Section titled “ChatGPT”ChatGPT connects to Tailwind with OAuth. It cannot use the API-key fallback. Custom MCP apps and write actions are currently in beta on ChatGPT web for Business, Enterprise, and Edu workspaces. A workspace admin or owner must enable developer mode and approve the app before members can use it. Consumer Free, Plus, and Pro accounts cannot add this custom app.
- Enable developer mode. In ChatGPT Settings > Apps > Advanced settings, turn on developer mode. A Business, Enterprise, or Edu workspace admin must enable access for your role first.
- Create the Tailwind app. Choose Create app, enter https://mcp.tailwind.ai, and select OAuth authentication.
- Scan and authorize. Scan the available tools, then sign in to Tailwind and approve access when prompted.
- Use Tailwind in a chat. Start a new chat and select the Tailwind app from the tools menu.
If Create app or developer mode is unavailable in a supported workspace, ask your ChatGPT workspace admin to confirm that custom MCP apps are enabled for your role.
Claude Code
Section titled “Claude Code”Claude Code supports remote HTTP servers and OAuth natively.
One command does all of this for you, including the usage playbook.
- Add the server. Run the command below. Add --scope user before tailwind to make it available across projects.
- Authenticate. In Claude Code, run /mcp, select Tailwind, and follow the browser sign-in flow.
- Verify the connection. Ask Claude to list your Tailwind Pinterest accounts.
claude mcp add --transport http tailwind https://mcp.tailwind.aiClaude Code API-key fallback
Section titled “Claude Code API-key fallback”If OAuth is unavailable, create an API key and add Tailwind again with an authorization header:
claude mcp add --transport http --header 'Authorization: Bearer your_api_key_here' tailwind https://mcp.tailwind.aiCursor
Section titled “Cursor”Cursor supports Streamable HTTP servers and OAuth. The install link contains only Tailwind’s public server URL; Cursor shows the configuration for review before saving it.
One command does all of this for you, including the usage playbook.
- Install the server. Use the Add to Cursor link below and review the remote server configuration before installing.
- Authenticate. When Cursor prompts you, sign in to Tailwind and approve access.
- Verify the connection. Open Cursor's MCP settings and confirm that Tailwind is enabled, then ask about your Tailwind accounts in chat.
To configure Cursor manually, save this in ~/.cursor/mcp.json or your project’s .cursor/mcp.json. Cursor starts the OAuth flow when it connects.
{ "mcpServers": { "tailwind": { "url": "https://mcp.tailwind.ai" } }}Cursor API-key fallback
Section titled “Cursor API-key fallback”If OAuth is unavailable, create an API key, use this configuration, and replace your_api_key_here with your key:
{ "mcpServers": { "tailwind": { "url": "https://mcp.tailwind.ai", "headers": { "Authorization": "Bearer your_api_key_here" } } }}Codex supports remote Streamable HTTP MCP servers natively with OAuth. This requires Codex CLI 0.77.0 or later; earlier versions needed an experimental flag that no longer exists.
One command does all of this for you, including the usage playbook.
- Add the server. Run the command below. Remote MCP servers need Codex CLI 0.77.0 or later; check yours with codex --version.
- Authenticate. Run codex mcp login tailwind, then sign in to Tailwind and approve access in the browser.
- Verify the connection. Start a new Codex session and ask it to list your Tailwind Pinterest accounts.
codex mcp add tailwind --url https://mcp.tailwind.aiCodex API-key fallback
Section titled “Codex API-key fallback”If OAuth is unavailable, create an API key and export it as TAILWIND_API_KEY in the environment where codex runs, then add Tailwind again pointing at that variable. Codex rejects a literal bearer token in its config file, so the key must come from the environment rather than being inlined. Create a Tailwind API key.
codex mcp add tailwind --url https://mcp.tailwind.ai --bearer-token-env-var TAILWIND_API_KEYOther MCP client
Section titled “Other MCP client”For a client without a Tailwind-specific guide, configure a remote Streamable HTTP server with a bearer token.
Tailwind OAuth requires support for OAuth Protected Resource Metadata (RFC 9728), including following the advertised authorization server to a different host. Older clients may not support this discovery flow, so the compatibility setup below uses an API key.
- Create an API key. Create a key from Settings > Integrations in Tailwind.
- Add the remote server. Configure https://mcp.tailwind.ai as a Streamable HTTP server.
- Add authorization. Send the API key as an Authorization: Bearer header.
Replace your_api_key_here with your Tailwind API key. Your client’s outer configuration shape may differ.
{ "mcpServers": { "tailwind": { "type": "http", "url": "https://mcp.tailwind.ai", "headers": { "Authorization": "Bearer your_api_key_here" } } }}Clients that support only local stdio servers may use mcp-remote as a compatibility bridge, but prefer a native remote HTTP connection when one is available.
Create an API key for fallback
Section titled “Create an API key for fallback”API keys are for clients that cannot complete Tailwind’s OAuth flow.
- Sign in to Tailwind.
- Open Settings > Integrations.
- Create an API key and copy it immediately.
- Replace
your_api_key_herein your client’s fallback configuration.
Keep the key private. Do not paste it into a chat, commit it to version control, or share it with another person. Revoke unused or exposed keys from Settings > Integrations.
Troubleshooting
Section titled “Troubleshooting”OAuth sign-in does not open
Section titled “OAuth sign-in does not open”- Confirm that the server URL is exactly
https://mcp.tailwind.ai. - Open the client’s MCP or connector settings and retry authentication.
- Confirm that pop-ups and redirects are allowed for the client.
- For Claude Code, run
/mcp, select Tailwind, and choose the authentication option.
The connector is waiting for approval
Section titled “The connector is waiting for approval”- On Claude Team or Enterprise, an organization Owner must add the custom connector before members can connect.
- On ChatGPT Business, Enterprise, or Edu, an admin or owner must enable developer mode and approve the custom app for the workspace.
Unauthorized with an API key
Section titled “Unauthorized with an API key”- Confirm that the key starts with
tw_pk_and has not been revoked. - Remove any extra spaces or quotation marks from the key value.
- Confirm that the header is
Authorization: Bearer your_api_key_here. - Create a replacement key from Settings > Integrations if needed.
Server connects but no tools appear
Section titled “Server connects but no tools appear”- Wait a few seconds for the server to initialize.
- Start a new conversation and make sure Tailwind is enabled for it.
- Ask the assistant to list your Tailwind Pinterest accounts.
- Check the client’s MCP logs or connection details for an error.
Verify your setup
Section titled “Verify your setup”Once connected, try:
- Check accounts: “List my Pinterest accounts.”
- View boards: “What boards do I have on my business account?”
- Review posts: “Show me my queued Tailwind posts.”
- Create a test draft: “Create a draft pin from this image URL.”
