Ditto connects to AI coding agents through the Model Context Protocol (MCP) that lets AI tools (eg. Claude Code, Cursor, Figma Make, etc.) pull in external context so they can reference your style guide rules and search your existing text library whenever it generates or edits UI copy.
This means two things happen automatically:
Style guide rules get applied from the start. Before writing anything, your AI agent checks your Ditto style guide for terminology, tone, and formatting rules so all generated text are compliant before they enter the codebase.
Existing copy gets reused. Before writing something new, your AI agent searches your Ditto projects and component library for strings that already exist. If there's a match, it uses the approved copy instead of generating something new.
💡 See the MCP tools reference for details on how each tool works
Set up your Ditto MCP
Setup takes a few minutes. As a prerequisite, you'll need a Ditto API token — you can generate one from your developer integrations settings in Ditto.
Set up Ditto for Claude Code
Step 1: Add the MCP server
Open your terminal and run:
claude mcp add ditto -- npx @dittowords/mcp-server -e DITTO_API_TOKEN=<your-api-token>
Replace <your-api-token> with the token you just copied.
Step 2: Restart Claude Code
After adding the server, restart Claude Code. You'll see the Ditto tools listed in your tool panel, which confirms the server is connected and ready.
Step 3 (optional): Scope to specific projects
By default, Claude pulls from your entire Ditto workspace. If you want to limit it to specific projects and its style guides (useful if your workspace spans multiple products or brands), create a ditto/config.yaml file in your project root:
projects:
- id: "your-project-developer-id"
You can find a project's ID inside your Ditto project under Development Integrations. Add one entry per project to pull from multiple projects at once.
Set up Ditto for Cursor
Step 1: Add the MCP server
Go to Cursor Settings > Tools & MCP and click + Add new MCP server. This opens your ~/.cursor/mcp.json file. Add the following, replacing <your-api-token> with your Ditto API token:
{
"mcpServers": {
"ditto": {
"command": "npx",
"args": ["@dittowords/mcp-server"],
"env": {
"DITTO_API_TOKEN": "<your-api-token>"
}
}
}
}Step 2: Verify the connection
After saving, you'll see a green status indicator next to Ditto in your MCP settings, which means the connection is live.
Set up Ditto for Figma Make
Step 1: Open connector settings
From the chat box, select Add context, hover over Connectors, then choose Manage.
Step 2: Create a new connector
Navigate to the Created by you tab and click Create. Enter “Ditto” as the connector name.
Step 3: Set the MCP server URL
Enter the following URL and click Create:
<https://api.dittowords.com/v2/mcp>
Step 4: Configure authentication
Click Advanced settings and add a custom request header:
Header name:
AuthorizationHeader value:
token <your-api-token>
Step 5: Connect and enable tools
Click Connect on the connector. Review the available tools and enable the ones you’d like to use.
💡 Check out example prompts and instructions for using the Ditto MCP server with your AI coding agent here
Get better results with project-level instructions
Your AI agent follows project-level instructions you add to a CLAUDE.md file (for Claude Code) or .cursorrules file (for Cursor). Adding one to your project root means the AI agent will always use Ditto without you needing to ask every time.
Add the following:
When working on UI:
- Use the style guide rules in Ditto to ensure all user-facing text follows our content guidelines.
- Whenever possible, reuse existing text from Ditto instead of writing new copy.
💡 You can also use this file to point your AI agent to a specific Ditto project, or call out any style rules you want consistently applied