Spaces:

ohmygaugh
/

agent-mcp-sql

No application file

App Files Files Community

Timothy Eastridge commited on Sep 23

Commit

75c3e99

1 Parent(s): 12db5fc

step 8

Browse files

Files changed (11) hide show

docker-compose.yml +9 -0
frontend/Dockerfile +12 -0
frontend/app/globals.css +7 -0
frontend/app/layout.tsx +13 -0
frontend/app/page.tsx +532 -0
frontend/next.config.js +6 -0
frontend/package.json +25 -0
frontend/postcss.config.js +6 -0
frontend/tailwind.config.js +11 -0
frontend/tsconfig.json +24 -0
frontend/types/cytoscape-fcose.d.ts +16 -0

docker-compose.yml CHANGED Viewed

@@ -62,6 +62,15 @@ services:
       - mcp
       - neo4j
 volumes:
   neo4j_data:
   postgres_data:

       - mcp
       - neo4j
+  frontend:
+    build: ./frontend
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_MCP_URL=http://mcp:8000
+    depends_on:
+      - mcp
 volumes:
   neo4j_data:
   postgres_data:

frontend/Dockerfile ADDED Viewed

	@@ -0,0 +1,12 @@

+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["npm", "start"]

frontend/app/globals.css ADDED Viewed

	@@ -0,0 +1,7 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+body {
+  @apply bg-gray-50;
+}

frontend/app/layout.tsx ADDED Viewed

	@@ -0,0 +1,13 @@

+import './globals.css'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

frontend/app/page.tsx ADDED Viewed

	@@ -0,0 +1,532 @@

+'use client';
+import { useState, useEffect, useRef } from 'react';
+import cytoscape from 'cytoscape';
+import fcose from 'cytoscape-fcose';
+cytoscape.use(fcose);
+const MCP_URL = process.env.NEXT_PUBLIC_MCP_URL || 'http://localhost:8000';
+const API_KEY = 'dev-key-123';
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+}
+interface WorkflowStatus {
+  workflow_id: string;
+  current_instruction: string;
+  status: string;
+  pause_remaining?: number;
+}
+export default function ChatPage() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [workflowStatus, setWorkflowStatus] = useState<WorkflowStatus | null>(null);
+  const [lastInstructions, setLastInstructions] = useState<any[]>([]);
+  const [graphData, setGraphData] = useState<any>(null);
+  const cyContainer = useRef<HTMLDivElement>(null);
+  const cyRef = useRef<any>(null);
+  // MCP API call helper
+  const callMCP = async (tool: string, params: any = {}) => {
+    const response = await fetch(`${MCP_URL}/mcp`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-Key': API_KEY,
+      },
+      body: JSON.stringify({ tool, params }),
+    });
+    return response.json();
+  };
+  // Poll for workflow status
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        // Get active workflow
+        const result = await callMCP('query_graph', {
+          query: `
+            MATCH (w:Workflow {status: 'active'})-[:HAS_INSTRUCTION]->(i:Instruction {status: 'executing'})
+            RETURN w.id as workflow_id, i.id as current_instruction, i.type as instruction_type,
+                   i.status as status, i.pause_duration as pause_duration
+            ORDER BY i.sequence DESC
+            LIMIT 1
+          `,
+        });
+        if (result.data && result.data.length > 0) {
+          const data = result.data[0];
+          setWorkflowStatus({
+            workflow_id: data.workflow_id,
+            current_instruction: data.instruction_type,
+            status: data.status,
+          });
+        } else {
+          setWorkflowStatus(null);
+        }
+        // Get last 5 instructions
+        const instructionsResult = await callMCP('query_graph', {
+          query: `
+            MATCH (i:Instruction)-[:EXECUTED_AS]->(e:Execution)
+            RETURN i.id as id, i.type as type, i.status as status,
+                   e.completed_at as completed_at
+            ORDER BY e.completed_at DESC
+            LIMIT 5
+          `,
+        });
+        if (instructionsResult.data) {
+          setLastInstructions(instructionsResult.data);
+        }
+        // Update graph visualization
+        await updateGraph();
+      } catch (error) {
+        console.error('Error polling status:', error);
+      }
+    }, 5000); // Poll every 5 seconds
+    return () => clearInterval(interval);
+  }, []);
+  // Initialize and update graph
+  const updateGraph = async () => {
+    try {
+      const result = await callMCP('query_graph', {
+        query: `
+          MATCH (w:Workflow {status: 'active'})-[:HAS_INSTRUCTION]->(i:Instruction)
+          OPTIONAL MATCH (i)-[:NEXT_INSTRUCTION]->(next)
+          RETURN w, i, next
+        `,
+      });
+      if (!result.data || result.data.length === 0) return;
+      const nodes: any[] = [];
+      const edges: any[] = [];
+      const nodeIds = new Set();
+      // Add workflow node
+      const workflow = result.data[0].w;
+      if (workflow && !nodeIds.has(workflow.id)) {
+        nodes.push({
+          data: {
+            id: workflow.id,
+            label: workflow.name || 'Workflow',
+            type: 'workflow',
+            status: workflow.status
+          }
+        });
+        nodeIds.add(workflow.id);
+      }
+      // Add instruction nodes and edges
+      result.data.forEach((row: any) => {
+        const instruction = row.i;
+        const next = row.next;
+        if (instruction && !nodeIds.has(instruction.id)) {
+          nodes.push({
+            data: {
+              id: instruction.id,
+              label: instruction.type,
+              type: 'instruction',
+              status: instruction.status
+            }
+          });
+          nodeIds.add(instruction.id);
+          // Add edge from workflow to instruction
+          if (workflow) {
+            edges.push({
+              data: {
+                id: `${workflow.id}-${instruction.id}`,
+                source: workflow.id,
+                target: instruction.id
+              }
+            });
+          }
+        }
+        // Add next instruction edge
+        if (instruction && next) {
+          edges.push({
+            data: {
+              id: `${instruction.id}-${next.id}`,
+              source: instruction.id,
+              target: next.id
+            }
+          });
+        }
+      });
+      // Initialize or update Cytoscape
+      if (!cyRef.current && cyContainer.current) {
+        cyRef.current = cytoscape({
+          container: cyContainer.current,
+          elements: { nodes, edges },
+          style: [
+            {
+              selector: 'node',
+              style: {
+                'label': 'data(label)',
+                'text-valign': 'center',
+                'text-halign': 'center',
+                'width': '80px',
+                'height': '80px',
+                'font-size': '12px',
+                'background-color': (ele: any) => {
+                  const status = ele.data('status');
+                  if (status === 'complete') return '#10B981';
+                  if (status === 'executing') return '#FCD34D';
+                  if (status === 'failed') return '#EF4444';
+                  return '#9CA3AF';
+                }
+              }
+            },
+            {
+              selector: 'edge',
+              style: {
+                'width': 2,
+                'line-color': '#9CA3AF',
+                'target-arrow-color': '#9CA3AF',
+                'target-arrow-shape': 'triangle',
+                'curve-style': 'bezier'
+              }
+            }
+          ],
+          layout: {
+            name: 'fcose'
+          }
+        });
+        // Add click handler for nodes
+        cyRef.current.on('tap', 'node', function(evt: any) {
+          const node = evt.target;
+          alert(`Node: ${node.data('label')}\nStatus: ${node.data('status')}\nID: ${node.data('id')}`);
+        });
+      } else if (cyRef.current) {
+        // Update existing graph
+        cyRef.current.json({ elements: { nodes, edges } });
+        cyRef.current.layout({ name: 'fcose' }).run();
+      }
+    } catch (error) {
+      console.error('Error updating graph:', error);
+    }
+  };
+  // Handle message submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || loading) return;
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+      timestamp: new Date(),
+    };
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setLoading(true);
+    try {
+      // Create a new workflow with the user's question
+      const workflowResult = await callMCP('write_graph', {
+        action: 'create_node',
+        label: 'Workflow',
+        properties: {
+          id: `workflow-${Date.now()}`,
+          name: `Query: ${input.substring(0, 50)}`,
+          status: 'active',
+          created_at: new Date().toISOString(),
+        },
+      });
+      // Create instructions for the workflow
+      const instructions = [
+        { type: 'discover_schema', sequence: 1 },
+        { type: 'generate_sql', sequence: 2, parameters: JSON.stringify({ question: input }) },
+        { type: 'review_results', sequence: 3 },
+      ];
+      for (const inst of instructions) {
+        const instResult = await callMCP('write_graph', {
+          action: 'create_node',
+          label: 'Instruction',
+          properties: {
+            id: `inst-${Date.now()}-${inst.sequence}`,
+            type: inst.type,
+            sequence: inst.sequence,
+            status: 'pending',
+            pause_duration: 30, // Shorter pause for demo
+            parameters: inst.parameters || '{}',
+          },
+        });
+        // Link instruction to workflow
+        await callMCP('query_graph', {
+          query: `
+            MATCH (w:Workflow {id: $wid}), (i:Instruction {id: $iid})
+            CREATE (w)-[:HAS_INSTRUCTION]->(i)
+          `,
+          parameters: {
+            wid: workflowResult.created.id,
+            iid: instResult.created.id,
+          },
+        });
+      }
+      // Create instruction chain
+      const instIds = instructions.map((_, i) => `inst-${Date.now()}-${i + 1}`);
+      for (let i = 0; i < instIds.length - 1; i++) {
+        await callMCP('query_graph', {
+          query: `
+            MATCH (i1:Instruction {id: $id1}), (i2:Instruction {id: $id2})
+            CREATE (i1)-[:NEXT_INSTRUCTION]->(i2)
+          `,
+          parameters: { id1: instIds[i], id2: instIds[i + 1] },
+        });
+      }
+      const systemMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'system',
+        content: 'Workflow created! The agent will now process your request...',
+        timestamp: new Date(),
+      };
+      setMessages(prev => [...prev, systemMessage]);
+      // Poll for results
+      const pollForResults = async () => {
+        let attempts = 0;
+        const maxAttempts = 60; // 5 minutes max
+        while (attempts < maxAttempts) {
+          await new Promise(resolve => setTimeout(resolve, 5000));
+          // Check if SQL generation is complete
+          const execResult = await callMCP('query_graph', {
+            query: `
+              MATCH (i:Instruction {type: 'generate_sql'})-[:EXECUTED_AS]->(e:Execution)
+              WHERE i.id IN $inst_ids
+              RETURN e.result as result
+              ORDER BY e.completed_at DESC
+              LIMIT 1
+            `,
+            parameters: { inst_ids: instIds },
+          });
+          if (execResult.data && execResult.data.length > 0) {
+            const result = JSON.parse(execResult.data[0].result);
+            if (result.status === 'success') {
+              const assistantMessage: Message = {
+                id: (Date.now() + 2).toString(),
+                role: 'assistant',
+                content: formatSQLResult(result),
+                timestamp: new Date(),
+              };
+              setMessages(prev => [...prev, assistantMessage]);
+              break;
+            }
+          }
+          attempts++;
+        }
+      };
+      pollForResults();
+    } catch (error) {
+      console.error('Error creating workflow:', error);
+      const errorMessage: Message = {
+        id: (Date.now() + 2).toString(),
+        role: 'system',
+        content: 'Error: Failed to process your request',
+        timestamp: new Date(),
+      };
+      setMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // Format SQL results for display
+  const formatSQLResult = (result: any) => {
+    if (!result.data || result.data.length === 0) {
+      return `Query executed successfully but returned no results.\n\nSQL: ${result.generated_sql}`;
+    }
+    const columns = Object.keys(result.data[0]);
+    const rows = result.data;
+    let table = '<table class="min-w-full border border-gray-300">';
+    table += '<thead><tr class="bg-gray-100">';
+    columns.forEach(col => {
+      table += `<th class="px-4 py-2 border">${col}</th>`;
+    });
+    table += '</tr></thead><tbody>';
+    rows.forEach((row: any) => {
+      table += '<tr>';
+      columns.forEach(col => {
+        table += `<td class="px-4 py-2 border">${row[col] ?? 'null'}</td>`;
+      });
+      table += '</tr>';
+    });
+    table += '</tbody></table>';
+    return `
+      <div>
+        <p class="mb-2"><strong>Generated SQL:</strong></p>
+        <code class="block bg-gray-100 p-2 mb-4 rounded">${result.generated_sql}</code>
+        <p class="mb-2"><strong>Results (${result.row_count} rows):</strong></p>
+        ${table}
+      </div>
+    `;
+  };
+  // Handle stop button
+  const handleStop = async () => {
+    if (!workflowStatus) return;
+    await callMCP('query_graph', {
+      query: `MATCH (w:Workflow {id: $id}) SET w.status = 'stopped'`,
+      parameters: { id: workflowStatus.workflow_id },
+    });
+    setWorkflowStatus(null);
+  };
+  return (
+    <div className="flex h-screen">
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Header */}
+        <div className="bg-white border-b px-6 py-4">
+          <h1 className="text-2xl font-bold">Graph-Driven Agent Chat</h1>
+          {workflowStatus && (
+            <div className="mt-2 flex items-center space-x-4">
+              <span className="text-sm text-gray-600">
+                Status: <span className="font-semibold">{workflowStatus.status}</span>
+              </span>
+              <span className="text-sm text-gray-600">
+                Current: <span className="font-semibold">{workflowStatus.current_instruction}</span>
+              </span>
+              {loading && (
+                <span className="text-sm text-yellow-600 animate-pulse">
+                  Agent thinking...
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {messages.map(message => (
+            <div
+              key={message.id}
+              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-2xl px-4 py-2 rounded-lg ${
+                  message.role === 'user'
+                    ? 'bg-blue-500 text-white'
+                    : message.role === 'assistant'
+                    ? 'bg-gray-200'
+                    : 'bg-yellow-100'
+                }`}
+              >
+                {message.content.startsWith('<div>') ? (
+                  <div dangerouslySetInnerHTML={{ __html: message.content }} />
+                ) : (
+                  <p>{message.content}</p>
+                )}
+                <p className="text-xs mt-1 opacity-70">
+                  {message.timestamp.toLocaleTimeString()}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        {/* Input Form */}
+        <form onSubmit={handleSubmit} className="border-t bg-white p-4">
+          <div className="flex space-x-4">
+            <input
+              type="text"
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              placeholder="Ask a question about your data..."
+              className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+            />
+            <button
+              type="submit"
+              disabled={loading || !input.trim()}
+              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400"
+            >
+              Send
+            </button>
+            {workflowStatus && (
+              <button
+                type="button"
+                onClick={handleStop}
+                className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+              >
+                STOP
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+      {/* Right Sidebar */}
+      <div className="w-96 bg-gray-50 border-l flex flex-col">
+        {/* Graph Visualization */}
+        <div className="flex-1 p-4">
+          <h2 className="text-lg font-semibold mb-2">Workflow Graph</h2>
+          <div
+            ref={cyContainer}
+            className="w-full h-64 bg-white border rounded-lg"
+          />
+        </div>
+        {/* Recent Instructions */}
+        <div className="p-4 border-t">
+          <h2 className="text-lg font-semibold mb-2">Recent Instructions</h2>
+          <div className="space-y-2">
+            {lastInstructions.map((inst, idx) => (
+              <div key={idx} className="text-sm bg-white p-2 rounded border">
+                <span className={`font-semibold ${
+                  inst.status === 'complete' ? 'text-green-600' :
+                  inst.status === 'failed' ? 'text-red-600' :
+                  'text-gray-600'
+                }`}>
+                  {inst.type}
+                </span>
+                <span className="text-gray-500 ml-2">
+                  {inst.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/next.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // App directory is enabled by default in Next.js 13+
+}
+module.exports = nextConfig

frontend/package.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "name": "agent-frontend",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.2.2",
+    "@types/react": "18.2.0",
+    "@types/node": "20.8.0",
+    "cytoscape": "3.27.0",
+    "cytoscape-fcose": "2.2.0",
+    "@types/cytoscape": "3.19.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "3.3.5",
+    "autoprefixer": "10.4.16",
+    "postcss": "8.4.31"
+  }
+}

frontend/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/tsconfig.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}

frontend/types/cytoscape-fcose.d.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+declare module 'cytoscape-fcose' {
+  import { Core } from 'cytoscape';
+  interface FcoseLayoutOptions {
+    name: string;
+    animate?: boolean;
+    randomize?: boolean;
+    fit?: boolean;
+    padding?: number;
+    nodeRepulsion?: number;
+    idealEdgeLength?: number;
+  }
+  function fcose(cytoscape: (options?: any) => Core): void;
+  export = fcose;
+}