Adobe Custom MCP with Frontend

This repo gives you two interfaces over the same Adobe tool layer:

1. Claude / MCP interface

   • local MCP server name: adobe-custom
   • used by Claude Code in VS Code

2. 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 check

Start the web UI

npm run start:api

Open:

• http://localhost:8787

Start the MCP for Claude

In a second terminal:

npm run start:mcp

Then in Claude Code:

/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 implementations

Natural-language UI responses

The web UI now summarizes tool output in natural language and keeps the raw tool output inside an expandable details section.