shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-17 04:46:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: mcp (#243)

Browse Source 
* added mcp documentation

* added mcp docs
This commit is contained in:
dswbx
2025-08-30 10:15:56 +02:00
committed by GitHub
parent 5ed1cf19b6
commit 2de12674d9
19 changed files with 1534 additions and 1288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/ui/components/code/JsonViewer.tsx
View File

@@ -42,7 +42,7 @@ export const JsonViewer = ({
copyIconProps = {},
className,
}: JsonViewerProps) => {
const size = showSize ? (json === null ? 0 : JSON.stringify(json).length) : undefined;
const size = showSize ? (!json ? 0 : JSON.stringify(json).length) : undefined;
const formattedSize = formatNumber.fileSize(size ?? 0);
const showContext = size || title || showCopy;

1
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -218,6 +218,7 @@ const SidebarResize = ({
return (
<div
data-shell="sidebar-resize"
data-active={isResizing ? 1 : undefined}
className="w-px h-full hidden md:flex bg-muted after:transition-colors relative after:absolute after:inset-0 after:-left-px after:w-[2px] select-none data-[active]:after:bg-sky-400 data-[active]:cursor-col-resize hover:after:bg-sky-400 hover:cursor-col-resize after:z-2"
onMouseDown={handleMouseDown}

3
app/src/ui/routes/tools/mcp/mcp.tsx
View File

@@ -7,8 +7,11 @@ 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";
export default function ToolsMcp() {
useBrowserTitle(["MCP UI"]);
const { config, options } = useBknd();
const feature = useMcpStore((state) => state.feature);
const setFeature = useMcpStore((state) => state.setFeature);

2
app/src/ui/routes/tools/mcp/state.ts
View File

@@ -14,7 +14,7 @@ export const useMcpStore = create(
content: null as ToolJson | null,
history: [] as { type: "request" | "response"; data: any }[],
historyLimit: 50,
historyVisible: true,
historyVisible: false,
},
(set) => ({
setTools: (tools: ToolJson[]) => set({ tools }),

149
app/src/ui/routes/tools/mcp/tools.tsx
View File

@@ -128,83 +128,82 @@ export function Content() {
} catch (e) {}
return (
<div className="flex flex-grow flex-col max-w-screen">
<Form
key={content.name}
schema={{
title: "InputSchema",
...content?.inputSchema,
}}
validateOn="submit"
initialValues={payload}
hiddenSubmit={false}
onChange={(value) => {
setPayload(value);
}}
onSubmit={handleSubmit}
>
<AppShell.SectionHeader
className="max-w-full min-w-0"
right={
<div className="flex flex-row gap-2">
<IconButton
Icon={historyVisible ? TbHistory : TbHistoryOff}
onClick={() => setHistoryVisible(!historyVisible)}
/>
<Button
type="submit"
disabled={!content?.name || isPending}
variant="primary"
className="whitespace-nowrap"
>
Call Tool
</Button>
</div>
}
>
<AppShell.SectionHeaderTitle className="leading-tight">
<span className="opacity-50">
Tools <span className="opacity-70">/</span>
</span>{" "}
<span className="truncate">{content?.name}</span>
</AppShell.SectionHeaderTitle>
</AppShell.SectionHeader>
<div className="flex flex-grow flex-row w-vw">
<div className="flex flex-grow flex-col w-full">
<AppShell.Scrollable>
<div key={JSON.stringify(content)} className="flex flex-col py-4 px-5 gap-4">
<p className="text-primary/80">{content?.description}</p>
{hasInputSchema && <Field name="" />}
<JsonViewerTabs
ref={jsonViewerTabsRef}
expand={9}
showCopy
showSize
tabs={{
Arguments: {
json: payload,
title: "Payload",
enabled: hasInputSchema,
},
Result: { json: readableResult, title: "Result" },
Configuration: {
json: content ?? null,
title: "Configuration",
},
}}
/>
</div>
</AppShell.Scrollable>
<Form
className="flex flex-grow flex-col max-w-screen"
key={content.name}
schema={{
title: "InputSchema",
...content?.inputSchema,
}}
validateOn="submit"
initialValues={payload}
hiddenSubmit={false}
onChange={(value) => {
setPayload(value);
}}
onSubmit={handleSubmit}
>
<AppShell.SectionHeader
className="max-w-full min-w-0"
right={
<div className="flex flex-row gap-2">
<IconButton
Icon={historyVisible ? TbHistory : TbHistoryOff}
onClick={() => setHistoryVisible(!historyVisible)}
/>
<Button
type="submit"
disabled={!content?.name || isPending}
variant="primary"
className="whitespace-nowrap"
>
Call Tool
</Button>
</div>
{historyVisible && (
<AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.4}>
<History />
</AppShell.Sidebar>
)}
}
>
<AppShell.SectionHeaderTitle className="leading-tight">
<span className="opacity-50">
Tools <span className="opacity-70">/</span>
</span>{" "}
<span className="truncate">{content?.name}</span>
</AppShell.SectionHeaderTitle>
</AppShell.SectionHeader>
<div className="flex flex-grow flex-row w-vw">
<div className="flex flex-grow flex-col w-full">
<AppShell.Scrollable>
<div key={JSON.stringify(content)} className="flex flex-col py-4 px-5 gap-4">
<p className="text-primary/80">{content?.description}</p>
{hasInputSchema && <Field name="" />}
<JsonViewerTabs
ref={jsonViewerTabsRef}
expand={9}
showCopy
showSize
tabs={{
Arguments: {
json: payload,
title: "Payload",
enabled: hasInputSchema,
},
Result: { json: readableResult, title: "Result" },
Configuration: {
json: content ?? null,
title: "Configuration",
},
}}
/>
</div>
</AppShell.Scrollable>
</div>
</Form>
</div>
{historyVisible && (
<AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.4}>
<History />
</AppShell.Sidebar>
)}
</div>
</Form>
);
}