Claude Connector framework

Claude connectors
with real UI.

Claude renders MCP Apps natively. moonpeak turns your tools and React Views into a connector, lets you see it in a Claude-style host on localhost and tests it in CI.

Documentation Source

From tool to connector.

  • Write a tool in src/tools and its View in src/resources.
  • See it in the inspector's Claude host, light or dark, inline or fullscreen.
  • Deploy with moonpeak start or createHandler, behind HTTPS.
  • In Claude: Settings → Connectors → Add custom connector → your /mcp URL.
Claude connector docs →
start
npx moonpeak new my-connector review
cd my-connector && npm run dev     # Claude host at localhost:3000?host=claude
Claude extras
import { useIsClaude, useClaudeStyles } from "moonpeak/claude";

const vars = useClaudeStyles();   // fonts and colors from Claude
<div style={{ fontFamily: vars["--font-sans"] }}>…</div>

Looks at home in Claude.

moonpeak applies the host's style variables to the document, so your CSS can use Claude's fonts and colors. moonpeak/claude adds host detection and the raw style map.

Safe actions by design.

Mark a tool visibility: ["app"] and Claude never offers it to the model: only a click in your View can run it. The review starter shows the full propose-then-confirm flow.

Tool visibility →
src/tools/confirm-plan.ts
export const tool = {
  title: "Confirm stargazing plan",
  description: "Called from the review View only.",
  visibility: ["app"],
};

Open source, MIT licensed.

Documentation → GitHub
Copied