MCP Server for Claude Code
Connect Claude Code to Blueprint Studio via the Model Context Protocol (MCP). Generate assets, manage brands, invite team members, and more — all through natural conversation.
Setup
1. Add the MCP server to Claude Code
Add the following to your Claude Code MCP settings (.claude/settings.json or via the Claude Code settings UI):
{
"mcpServers": {
"blueprint-studio": {
"url": "https://tools.blueprintstudio.ai/api/mcp"
}
}
}2. Authenticate
When Claude Code connects, your browser will open automatically to sign in with your Blueprint Studio account. Once authorized, the connection persists — no API keys to manage.
3. Start using it
Ask Claude naturally — it has access to all 27 tools:
> "Generate a settings icon in my brand style"
> "Invite alice@example.com to my brand"
> "Create a new brand called Acme Design"
> "List my styles and suggest some prompts"Authentication
The MCP server uses OAuth 2.1 with PKCE for secure browser-based authentication. This is the same flow used by Figma, Linear, and other MCP servers.
How it works
- Claude Code discovers auth is required via
/.well-known/oauth-authorization-server - Your browser opens to sign in with your Blueprint Studio account
- You choose which brand to authorize (or “Personal” for no brand)
- A secure token is issued — Claude Code stores it automatically
- Token refreshes automatically, no re-authentication needed
API keys still work. If you have existing API keys (bp_live_...), they continue to work alongside OAuth. You can also create and manage API keys through the MCP tools for CI/CD and automation.
Project Configuration
Create an optional .blueprint.json file in your project root to set defaults. This is safe to commit to git — it contains no auth information.
{
"outputDir": "./public/assets",
"defaultStyleId": "your-style-id",
"defaultAspectRatio": "1:1",
"defaultImageSize": "2K"
}| Field | Type | Description |
|---|---|---|
| outputDir | string | Where to save downloaded assets default: ./public/assets |
| defaultStyleId | string | Style to use when none is specified |
| defaultAspectRatio | string | Default aspect ratio default: 1:1 |
| defaultImageSize | string | Output resolution default: 2K |
Available Tools
Asset Generation
8 toolsgenerate_assetGenerate an image from a prompt with style, aspect ratio, and resolution optionslist_assetsBrowse generated assets with filtering and paginationget_assetGet full details for a specific assetdelete_assetDelete an assetdownload_assetDownload an asset as base64-encoded image datafavorite_assetToggle favorite status on an assetremove_backgroundRemove the background from an asset imageshare_assetGenerate a public shareable URL for an assetBrand Management
5 toolscreate_brandCreate a new brand/organizationlist_brandsList brands you belong toget_brandGet brand details, settings, and member countupdate_brand_settingsUpdate default style or prompt templatedelete_brandDelete a brand (owner only)Team Management
4 toolsinvite_memberInvite a user by email with a rolelist_membersList members and pending invitesupdate_member_roleChange a member's role (admin/member)remove_memberRemove a member from a brandStyles
5 toolslist_stylesList available generation styles (system + custom)create_styleCreate a custom brand styleget_styleGet style details and reference imagesupdate_styleUpdate a custom styledelete_styleDelete a custom styleGeneration Helpers
2 toolssuggest_promptsGet AI-powered prompt suggestions based on a stylegenerate_ideasBrainstorm asset concept ideas for a topicAPI Keys
3 toolscreate_api_keyCreate a new API key for automation and CI/CDlist_api_keysList active keys with usage metadatarevoke_api_keyPermanently revoke an API keyUsage Examples
Generate an asset with a specific style
> "Generate a minimalist coffee cup icon using my brand style,
save it to public/icons/coffee.png"Set up a new brand with team members
> "Create a brand called 'Acme Design', then invite
alice@acme.com and bob@acme.com as members"Create a custom style and generate assets
> "Create a style called 'Neon Retro' with a cyberpunk
aesthetic, then generate 3 icon ideas using it"Manage API keys for CI/CD
> "Create an API key called 'GitHub Actions' for my CI pipeline"
> "List my API keys and revoke any unused ones"Troubleshooting
“Failed to parse JSON” or “Authorization required”
Click “Authenticate” in the MCP server status panel. Your browser will open to complete the OAuth flow.
Authentication succeeds but tools don't appear
Try “Reconnect” in the MCP status panel. If that fails, remove and re-add the server URL in your settings.
Tools return “Access denied”
Your OAuth token is scoped to the brand you selected during authentication. To switch brands, disconnect and re-authenticate.
Using an API key instead of OAuth
You can use an API key by adding a headers field to your MCP config:
{
"mcpServers": {
"blueprint-studio": {
"url": "https://tools.blueprintstudio.ai/api/mcp",
"headers": {
"Authorization": "Bearer bp_live_your_key_here"
}
}
}
}