mcpgraph-ux 0.1.0

package/components/ToolTester.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import styles from './ToolTester.module.css';
+
+interface ToolTesterProps {
+  toolName: string;
+}
+
+interface ToolInfo {
+  name: string;
+  description: string;
+  inputSchema: {
+    type: string;
+    properties?: Record<string, any>;
+    required?: string[];
+  };
+  outputSchema?: {
+    type: string;
+    properties?: Record<string, any>;
+  };
+}
+
+export default function ToolTester({ toolName }: ToolTesterProps) {
+  const [toolInfo, setToolInfo] = useState<ToolInfo | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Load tool info
+    fetch(`/api/tools/${toolName}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.error) {
+          setError(data.error);
+          return;
+        }
+        setToolInfo(data.tool);
+        // Initialize form data with default values
+        const defaults: Record<string, any> = {};
+        if (data.tool.inputSchema.properties) {
+          Object.entries(data.tool.inputSchema.properties).forEach(([key, prop]: [string, any]) => {
+            if (prop.type === 'string') {
+              defaults[key] = '';
+            } else if (prop.type === 'number') {
+              defaults[key] = 0;
+            } else if (prop.type === 'boolean') {
+              defaults[key] = false;
+            } else if (prop.type === 'array') {
+              defaults[key] = [];
+            } else if (prop.type === 'object') {
+              defaults[key] = {};
+            }
+          });
+        }
+        setFormData(defaults);
+      })
+      .catch(err => {
+        setError(err.message);
+      });
+  }, [toolName]);
+
+  const handleInputChange = (key: string, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch(`/api/tools/${toolName}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ args: formData }),
+      });
+
+      const data = await response.json();
+      
+      if (data.error) {
+        setError(data.error);
+      } else {
+        setResult(data.result);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderInputField = (key: string, prop: any) => {
+    const isRequired = toolInfo?.inputSchema.required?.includes(key);
+    const value = formData[key] ?? '';
+
+    switch (prop.type) {
+      case 'string':
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <input
+              type="text"
+              value={value}
+              onChange={e => handleInputChange(key, e.target.value)}
+              className={styles.input}
+              placeholder={prop.description || `Enter ${key}`}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'number':
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <input
+              type="number"
+              value={value}
+              onChange={e => handleInputChange(key, parseFloat(e.target.value) || 0)}
+              className={styles.input}
+              placeholder={prop.description || `Enter ${key}`}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'boolean':
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.checkboxLabel}>
+              <input
+                type="checkbox"
+                checked={value}
+                onChange={e => handleInputChange(key, e.target.checked)}
+                className={styles.checkbox}
+              />
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'array':
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <textarea
+              value={Array.isArray(value) ? JSON.stringify(value, null, 2) : '[]'}
+              onChange={e => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleInputChange(key, parsed);
+                } catch {
+                  // Invalid JSON, ignore
+                }
+              }}
+              className={styles.textarea}
+              placeholder={prop.description || `Enter ${key} as JSON array`}
+              rows={3}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'object':
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <textarea
+              value={typeof value === 'object' ? JSON.stringify(value, null, 2) : '{}'}
+              onChange={e => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleInputChange(key, parsed);
+                } catch {
+                  // Invalid JSON, ignore
+                }
+              }}
+              className={styles.textarea}
+              placeholder={prop.description || `Enter ${key} as JSON object`}
+              rows={5}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      default:
+        return (
+          <div key={key} className={styles.field}>
+            <label className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <textarea
+              value={typeof value === 'string' ? value : JSON.stringify(value)}
+              onChange={e => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleInputChange(key, parsed);
+                } catch {
+                  handleInputChange(key, e.target.value);
+                }
+              }}
+              className={styles.textarea}
+              placeholder={prop.description || `Enter ${key}`}
+              rows={3}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+    }
+  };
+
+  if (!toolInfo) {
+    return <div className={styles.loading}>Loading tool information...</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <form onSubmit={handleSubmit} className={styles.form}>
+        <div className={styles.inputs}>
+          {toolInfo.inputSchema.properties &&
+            Object.entries(toolInfo.inputSchema.properties).map(([key, prop]) =>
+              renderInputField(key, prop)
+            )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className={styles.submitButton}
+        >
+          {loading ? 'Testing...' : 'Test Tool'}
+        </button>
+      </form>
+
+      {error && (
+        <div className={styles.error}>
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {result && (
+        <div className={styles.result}>
+          <h3>Result:</h3>
+          <pre className={styles.resultContent}>
+            {JSON.stringify(result, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
+

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "mcpgraph-ux",
+  "version": "0.1.0",
+  "description": "Visual interface for mcpGraph - visualize and test MCP tool execution graphs",
+  "main": "server.ts",
+  "bin": {
+    "mcpgraph-ux": "./server.ts"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "server": "tsx server.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "app",
+    "components",
+    "server.ts",
+    "next.config.js",
+    "tsconfig.json",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "dependencies": {
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "reactflow": "^11.11.0",
+    "mcpgraph": "^0.1.4",
+    "zod": "^3.22.4",
+    "dagre": "^0.8.5",
+    "tsx": "^4.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/dagre": "^0.7.52",
+    "typescript": "^5.3.3",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.0"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "graph",
+    "workflow",
+    "visualization",
+    "react-flow",
+    "dagre",
+    "nextjs"
+  ],
+  "author": "TeamSpark, LLC <support@teamspark.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TeamSparkAI/mcpGraph-ux.git"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}
+

package/server.ts

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+/**
+ * Server entry point for mcpGraph UX
+ * 
+ * Usage: npm run server <port> <config-path>
+ * Example: npm run server 3000 ../mcpGraph/examples/count_files.yaml
+ * 
+ * Or with tsx directly:
+ * tsx server.ts 3000 ../mcpGraph/examples/count_files.yaml
+ */
+
+import { createServer } from 'http';
+import { parse } from 'url';
+import next from 'next';
+import { resolve } from 'path';
+
+const port = parseInt(process.argv[2] || '3000', 10);
+const configPathArg = process.argv[3];
+
+if (!configPathArg) {
+  console.error('Usage: npm run server <port> <config-path>');
+  console.error('Example: npm run server 3000 ../mcpGraph/examples/count_files.yaml');
+  process.exit(1);
+}
+
+// Resolve config path to absolute path
+const configPath = resolve(process.cwd(), configPathArg);
+
+// Store config path in environment variable for API routes
+process.env.MCPGRAPH_CONFIG_PATH = configPath;
+
+const dev = process.env.NODE_ENV !== 'production';
+const app = next({ dev });
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url!, true);
+    handle(req, res, parsedUrl);
+  }).listen(port, (err?: Error) => {
+    if (err) throw err;
+    console.log(`> Ready on http://localhost:${port}`);
+    console.log(`> Config path: ${configPath}`);
+  });
+});
+

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+