CodeByAI Frontend MCP

@codebyai/frontend-mcp acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to powerful frontend development tools.

Key features

• Design to Code: Convert Sketch (.sketch) and Figma (.fig) files to frontend code with AI-powered analysis
• OpenAPI Filter: Interactively filter and customize OpenAPI/Swagger specifications
• Process Management: Start and monitor long-running daemon processes (dev servers, build tools, etc.)
• File Understanding: Analyze PDF, MP4, and MP3 files using Google Gemini AI
• Knowledge Base: Access project-specific documentation and best practices

Disclaimers

@codebyai/frontend-mcp communicates with the CodeByAI web service (https://codebyai.com) to process design files and AI analysis requests. Design files and content you submit will be sent to this service. Avoid submitting sensitive or confidential information.

Requirements

• Node.js v18.0.0 or newer
• npm
• A modern web browser (for interactive tools)

Getting started

Before installing, generate or obtain an API_KEY. This key starts with "sk-" and is referred to as CODEBYAI_API_KEY. Replace {CODEBYAI_API_KEY} in the installation command with your actual key.

Add the following config to your MCP client:

{
  "mcpServers": {
    "frontend": {
      "command": "npx",
      "args": ["-y", "@codebyai/frontend-mcp@latest"],
      "env": {
        "CODEBYAI_API_KEY" : "{CODEBYAI_API_KEY}"
      }
    }
  }
}

[!NOTE] Using @codebyai/frontend-mcp@latest ensures that your MCP client will always use the latest version of the Frontend MCP server.

MCP Client configuration

[!IMPORTANT] All client configurations below require you to replace {CODEBYAI_API_KEY} with your actual API key obtained from https://codebyai.com/console/api-keys.

claude mcp add frontend npx @codebyai/frontend-mcp@latest --env CODEBYAI_API_KEY={CODEBYAI_API_KEY}

Alternatively, manually edit your Claude Code MCP configuration file and add the environment variable.

codex mcp add frontend --env CODEBYAI_API_KEY={CODEBYAI_API_KEY} -- npx @codebyai/frontend-mcp@latest

Start Copilot CLI:

copilot

Start the dialog to add a new MCP server by running:

/mcp add

Configure the following fields and press CTR-S to save the configuration:

• Server name: frontend
• Server Type: [1] Local
• Command: npx
• Arguments: -y, @codebyai/frontend-mcp@latest
• Environment Variables: Add CODEBYAI_API_KEY with your API key value

code --add-mcp '{"name":"frontend","command":"npx","args":["@codebyai/frontend-mcp@latest"],"env":{"CODEBYAI_API_KEY":"{CODEBYAI_API_KEY}"}}'

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above (including the CODEBYAI_API_KEY environment variable).

Project wide:

gemini mcp add frontend --env CODEBYAI_API_KEY={CODEBYAI_API_KEY} npx @codebyai/frontend-mcp@latest

Globally:

gemini mcp add -s user frontend --env CODEBYAI_API_KEY={CODEBYAI_API_KEY} npx @codebyai/frontend-mcp@latest

Alternatively, follow the MCP guide and use the standard config from above (including the CODEBYAI_API_KEY environment variable).

Go to Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add. Use the config provided above (including the CODEBYAI_API_KEY environment variable). The same way @codebyai/frontend-mcp can be configured for JetBrains Junie in Settings | Tools | Junie | MCP Settings -> Add. Use the config provided above.

Follow the Visual Studio MCP configuration guide and use the config provided above (including the CODEBYAI_API_KEY environment variable).

Go to Settings | AI | Manage MCP Servers -> + Add to add an MCP Server. Use the config provided above (including the CODEBYAI_API_KEY environment variable).

Your first prompt

Enter the following prompt in your MCP Client to check if everything is working:

List available knowledge base documents

Your MCP client should connect to the CodeByAI service and retrieve the knowledge base listing.

Tools

Design & API Tools (2 tools)

designToCode

Convert Sketch or Figma design files to frontend code.

Parameters:

• filePath (string, required): The absolute file path to the design file (.sketch or .fig)
• targetDir (string, required): The absolute path to the directory where the design draft image slice is saved

Returns:

• Refactored page source code instructions
• Downloaded assets (images, icons, etc.) saved to target directory
• Design screenshot for reference
• Refactor instructions in design-to-code-refactor.md

Note: Only vector files (.sketch, .fig) are supported. Bitmap images (.png, .jpg, etc.) cannot be converted.

openApiFilter

Filter OpenAPI/Swagger interface documents interactively and save to a new file.

Parameters:

• filePath (string, required): The absolute file path to the OpenAPI/Swagger document (.json or .yaml)
• targetPath (string, required): The absolute file path where the filtered document will be saved

Returns:

• Confirmation message when filtering is complete

Process Management (3 tools)

daemonProcessStart

Start a long-running daemon process in a new shell window.

Parameters:

• command (string, required): The command to execute as a daemon process
• cwd (string, required): The working directory where the command should be executed
• idle_seconds (number, optional): Wait for idle seconds before returning output (default: 10)

Returns:

• Process ID (PID) for future reference
• Initial stdout/stderr output after idle period

daemonProcessGetOutput

Get the console output and status of a running daemon process.

Parameters:

• pid (number, required): The process ID returned by daemonProcessStart
• lines (number, optional): Number of lines to read from the end of console output (default: 50)
• idle_seconds (number, optional): Wait for idle seconds before returning output (default: 10)

Returns:

• Latest console output (last N lines)
• Process status (running/exited)
• Exit code (if exited)

Note: After solving issues, call damonProcessClearOutput to avoid receiving duplicate information on subsequent calls.

damonProcessClearOutput

Clear the console output buffer of a daemon process.

Parameters:

• pid (number, required): The process ID returned by daemonProcessStart

Returns:

• Confirmation message

AI-Powered Analysis (1 tool)

file_understanding

Analyze and extract content from PDF, MP4, or MP3 files using Google Gemini AI.

Parameters:

• file_path (string, required): The absolute file path(s) to analyze. Multiple files can be separated by commas
• instruction (string, required): Natural language instruction for file analysis
• save_to_path (string, optional): The local file absolute path where the parsing result is saved

Returns:

• AI-generated analysis based on your instruction
• Optional: Result saved to specified file path

Note: For PDF files, this tool should only be used when the file size exceeds 2MB.

Knowledge Base (2 tools)

knowledgeBaseList

List knowledge base documents from a specific category.

Parameters:

• filePath (string, optional): The absolute file path to the knowledge base JSON file. If not provided, accesses the CodeByAI web knowledge base
• category (string, optional): Knowledge base category for filtering. When empty, returns all documents

Returns:

• Document metadata including name, category, summary, and tags

knowledgeBaseRead

Read the full content of a specific knowledge base document.

Parameters:

• filePath (string, optional): The absolute file path to the knowledge base JSON file. If not provided, accesses the CodeByAI web knowledge base
• category (string, required): The knowledge base category name
• name (string, required): The document name to read

Returns:

• Full document content

Configuration

Environment Variables

The Frontend MCP server supports the following environment variables:

• CODEBYAI_API_KEY (Required): Your CodeByAI API key for authentication

  • Type: string
  • Format: Starts with sk-
  • Get your key: https://codebyai.com/console/api-keys

• CODEBYAI_BASE_URL (Optional): Override the CodeByAI API endpoint

  • Type: string
  • Default: https://codebyai.com

Set environment variables via the env property in the JSON configuration:

{
  "mcpServers": {
    "frontend": {
      "command": "npx",
      "args": ["-y", "@codebyai/frontend-mcp@latest"],
      "env": {
        "CODEBYAI_API_KEY": "{CODEBYAI_API_KEY}",
        "CODEBYAI_BASE_URL": "https://custom-domain.com"
      }
    }
  }
}

Logging

The server logs all activities to logs/codebyai-mcp-YYYY-MM-DD.log, including:

• Design file upload attempts
• Browser opening success/failure
• Conversion results
• Process management activities
• Error details
• Execution times

Error Handling

The server handles various error scenarios:

• Missing or invalid file paths
• Unsupported file formats
• Network connectivity issues
• Browser opening failures
• Conversion timeouts (5 minutes)
• Process management errors

All errors are logged and returned to the calling application with descriptive messages.

Known limitations

Browser requirement

Some tools (designToCode, openApiFilter) require opening a web browser to interact with the CodeByAI service. These tools may not work in headless or SSH-only environments.

File size limits

Large design files may take longer to upload and process. The CodeByAI service may have file size limitations. Contact support if you encounter issues with large files.

Process cleanup

Daemon processes started with daemonProcessStart are automatically cleaned up when the MCP server shuts down. However, if the MCP server crashes unexpectedly, orphaned processes may remain running. Check your system's process manager if needed.

Support

For issues, questions, or feature requests, please visit CodebyAI.