@codebyai/frontend-mcp
Advanced tools
@codebyai/frontend-mcp acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to
powerful frontend development tools.
@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.
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@latestensures that your MCP client will always use the latest version of the Frontend MCP server.
[!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:
frontend[1] Localnpx-y, @codebyai/frontend-mcp@latestCODEBYAI_API_KEY with your API key valuecode --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).
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.
designToCodeConvert 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 savedReturns:
design-to-code-refactor.mdNote: Only vector files (.sketch, .fig) are supported. Bitmap images (.png, .jpg, etc.) cannot be converted.
openApiFilterFilter 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 savedReturns:
daemonProcessStartStart a long-running daemon process in a new shell window.
Parameters:
command (string, required): The command to execute as a daemon processcwd (string, required): The working directory where the command should be executedidle_seconds (number, optional): Wait for idle seconds before returning output (default: 10)Returns:
daemonProcessGetOutputGet the console output and status of a running daemon process.
Parameters:
pid (number, required): The process ID returned by daemonProcessStartlines (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:
Note: After solving issues, call damonProcessClearOutput to avoid receiving duplicate information on subsequent calls.
damonProcessClearOutputClear the console output buffer of a daemon process.
Parameters:
pid (number, required): The process ID returned by daemonProcessStartReturns:
file_understandingAnalyze 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 commasinstruction (string, required): Natural language instruction for file analysissave_to_path (string, optional): The local file absolute path where the parsing result is savedReturns:
Note: For PDF files, this tool should only be used when the file size exceeds 2MB.
knowledgeBaseListList 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 basecategory (string, optional): Knowledge base category for filtering. When empty, returns all documentsReturns:
knowledgeBaseReadRead 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 basecategory (string, required): The knowledge base category namename (string, required): The document name to readReturns:
The Frontend MCP server supports the following environment variables:
CODEBYAI_API_KEY (Required): Your CodeByAI API key for authentication
sk-CODEBYAI_BASE_URL (Optional): Override the CodeByAI API endpoint
https://codebyai.comSet 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"
}
}
}
}
The server logs all activities to logs/codebyai-mcp-YYYY-MM-DD.log, including:
The server handles various error scenarios:
All errors are logged and returned to the calling application with descriptive messages.
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.
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.
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.
For issues, questions, or feature requests, please visit CodebyAI.
FAQs
MCP server for converting design files to frontend code
The npm package @codebyai/frontend-mcp receives a total of 2 weekly downloads. As such, @codebyai/frontend-mcp popularity was classified as not popular.
We found that @codebyai/frontend-mcp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.