Adobe Custom MCP with Frontend
This repo gives you two interfaces over the same Adobe tool layer:
- Claude / MCP interface
- local MCP server name:
adobe-custom - used by Claude Code in VS Code
- Human-friendly web interface
- browser chat UI
- backend API
- same underlying tool handlers
Why this architecture
The frontend does not call MCP over JSON-RPC by default. Instead, the frontend backend and the MCP server both import the same shared tool registry.
That gives you:
- one source of truth for tools
- easier debugging
- cleaner auth/config handling
- the option to add a real LLM later
Start
Install
npm install
cp .env.example .env
npm run checkStart the web UI
npm run start:apiOpen:
- http://localhost:8787
Start the MCP for Claude
In a second terminal: ``bash npm run start:mcp ``
Then in Claude Code: ``text /mcp Use adobe-custom health_check ``
Current frontend chat behavior
The browser UI supports:
- health check
- fragment search
- fragment fetch by ID
- AEP sandboxes
- AEP datasets
- AEM content fragment fetch by path
The chat endpoint currently uses a heuristic intent router so it works without external AI keys. You can later replace that with a real LLM planner while still reusing the same tool registry.
Key folders
apps/web/ # frontend UI
services/api/ # backend API and chat router
src/ # MCP server + shared tool implementationsNatural-language UI responses
The web UI now summarizes tool output in natural language and keeps the raw tool output inside an expandable details section.
