diff --git a/README.md b/README.md index fde095b..2e75130 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,16 @@ To make changes visible to users: --- +## Create an MCP tool + +1. Add an 'MCP' tag to your app if not present +2. Python: + - Edit [smss_driver.py](py/smss_driver.py) to follow same function structure with descriptions + - Optionally add `@mcp_execution("ask" | "auto" | "disabled")` above each method to indicate playground execution type + - Run pixel `MakePythonMCP('[YourAppId]')` to generate or refresh py_mcp.json + +--- + ## Plug-ins This repository includes several tools to help maintain code quality: diff --git a/client/.env b/client/.env index af7c9e6..adb6f83 100644 --- a/client/.env +++ b/client/.env @@ -1,4 +1,5 @@ # This file contains environment variables for the SEMOSS client application ENDPOINT="http://localhost:9090/" MODULE="/Monolith" +HOME_PAGE_ENABLED=false # APP="your-app-id" # In .env.local, this should be set to your specific app ID \ No newline at end of file diff --git a/client/README.md b/client/README.md index cb90afb..96b708e 100644 --- a/client/README.md +++ b/client/README.md @@ -16,6 +16,37 @@ After setting up your `.env.local file`, you’ll need to add a `project.propert 1. In the `java` folder (in the `client` directory), create a new file named `project.properties`. 2. Leave this blank ofr now, no configuration is currently needed, however the file must exist to ensure the backend can initialize. +## Create an MCP tool UI +1. Create a new component in the [pages](src/pages) or [mcp](src/components/mcp/) folder using the [mcp template](src/components/mcp/_templates/ToolPageTemplate.tsx) +2. Update [routes.constants.tsx](src/pages/routes.constants.tsx) to include a mapping of tool name to the new component +3. If no mapping is defined for a tool, a default UI will be displayed +4. For setting up an MCP tool on the backend, see [Create an MCP tool](../README.md#create-an-mcp-tool) in the main README + + + +### Quick Start: Adding a New Tool Page + +1. **Copy the template:** + ```bash + cp client/src/pages/_templates/ToolPageTemplate.tsx client/src/pages/MyToolName.tsx + ``` + +2. **Customize your page:** + - Update the component name from `ToolPageTemplate` to `MyToolName` + - Replace the form fields with your tool's specific parameters + - Update the title and any other text + +3. **Register the route:** + Add your page to [client/src/pages/routes.constants.tsx](client/src/pages/routes.constant.tsx): + ```tsx + export const PAGE_TYPES = { + get_stock_price: , + get_stock_history: , + my_tool_name: , // Add this line + } as const; + + + ## Essential commands 1. **pnpm i** - Install Dependencies diff --git a/client/package.json b/client/package.json index 430da41..f91c3f5 100644 --- a/client/package.json +++ b/client/package.json @@ -32,7 +32,7 @@ "@radix-ui/react-toggle": "^1.1.10", "@radix-ui/react-toggle-group": "^1.1.11", "@radix-ui/react-tooltip": "^1.2.8", - "@semoss/sdk": "^1.0.0-beta.36", + "@semoss/sdk": "^1.0.0-beta.38", "@tailwindcss/postcss": "^4.1.18", "@tailwindcss/vite": "^4.1.18", "autoprefixer": "^10.4.24", diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index 7c422e5..55885bf 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -87,8 +87,8 @@ importers: specifier: ^1.2.8 version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@semoss/sdk': - specifier: 1.0.0-beta.36 - version: 1.0.0-beta.36(react@18.3.1) + specifier: ^1.0.0-beta.38 + version: 1.0.0-beta.38(react@18.3.1) '@tailwindcss/postcss': specifier: ^4.1.18 version: 4.1.18 @@ -1122,79 +1122,66 @@ packages: resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==} cpu: [arm] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.57.1': resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==} cpu: [arm] os: [linux] - libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.57.1': resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==} cpu: [arm64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.57.1': resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==} cpu: [arm64] os: [linux] - libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.57.1': resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==} cpu: [loong64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.57.1': resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==} cpu: [loong64] os: [linux] - libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.57.1': resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==} cpu: [ppc64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.57.1': resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==} cpu: [ppc64] os: [linux] - libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.57.1': resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==} cpu: [riscv64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.57.1': resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==} cpu: [riscv64] os: [linux] - libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.57.1': resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==} cpu: [s390x] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.57.1': resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==} cpu: [x64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-musl@4.57.1': resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==} cpu: [x64] os: [linux] - libc: [musl] '@rollup/rollup-openbsd-x64@4.57.1': resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==} @@ -1226,8 +1213,8 @@ packages: cpu: [x64] os: [win32] - '@semoss/sdk@1.0.0-beta.36': - resolution: {integrity: sha512-rPzdVGx2fHyDGRVkh62U5h2K5HxrDxcZ3QfbwOsr/wS5Q0uLtp9x/L78gxDacCiPWB78CRxv5j6u+urTSJvKGg==} + '@semoss/sdk@1.0.0-beta.38': + resolution: {integrity: sha512-vZGtnp1QY3b/1qrZaCTaoTLGTwYFDOHkfT/Xxhfeeq7RVw6EHpIrZrNT11T7C7zmAvrCA08nXqSAa+7r19jSVw==} peerDependencies: react: 18.3.1 peerDependenciesMeta: @@ -1272,28 +1259,24 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-arm64-musl@4.1.18': resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [musl] '@tailwindcss/oxide-linux-x64-gnu@4.1.18': resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-x64-musl@4.1.18': resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [musl] '@tailwindcss/oxide-wasm32-wasi@4.1.18': resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==} @@ -1535,28 +1518,24 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] lightningcss-linux-arm64-musl@1.30.2: resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [musl] lightningcss-linux-x64-gnu@1.30.2: resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [glibc] lightningcss-linux-x64-musl@1.30.2: resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [musl] lightningcss-win32-arm64-msvc@1.30.2: resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==} @@ -2817,7 +2796,7 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.57.1': optional: true - '@semoss/sdk@1.0.0-beta.36(react@18.3.1)': + '@semoss/sdk@1.0.0-beta.38(react@18.3.1)': optionalDependencies: react: 18.3.1 diff --git a/client/src/components/base/DefaultToolView.tsx b/client/src/components/base/DefaultToolView.tsx new file mode 100644 index 0000000..35d5354 --- /dev/null +++ b/client/src/components/base/DefaultToolView.tsx @@ -0,0 +1,397 @@ +import { useInsight } from "@semoss/sdk/react"; +import { Loader2 } from "lucide-react"; +import { useEffect, useState } from "react"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { CardDescription, CardTitle } from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; +import { useAppContext } from "@/contexts"; +import { PAGE_TYPES } from "@/routes.constants"; +import type { MCPTool } from "@/types"; +import { LoadingScreen } from "./LoadingScreen"; + +// Function to process tool name by removing content before first underscore +const getProcessedToolName = (toolName: string) => { + const underscoreIndex = toolName.indexOf("_"); + return underscoreIndex !== -1 + ? toolName.substring(underscoreIndex + 1) + : toolName; +}; + +interface DefaultToolViewProps { + name: string; +} + +/** + * Renders a default view for MCP tools based on their input schema. If a custom page is defined in PAGE_TYPES, it renders that instead + * + * @component + */ +export const DefaultToolView: React.FC = ({ name }) => { + /** + * Library hooks + */ + const { actions, tool } = useInsight(); + const { tools, isAppDataLoading } = useAppContext(); + + /** + * State + */ + const [selectedTool, setSelectedTool] = useState(null); + const [formData, setFormData] = useState>( + tool?.parameters || {}, + ); + const [isSubmitting, setIsSubmitting] = useState(false); + + /** + * Constants + */ + const properties = selectedTool?.inputSchema?.properties || {}; + const required = selectedTool?.inputSchema?.required || []; + const toolName = tool?.name ? getProcessedToolName(tool?.name || "") : name; + const lowerName = toolName.toLocaleLowerCase(); + + /** + * Effects + */ + useEffect(() => { + // if (tools?.status === "SUCCESS") { + setSelectedTool(tools.find((a) => a.name === toolName)); + // } + }, [tools, toolName]); + + /** + * Functions + */ + const handleChange = (field: string, value: unknown) => { + setFormData({ ...formData, [field]: value }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setIsSubmitting(true); + try { + const { output } = await actions.runMCPTool(toolName, formData); + // Parse and handle output as needed + typeof output === "string" ? JSON.parse(output) : output; + } catch (_e) { + // Handle error appropriately + } finally { + setIsSubmitting(false); + } + }; + + const capitalizeWords = (str: string) => { + return str + .split(/[_\s]+/) + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); + }; + + const renderField = ( + fieldName: string, + fieldSchema: { + type: string; + description?: string; + enum?: string[]; + maxLength?: number; + minimum?: number; + maximum?: number; + }, + ) => { + const isRequired = required.includes(fieldName); + const value = formData[fieldName] ?? ""; + const displayName = capitalizeWords(fieldName); // Capitalize fieldName + + switch (fieldSchema.type) { + case "string": + if (fieldSchema.enum) { + return ( +
+
+ + + {fieldSchema.type} + +
+ + {fieldSchema.description && ( +

+ {fieldSchema.description} +

+ )} +
+ ); + } + if (fieldSchema.maxLength && fieldSchema.maxLength > 100) { + return ( +
+
+ + + {fieldSchema.type} + +
+