Agents via MCP

Connect AI coding agents like Claude Code to the chat UI using MCP and supergateway

Connect AI coding agents to Hadrian's chat UI via MCP, giving models direct access to file editing, code execution, and other agent tools during conversations.

Overview

AI coding agents like Claude Code expose their tools (file editing, terminal commands, code search) over MCP's stdio transport. Since the chat UI uses Streamable HTTP, a transport bridge is needed.

Supergateway bridges stdio-based MCP servers to Streamable HTTP with a single command, making any stdio MCP server accessible from the browser.

┌──────────────┐    Streamable HTTP   ┌──────────────┐    stdio    ┌─────────────┐
│  Hadrian UI  │ ──────────────────── │ Supergateway │ ─────────── │ Claude Code │
│  (browser)   │    localhost:8000    │   (bridge)   │             │ (MCP serve) │
└──────────────┘                      └──────────────┘             └─────────────┘

Setup

Prerequisites

Node.js 18+ (for npx)
Claude Code installed (npm install -g @anthropic-ai/claude-code)

Start the Bridge

Run supergateway with Claude Code's MCP server:

npx -y supergateway \
  --cors "*" \
  --outputTransport streamableHttp \
  --stdio "claude mcp serve"

This starts a Streamable HTTP endpoint at http://localhost:8000/mcp.

Flag	Purpose
`--cors "*"`	Allow browser requests from Hadrian's origin
`--outputTransport streamableHttp`	Expose as Streamable HTTP (required for the chat UI)
`--stdio "claude mcp serve"`	Launch Claude Code in MCP server mode

Supergateway defaults to port 8000. Use --port 9000 to change it.

Connect in the Chat UI

Open Hadrian's chat UI
Click Tools in the chat input toolbar to see the tools flyout — MCP Servers appears alongside built-in tools

Click Configure next to MCP Servers to open the configuration modal
Click Add Server and enter:

Field	Value
Name	Claude Code
URL	`http://localhost:8000/mcp`

Click Connect to establish the session

Once connected, Claude Code's tools appear in the server's tool list. Expand the server to see discovered tools and enable or disable individual ones.

Available Tools

Claude Code exposes these tools via mcp serve:

Tool	Description
Bash	Execute shell commands
Read	Read file contents
Write	Create or overwrite files
Edit	Make targeted edits to existing files
LS	List directory contents
GlobTool	Find files by pattern
GrepTool	Search file contents with regex

These tools have direct access to the filesystem and can execute arbitrary commands. Only run this on trusted machines and be mindful of the working directory Claude Code operates in.

Using Agent Tools in Chat

With MCP enabled and Claude Code connected, the tools bar shows the connected server count and available tools at a glance.

Models in the chat can now use agent tools to interact with your local environment.

Example prompts:

"Read the file src/main.rs and explain the entry point"
"Find all TODO comments in the project"
"Create a new test file for the auth module"
"Run cargo test and show me the results"

The model calls the appropriate MCP tool, Claude Code executes it locally, and the result flows back into the conversation.

Hadrian's chat modes work with MCP tools. Use modes like Council or Debate to have multiple models collaborate using the same agent tools, each bringing different perspectives to code review, debugging, or architecture decisions.

Other MCP Servers

The same pattern works with any stdio-based MCP server. Replace the --stdio command to bridge other tools:

# GitHub MCP server
npx -y supergateway \
  --cors "*" \
  --outputTransport streamableHttp \
  --stdio "npx -y @modelcontextprotocol/server-github"

# Filesystem MCP server
npx -y supergateway \
  --cors "*" \
  --outputTransport streamableHttp \
  --stdio "npx -y @modelcontextprotocol/server-filesystem /path/to/directory"

# PostgreSQL MCP server
npx -y supergateway \
  --cors "*" \
  --outputTransport streamableHttp \
  --stdio "npx -y @modelcontextprotocol/server-postgres postgresql://user:pass@localhost/db"

MCP servers that already expose an HTTP endpoint don't need supergateway. Connect to them directly in the chat UI.

Configuration Options

Supergateway Flags

Flag	Default	Description
`--port`	`8000`	Listening port
`--cors`	disabled	CORS origins (use `"*"` for development)
`--outputTransport`	`sse`	Output protocol (`streamableHttp` for Hadrian)
`--streamableHttpPath`	`/mcp`	HTTP endpoint path
`--stateful`	disabled	Enable stateful sessions
`--sessionTimeout`	`60000`	Session timeout in ms (with `--stateful`)
`--logLevel`	`info`	Logging verbosity (`debug`, `info`, `none`)

CORS in Production

For production deployments, restrict CORS to your Hadrian instance's origin:

npx -y supergateway \
  --cors "https://hadrian.example.com" \
  --outputTransport streamableHttp \
  --stdio "claude mcp serve"

Troubleshooting

Connection errors are shown directly in the MCP configuration modal with details on hover.

Connection refused

Verify supergateway is running and the port matches your configuration:

curl -s http://localhost:8000/mcp -X POST \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"ping","id":1}'

CORS errors in browser console

Ensure --cors is set. For development, use --cors "*". For production, set it to your Hadrian UI origin.

Tools not appearing after connect

Check that claude mcp serve is running correctly by testing it directly:

echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | claude mcp serve

Tool execution timeouts

Long-running commands (builds, test suites) may exceed the default 30-second timeout. Consider breaking operations into smaller steps or using tools that stream progress.

Next Steps

MCP Integration for full MCP protocol details and tool management
Chat Modes for multi-model collaboration with agent tools
Frontend Tools for built-in browser-side execution (Python, JS, SQL)