# 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
```bash
npm install
cp .env.example .env
npm run check
```

### Start the web UI
```bash
npm run start:api
```

Open:
- 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

```text
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.