Visual page builder
## Plasmic MCP Server: Visual Application Builder Platform The **Plasmic MCP Server** integrates the powerful Plasmic visual builder into Google Antigravity, enabling no-code/low-code application development with AI assistance for rapid prototyping and production-ready UI creation. ### Why Plasmic MCP? - **Visual Design**: Build production-quality UIs visually with a powerful drag-and-drop editor and design tools - **Code Integration**: Export clean React code or integrate directly with existing Next.js, Gatsby, or custom projects - **Component Library**: Access pre-built components and design systems that accelerate development significantly - **CMS Capabilities**: Built-in headless CMS features for content management without additional services - **Team Collaboration**: Enable designers and developers to work together with real-time collaboration features ### Key Features #### 1. Component Creation ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create a Plasmic component for a pricing card with plan name, features list, and CTA button" }] ) ``` #### 2. Page Design ```python # Design application pages response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Design a landing page in Plasmic with hero section, feature grid, testimonials, and footer" }] ) ``` #### 3. Code Export ```python # Export as code response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Export the dashboard components from Plasmic as React TypeScript components" }] ) ``` #### 4. Content Management ```python # Manage CMS content response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create content model for blog posts in Plasmic CMS with title, author, body, and featured image" }] ) ``` ### Configuration ```json { "mcpServers": { "plasmic": { "command": "npx", "args": ["-y", "@anthropic/mcp-server-plasmic"], "env": { "PLASMIC_PROJECT_ID": "your-project-id", "PLASMIC_API_TOKEN": "your-api-token" } } } } ``` ### Use Cases **Rapid Prototyping**: Build functional UI prototypes in hours instead of days for stakeholder review and user testing. **Design Systems**: Create and maintain consistent design systems that sync between Plasmic and your codebase. **Marketing Sites**: Empower marketing teams to build and update landing pages without developer involvement. **Application UIs**: Build complex application interfaces visually while maintaining code quality and type safety. The Plasmic MCP Server bridges the gap between design and development, enabling faster iteration and better collaboration between teams building modern web applications.
{
"mcpServers": {
"plasmic": {
"mcpServers": {
"plasmic": {
"env": {
"PLASMIC_API_KEY": "your-api-key"
},
"args": [
"-y",
"plasmic-mcp-server"
],
"command": "npx"
}
}
}
}
}