85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import * as AppShell from "ui/layouts/AppShell/AppShell";
|
|
import { useMcpStore } from "./state";
|
|
import * as Tools from "./tools";
|
|
import { TbWorld } from "react-icons/tb";
|
|
import { McpIcon } from "./components/mcp-icon";
|
|
import { useBknd } from "ui/client/bknd";
|
|
import { Empty } from "ui/components/display/Empty";
|
|
import { Button } from "ui/components/buttons/Button";
|
|
import { appShellStore } from "ui/store";
|
|
import { useBrowserTitle } from "ui/hooks/use-browser-title";
|
|
import { RoutePathStateProvider } from "ui/hooks/use-route-path-state";
|
|
import { Route, Switch } from "wouter";
|
|
|
|
export default function ToolsMcp() {
|
|
useBrowserTitle(["MCP UI"]);
|
|
|
|
const { config } = useBknd();
|
|
const openSidebar = appShellStore((store) => store.toggleSidebar("default"));
|
|
const mcpPath = config.server.mcp.path;
|
|
|
|
if (!config.server.mcp.enabled) {
|
|
return (
|
|
<Empty
|
|
title="MCP not enabled"
|
|
description="Please enable MCP in the settings to continue."
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<RoutePathStateProvider path={"/:type?"} defaultIdentifier="tools">
|
|
<div className="flex flex-col flex-grow max-w-screen">
|
|
<AppShell.SectionHeader>
|
|
<div className="flex flex-row gap-4 items-center">
|
|
<McpIcon />
|
|
<AppShell.SectionHeaderTitle className="whitespace-nowrap truncate">
|
|
MCP UI
|
|
</AppShell.SectionHeaderTitle>
|
|
<div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
|
|
<TbWorld />
|
|
<div className="min-w-0 flex-1">
|
|
<span className="block truncate text-sm font-mono leading-none select-text">
|
|
{window.location.origin + mcpPath}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppShell.SectionHeader>
|
|
|
|
<div className="flex grow h-full">
|
|
<AppShell.Sidebar>
|
|
<Tools.Sidebar />
|
|
<AppShell.RouteAwareSectionHeaderAccordionItem
|
|
title="Resources"
|
|
identifier="resources"
|
|
>
|
|
<div className="flex flex-col flex-grow p-3 gap-3 justify-center items-center opacity-40">
|
|
<i>Resources</i>
|
|
</div>
|
|
</AppShell.RouteAwareSectionHeaderAccordionItem>
|
|
</AppShell.Sidebar>
|
|
|
|
<Switch>
|
|
<Route path="/tools/:toolName?" component={Tools.Content} />
|
|
<Route path="*">
|
|
<Empty
|
|
title="No tool selected"
|
|
description="Please select a tool to continue."
|
|
>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => openSidebar()}
|
|
className="block md:hidden"
|
|
>
|
|
Open Tools
|
|
</Button>
|
|
</Empty>
|
|
</Route>
|
|
</Switch>
|
|
</div>
|
|
</div>
|
|
</RoutePathStateProvider>
|
|
);
|
|
}
|