apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-12 22:42:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(web): add hosted and self-host MCP client configs

Browse source
This commit is contained in:
CREDO23 2026-07-07 18:06:04 +02:00
parent 6da1dd8f86
commit 6b204a2f8c
4 changed files with 350 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

102
surfsense_web/components/mcp/agent-setup-tabs.tsx
View file

@ -9,6 +9,8 @@ import {
DEFAULT_SERVER_DIR,
MCP_CLIENTS,
type McpSnippetOptions,
type McpTransport,
REMOTE_URL,
} from "@/lib/mcp/clients";
function CopyButton({ text }: { text: string }) {
@ -38,48 +40,82 @@ function CopyButton({ text }: { text: string }) {
);
}
const TRANSPORTS: { id: McpTransport; label: string; hint: string }[] = [
{ id: "remote", label: "Hosted", hint: "mcp.surfsense.com — nothing to install" },
{ id: "stdio", label: "Self-host", hint: "run the server against your own backend" },
];
/**
* Per-agent MCP setup instructions as tabs: pick a client, follow its steps,
* copy its exact config. Used on the /mcp-server marketing page and in the
* API playground; `options` fills in real values where the caller has them.
* Per-agent MCP setup instructions as tabs: pick a client, then Hosted or
* Self-host, and copy its exact config. Used on the /mcp-server marketing page
* and in the API playground; `options` fills in real values where the caller
* has them.
*/
export function AgentSetupTabs({ options }: { options?: Partial<McpSnippetOptions> }) {
const [transport, setTransport] = useState<McpTransport>("remote");
const resolved: McpSnippetOptions = {
baseUrl: options?.baseUrl || "https://api.surfsense.com",
remoteUrl: options?.remoteUrl || REMOTE_URL,
apiKey: options?.apiKey || API_KEY_PLACEHOLDER,
baseUrl: options?.baseUrl || "https://api.surfsense.com",
serverDir: options?.serverDir || DEFAULT_SERVER_DIR,
};
const active = TRANSPORTS.find((t) => t.id === transport) ?? TRANSPORTS[0];
return (
<Tabs defaultValue={MCP_CLIENTS[0].id} className="w-full">
<TabsList className="flex h-auto flex-wrap justify-start gap-1">
{MCP_CLIENTS.map((client) => (
<TabsTrigger key={client.id} value={client.id}>
{client.label}
</TabsTrigger>
))}
</TabsList>
{MCP_CLIENTS.map((client) => {
const config = client.buildConfig(resolved);
return (
<TabsContent key={client.id} value={client.id} className="space-y-3">
<ol className="list-decimal space-y-1 pl-5 text-sm leading-relaxed text-muted-foreground">
{client.steps.map((step) => (
<li key={step}>{step}</li>
))}
</ol>
<div>
<p className="mb-1.5 font-mono text-xs text-muted-foreground">{client.configFile}</p>
<div className="relative">
<CopyButton text={config} />
<pre className="overflow-x-auto rounded-lg border bg-muted/50 p-4 font-mono text-xs leading-relaxed">
<code>{config}</code>
</pre>
<div className="space-y-4">
<div className="flex flex-wrap items-center gap-3">
<div className="inline-flex rounded-lg border bg-muted/40 p-0.5">
{TRANSPORTS.map((t) => (
<Button
key={t.id}
variant={t.id === transport ? "secondary" : "ghost"}
size="sm"
className="h-7 px-3 text-xs"
onClick={() => setTransport(t.id)}
aria-pressed={t.id === transport}
>
{t.label}
</Button>
))}
</div>
<span className="text-xs text-muted-foreground">{active.hint}</span>
</div>
<Tabs defaultValue={MCP_CLIENTS[0].id} className="w-full">
<TabsList className="flex h-auto flex-wrap justify-start gap-1">
{MCP_CLIENTS.map((client) => (
<TabsTrigger key={client.id} value={client.id}>
{client.label}
</TabsTrigger>
))}
</TabsList>
{MCP_CLIENTS.map((client) => {
const snippet = client[transport];
const config = snippet.build(resolved);
return (
<TabsContent key={client.id} value={client.id} className="space-y-3">
<ol className="list-decimal space-y-1 pl-5 text-sm leading-relaxed text-muted-foreground">
{snippet.steps.map((step) => (
<li key={step}>{step}</li>
))}
</ol>
<div>
<p className="mb-1.5 font-mono text-xs text-muted-foreground">
{snippet.configFile}
</p>
<div className="relative">
<CopyButton text={config} />
<pre className="overflow-x-auto rounded-lg border bg-muted/50 p-4 font-mono text-xs leading-relaxed">
<code>{config}</code>
</pre>
</div>
</div>
</div>
</TabsContent>
);
})}
</Tabs>
</TabsContent>
);
})}
</Tabs>
</div>
);
}