Frontend Backend
БесплатноНе проверенA Multimodal MCP Server for Fullstack development. Bridges local Frontend & Backend repositories to AI tools (Gemini CLI, Claude, Cursor) with seamless file & i
Описание
A Multimodal MCP Server for Fullstack development. Bridges local Frontend & Backend repositories to AI tools (Gemini CLI, Claude, Cursor) with seamless file & image access, bypassing workspace sandbox restrictions
README
This guide provides instructions on how to configure your Fullstack Context MCP Server with various AI clients (Claude Desktop, Cursor, VS Code/Cline, Gemini CLI).
⚠️ Prerequisites
- Absolute Paths Only: MCP clients rarely understand relative paths like
.or~. Always use full paths (e.g.,/Users/name/projectorC:\Users\name\project). - Python Environment: Ensure
mcpis installed in the python environment you are pointing to.
🛑 IMPORTANT: Workspace Restrictions (Sandboxing)
Read this if you use VS Code, Cursor, or Windsurf.
Even if you configure PATH_BACKEND correctly in the JSON settings, the AI Agent (Client) typically operates inside a Security Sandbox. It often refuses to execute tools or read files that are outside the currently open window/folder to prevent unauthorized access.
The Fix: Multi-Root Workspace To allow the AI to access your external backend folder via MCP, you must explicitly trust it by adding it to your current workspace:
- Open your Frontend project in the editor.
- Go to File > Add Folder to Workspace...
- Select your Backend folder (e.g.,
/path/to/backend-project). - (Optional) Save this setup: File > Save Workspace As...
Result: Both folders are now "inside" the trusted zone. The MCP server will now work correctly without being blocked by the editor's security layer.
1. Claude Desktop App (MacOS / Windows)
Claude Desktop is currently the standard implementation for MCP and is less strict about workspace sandboxing than VS Code.
Configuration File Location:
- MacOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
Setup Steps:
- Open the configuration file in a text editor.
- Add your server under
mcpServers.
{
"mcpServers": {
"fullstack-server": {
"command": "python3",
"args": [
"/absolute/path/to/your/repo/server.py"
],
"env": {
"PATH_FRONTEND": "/absolute/path/to/frontend-project",
"PATH_BACKEND": "/absolute/path/to/backend-project"
}
}
}
}
Note: If you use a virtual environment (venv), replace "python3" with the path to the python executable inside the venv.
2. Cursor (AI Editor)
Cursor creates a bridge to local scripts via its "Features" settings.
Setup Steps:
- Open Cursor Settings (
Ctrl + ,orCmd + ,). - Go to
Features->MCP Servers. - Click "Add New Server".
- Fill in the details:
- Name:
Fullstack Context - Type:
Command (stdio) - Command:
python3 /absolute/path/to/your/repo/server.py - Environment Variables:
PATH_FRONTEND:/absolute/path/to/frontend-projectPATH_BACKEND:/absolute/path/to/backend-project
- Name:
Crucial Step: Ensure you add both Frontend and Backend folders to the workspace (File > Add Folder to Workspace) so the AI has permission to use the MCP tools on them.
3. VS Code (via Cline / Roo Code)
VS Code Native does not support MCP yet. You must use the Cline (formerly Claude Dev) or Roo Code extension.
Setup Steps:
- Install Cline from VS Code Marketplace.
- Open Cline in the sidebar.
- Click the MCP Server Icon (Database icon) or Settings.
- Select "Edit MCP Settings".
- Paste the configuration:
{
"mcpServers": {
"fullstack-server": {
"command": "python",
"args": ["/absolute/path/to/your/repo/server.py"],
"env": {
"PATH_FRONTEND": "/absolute/path/to/frontend-project",
"PATH_BACKEND": "/absolute/path/to/backend-project",
"PYTHONUTF8": "1"
}
}
}
}
⚠️ Important: VS Code is very strict. If PATH_BACKEND is outside the current window, you MUST use File > Add Folder to Workspace to include that folder, otherwise Cline will refuse to run the tool or read files from it.
4. Google Gemini CLI (npm)
This section explains how to connect the official npm gemini-cli to this MCP server.
Setup Steps:
Install and Authenticate Gemini CLI:
npm install -g @google/gemini-cli gemini configureConfigure Gemini CLI for MCP: Open the Gemini CLI configuration file. Its location varies by OS:
- Linux/macOS:
~/.config/@google-gemini-cli/config.json - Windows:
%APPDATA%\@google-gemini-cli\config.json
Add your server configuration under the
mcpServerssection:- Linux/macOS:
{
"mcpServers": {
"fullstack-server": {
"command": "python3",
"args": [
"/absolute/path/to/your/repo/server.py"
],
"env": {
"PATH_FRONTEND": "/absolute/path/to/frontend-project",
"PATH_BACKEND": "/absolute/path/to/backend-project"
}
}
}
}
Note: Ensure that /absolute/path/to/your/repo/server.py points to the correct location of your MCP server script. Replace /absolute/path/to/frontend-project and /absolute/path/to/backend-project with the actual absolute paths to your frontend and backend project directories, respectively.
Установка Frontend Backend
У этого сервера нет опубликованного пакета — он собирается из исходников. Открой репозиторий и следуй инструкции в README.
▸ github.com/giauphan/mcp-frontend-backendFAQ
Frontend Backend MCP бесплатный?
Да, Frontend Backend MCP бесплатный — установка в пару кликов через Unyly без оплаты.
Нужен ли API-ключ для Frontend Backend?
Нет, Frontend Backend работает без API-ключей и переменных окружения.
Frontend Backend — hosted или self-hosted?
Self-hosted: сервер запускается локально на твоей машине командой из раздела установки.
Как установить Frontend Backend в Claude Desktop, Claude Code или Cursor?
Открой Frontend Backend на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.
Похожие MCP
ARA
Generate images, video and audio from any AI agent — one connector.
автор: ARAOmni Video
An MCP server that transforms LLM-enabled IDEs into professional video editors by pre-processing footage into text proxies, generating motion graphics via HTML/
автор: buildwithtazaYouTube
Transcripts, channel stats, search
автор: YouTubeEverArt
AI image generation using various models.
автор: modelcontextprotocolgpu-bridge/mcp-server
Unified GPU inference API with 30 AI services (LLM, image gen, video, TTS, whisper, embeddings, reranking, OCR) as MCP tools. Pay-per-use via x402 USDC or API k
автор: gpu-bridgehamflx/imagen3-mcp
A powerful image generation tool using Google's Imagen 3.0 API through MCP. Generate high-quality images from text prompts with advanced photography, artistic,
автор: hamflxmerterbak/Grok-MCP
MCP server for xAI's [Grok API](https://docs.x.ai/docs/overview) with agentic tool calling, image generation, vision, and file support.
автор: merterbakSureScaleAI/openai-gpt-image-mcp
OpenAI GPT image generation/editing MCP server.
автор: SureScaleAIYangLiangwei/PersonalizationMCP
Comprehensive personal data aggregation MCP server with Steam, YouTube, Bilibili, Spotify, Reddit and other platforms integrations. Features OAuth2 authenticati
автор: YangLiangweiAceDataCloud/MCPFlux
Flux AI image generation and editing (Black Forest Labs) via Ace Data Cloud API.
автор: AceDataCloudCompare Frontend Backend with
Не уверен что выбрать?
Найди свой стек за 60 секунд
Автор?
Embed-бейдж для README
Похожее
Все в категории media
