synapse
Get started

One UI. Every MCP host, including your own.

Build your MCP app's UI once with real, typed components. Synapse renders it in ChatGPT, Claude, and VS Code.

$npm install @nimblebrain/synapse
Read the docsStar on GitHub
send this week’s follow-ups

Here are your follow-ups, ready to send:

Send 3 follow-upsdrafted by the agentNeeds OK
JDJane Doe · Acme“Recapping our pricing call…”
MRMarco Ruiz · Northwind“Sending the security doc…”

Self-hosted, Synapse renders your app via the Synapse API.

Every host speaks a different protocol.

Build your app's UI for one host, and you've built it for one. Each speaks a different way.

window.openaiChatGPTui/* protocolClaude, VS CodeSynapse APIyour runtime

You write typed React. Synapse ships one ui:// resource.

You write real, typed React from your MCP tool's data. Synapse builds it to a single ui:// resource and renders it wherever your server is connected.

FollowUps.tsx, your component
import { useToolResult, useAction } from "@nimblebrain/synapse/react";
import { Card, Stack, Inline, Heading, ListRow, Button, Badge } from "@nimblebrain/synapse/ui";

// Typed data, straight from your MCP tool
type FollowUp = { to: string; company: string };

// Real, typed React. The agent renders and drives it.
export function FollowUps() {
  const data = useToolResult()?.structuredContent as { drafts: FollowUp[] };
  const send = useAction();
  if (!data) return null;
  return (
    <Card>
      <Inline>
        <Heading>Send {data.drafts.length} follow-ups</Heading>
        <Badge tone="warning">Needs OK</Badge>
      </Inline>
      <Stack>
        {data.drafts.map((d) => (
          <ListRow key={d.to} title={d.to} meta={d.company} />
        ))}
      </Stack>
      <Button onClick={() => send("send_followups")}>Approve & send</Button>
    </Card>
  );
}

Batteries-included components (Card, Inline, Stack, ListRow, Badge) or drop in your own React. Synapse builds it to one ui:// resource.

your data → one ui:// resource
your MCP tool
get_followups()
Synapse
ui://follow-ups
rendered, unchanged, in every host
ChatGPT
Claude
VS Code
Your app
See the full quickstart

One codebase, fully typed, backend you already have.

The three things that make build-once-run-everywhere hold up in production, not just in a demo.

  • One codebase for every host

    Build your MCP app's UI once in typed React. Synapse renders it in ChatGPT, Claude, VS Code, and your own runtime. No per-host forks, no divergent UIs to maintain.

  • Typed and agent-aware

    Your MCP app takes typed inputs from your MCP tools, so props stay honest as your server evolves. The host's agent reads and drives the UI it renders.

  • Backend-agnostic, batteries-included

    Works with your existing MCP / FastMCP server as-is. Start with the included component kit: cards, rows, tables, and status pills, or bring your own React.

The one host you can't get anywhere else? The one you run yourself.

Ship it to the public app stores, then run the exact same UI self-hosted inside your own product. One MCP app, both worlds.

Other UI frameworkssomeone else's stores, and that's the ceiling
Synapsethose same stores plus a host you run yourself
Start building
reach of one MCP app
ChatGPTpublic store
Claudepublic store
VS Codepublic store
and, the part that isn't free elsewhere
Your appself-hosted · yours

What Synapse is: the UI layer. The agent, memory, and multi-tenancy come from the host you run it in, not the SDK.

Build your UI once. Run it in every host, including your own.

Your MCP app, typed to your tools, rendered everywhere your server connects.

$npm install @nimblebrain/synapse
Read the docsQuickstart