Add the MCP server inspector page

Admin-only page at /mcp showing the server's connection details, a
copy-pasteable client config, and every tool with its arguments - plus a console
to run one against live data and see what an AI client would get back.

It talks to /api/mcp/*, not to the /mcp endpoint directly. That endpoint speaks
streamable HTTP with session handling, and implementing a client for it in the
browser purely to render a tool list would be a lot of machinery for a read-only
admin screen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Suriyakumarvijayanayagam
2026-08-13 13:14:00 +05:30
parent ea677c72df
commit 177dea0f19
4 changed files with 361 additions and 1 deletions

View File

@@ -289,6 +289,18 @@ export const api = {
}),
uploadUserProductsFile: (file) => upload('/api/user/products/upload-file', file),
// --- MCP (Model Context Protocol) ---
// The /mcp endpoint itself speaks streamable HTTP with sessions, which the
// browser can't talk to without a full MCP client. These two REST endpoints
// expose the same server for the admin page - see app/api/routers/mcp_info.py.
getMcpInfo: () => request('/api/mcp/info'),
invokeMcpTool: (toolName, args = {}) =>
request(`/api/mcp/tools/${encodeURIComponent(toolName)}`, {
method: 'POST',
body: JSON.stringify(args),
}),
};
export { ApiError };