@crownpeak/dqm-react-component-dev-mcp 1.2.0

package/data/probe/examples/chat/test-mcp-probe-server.js

@@ -0,0 +1,161 @@
+#!/usr/bin/env node
+
+/**
+ * Test direct connection to Probe MCP server
+ * This tests the MCP server without requiring AI API keys
+ */
+
+import { MCPClientManager } from '@probelabs/probe/agent/mcp';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+async function testProbeMCP() {
+  console.log('=== Testing Probe MCP Server Connection ===\n');
+
+  // Create configuration for Probe MCP server
+  const config = {
+    mcpServers: {
+      'probe': {
+        command: 'npx',
+        args: ['-y', '@probelabs/probe@latest', 'mcp'],
+        transport: 'stdio',
+        enabled: true
+      }
+    }
+  };
+
+  const manager = new MCPClientManager({ debug: true });
+
+  try {
+    // Step 1: Connect to server
+    console.log('📡 Connecting to Probe MCP server...\n');
+    const result = await manager.initialize(config);
+
+    console.log(`\n✅ Connected successfully!`);
+    console.log(`📊 Connection summary:`);
+    console.log(`   - Servers connected: ${result.connected}/${result.total}`);
+    console.log(`   - Total tools available: ${result.tools.length}`);
+    console.log(`   - Tool names: ${result.tools.join(', ')}\n`);
+
+    // Step 2: Get tool details
+    const tools = manager.getTools();
+    console.log('🛠️  Tool Details:');
+    console.log('─'.repeat(60));
+
+    for (const [name, tool] of Object.entries(tools)) {
+      console.log(`\n📦 ${name}`);
+      console.log(`   Server: ${tool.serverName}`);
+      console.log(`   Description: ${tool.description}`);
+
+      if (tool.inputSchema) {
+        console.log('   Parameters:');
+        const props = tool.inputSchema.properties || {};
+        for (const [param, schema] of Object.entries(props)) {
+          const required = tool.inputSchema.required?.includes(param) ? ' (required)' : '';
+          console.log(`     - ${param}: ${schema.type}${required} - ${schema.description || 'No description'}`);
+        }
+      }
+    }
+
+    console.log('\n' + '─'.repeat(60));
+
+    // Step 3: Test actual tool calls
+    console.log('\n🧪 Testing Tool Execution:\n');
+
+    // Test search_code
+    console.log('1. Testing probe_search_code...');
+    try {
+      const searchResult = await manager.callTool('probe_search_code', {
+        query: 'MCP',
+        path: process.cwd(),
+        max_results: 2
+      });
+
+      if (searchResult.content && searchResult.content[0]) {
+        const content = searchResult.content[0].text;
+        const lines = content.split('\n').slice(0, 10);
+        console.log('   ✅ Search successful! First 10 lines of results:');
+        lines.forEach(line => console.log(`      ${line}`));
+      }
+    } catch (error) {
+      console.log(`   ❌ Search failed: ${error.message}`);
+    }
+
+    // Test query_code
+    console.log('\n2. Testing probe_query_code...');
+    try {
+      const queryResult = await manager.callTool('probe_query_code', {
+        pattern: 'class $NAME',
+        path: process.cwd(),
+        language: 'javascript',
+        max_results: 2
+      });
+
+      if (queryResult.content && queryResult.content[0]) {
+        const content = queryResult.content[0].text;
+        const lines = content.split('\n').slice(0, 10);
+        console.log('   ✅ Query successful! First 10 lines of results:');
+        lines.forEach(line => console.log(`      ${line}`));
+      }
+    } catch (error) {
+      console.log(`   ❌ Query failed: ${error.message}`);
+    }
+
+    // Test extract_code
+    console.log('\n3. Testing probe_extract_code...');
+    try {
+      const extractResult = await manager.callTool('probe_extract_code', {
+        files: [`${join(dirname(fileURLToPath(import.meta.url)), 'probeChat.js')}:1-20`]
+      });
+
+      if (extractResult.content && extractResult.content[0]) {
+        const content = extractResult.content[0].text;
+        const lines = content.split('\n').slice(0, 10);
+        console.log('   ✅ Extract successful! First 10 lines:');
+        lines.forEach(line => console.log(`      ${line}`));
+      }
+    } catch (error) {
+      console.log(`   ❌ Extract failed: ${error.message}`);
+    }
+
+    // Step 4: Test for Vercel AI SDK compatibility
+    console.log('\n\n🔄 Testing Vercel AI SDK Compatibility:\n');
+    const vercelTools = manager.getVercelTools();
+    console.log(`✅ ${Object.keys(vercelTools).length} tools converted for Vercel AI SDK`);
+
+    // Test executing a tool through Vercel wrapper
+    const searchTool = vercelTools['probe_search_code'];
+    if (searchTool) {
+      console.log('\nTesting Vercel-wrapped tool execution...');
+      try {
+        const result = await searchTool.execute({
+          query: 'export',
+          path: process.cwd(),
+          max_results: 1
+        });
+
+        console.log('   ✅ Vercel wrapper works! Result preview:');
+        console.log(`      ${result.substring(0, 200)}...`);
+      } catch (error) {
+        console.log(`   ❌ Vercel wrapper failed: ${error.message}`);
+      }
+    }
+
+    // Cleanup
+    console.log('\n\n🔌 Disconnecting...');
+    await manager.disconnect();
+    console.log('✅ Disconnected successfully');
+
+    console.log('\n' + '='.repeat(60));
+    console.log('✨ All tests completed successfully!');
+    console.log('='.repeat(60));
+
+  } catch (error) {
+    console.error('\n❌ Test failed:', error);
+    await manager.disconnect().catch(() => {});
+    process.exit(1);
+  }
+}
+
+// Run the test
+testProbeMCP().catch(console.error);

package/data/probe/examples/chat/test-mcp-with-ai.js

@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+
+/**
+ * Test MCP integration with real AI model
+ * This tests the full flow: MCP server -> Tools -> AI -> Response
+ */
+
+import 'dotenv/config';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { createOpenAI } from '@ai-sdk/openai';
+import { createGoogleGenerativeAI } from '@ai-sdk/google';
+import { generateText, tool } from 'ai';
+import { z } from 'zod';
+import { MCPClientManager } from '@probelabs/probe/agent/mcp';
+import { writeFileSync } from 'fs';
+
+// Check for API keys
+const hasAnthropic = !!process.env.ANTHROPIC_API_KEY;
+const hasOpenAI = !!process.env.OPENAI_API_KEY;
+const hasGoogle = !!process.env.GOOGLE_API_KEY || !!process.env.GOOGLE_AI_API_KEY;
+
+if (!hasAnthropic && !hasOpenAI && !hasGoogle) {
+  console.error('❌ No API keys found. Please set ANTHROPIC_API_KEY, OPENAI_API_KEY, or GOOGLE_API_KEY');
+  process.exit(1);
+}
+
+async function testMCPWithAI() {
+  console.log('=== Testing MCP Integration with AI ===\n');
+
+  // Step 1: Create MCP configuration for Probe
+  const mcpConfig = {
+    mcpServers: {
+      'probe': {
+        command: 'npx',
+        args: ['-y', '@probelabs/probe@latest', 'mcp'],
+        transport: 'stdio',
+        enabled: true
+      }
+    }
+  };
+
+  console.log('📡 Connecting to Probe MCP server...');
+  const mcpManager = new MCPClientManager({ debug: true });
+
+  try {
+    const initResult = await mcpManager.initialize(mcpConfig);
+    console.log(`✅ Connected to ${initResult.connected} server(s)`);
+    console.log(`📦 Available tools: ${initResult.tools.join(', ')}\n`);
+  } catch (error) {
+    console.error('❌ Failed to connect to MCP server:', error);
+    process.exit(1);
+  }
+
+  // Step 2: Get tools from MCP server
+  const mcpTools = mcpManager.getVercelTools();
+  console.log('🛠️  MCP Tools loaded:', Object.keys(mcpTools).length);
+
+  // Step 3: Create wrapped tools for AI SDK v5
+  const aiTools = {};
+  for (const [name, mcpTool] of Object.entries(mcpTools)) {
+    aiTools[name] = tool({
+      description: mcpTool.description,
+      inputSchema: z.object(
+        Object.entries(mcpTool.inputSchema?.properties || {}).reduce((acc, [key, schema]) => {
+          const isRequired = mcpTool.inputSchema?.required?.includes(key);
+
+          // Convert JSON schema to Zod schema (simplified)
+          let zodSchema;
+          if (schema.type === 'string') {
+            zodSchema = z.string();
+          } else if (schema.type === 'number') {
+            zodSchema = z.number();
+          } else if (schema.type === 'boolean') {
+            zodSchema = z.boolean();
+          } else if (schema.type === 'array') {
+            // Properly define array items based on the schema
+            if (schema.items?.type === 'string') {
+              zodSchema = z.array(z.string());
+            } else if (schema.items?.type === 'number') {
+              zodSchema = z.array(z.number());
+            } else {
+              zodSchema = z.array(z.string()); // Default to string array
+            }
+          } else {
+            zodSchema = z.any();
+          }
+
+          acc[key] = isRequired ? zodSchema : zodSchema.optional();
+          return acc;
+        }, {})
+      ),
+      execute: mcpTool.execute
+    });
+  }
+
+  console.log('✅ Tools wrapped for AI SDK v5\n');
+
+  // Step 4: Choose AI model
+  let model;
+  if (hasGoogle) {
+    const google = createGoogleGenerativeAI({
+      apiKey: process.env.GOOGLE_API_KEY || process.env.GOOGLE_AI_API_KEY
+    });
+    model = google('gemini-2.0-flash-exp');
+    console.log('🤖 Using Google Gemini 2.0 Flash');
+  } else if (hasAnthropic) {
+    const anthropic = createAnthropic();
+    model = anthropic('claude-3-5-haiku-20241022');
+    console.log('🤖 Using Claude 3.5 Haiku');
+  } else {
+    const openai = createOpenAI();
+    model = openai('gpt-4o-mini');
+    console.log('🤖 Using GPT-4o Mini');
+  }
+
+  // Step 5: Test queries with the AI
+  const testQueries = [
+    {
+      name: 'Search Test',
+      query: 'Search for functions that handle MCP or Model Context Protocol in this project',
+      expectedTool: 'probe_search_code'
+    },
+    {
+      name: 'Query Test',
+      query: 'Find all JavaScript arrow functions that take options as a parameter',
+      expectedTool: 'probe_query_code'
+    },
+    {
+      name: 'Extract Test',
+      query: 'Extract the MCPClientManager class from mcpClientV2.js',
+      expectedTool: 'probe_extract_code'
+    }
+  ];
+
+  console.log('\n=== Running AI Tests with MCP Tools ===\n');
+
+  for (const test of testQueries) {
+    console.log(`📝 Test: ${test.name}`);
+    console.log(`   Query: "${test.query}"`);
+
+    try {
+      const startTime = Date.now();
+
+      // Call AI with MCP tools
+      const result = await generateText({
+        model,
+        messages: [
+          {
+            role: 'system',
+            content: `You are a code analysis assistant with access to MCP tools for searching and analyzing code.
+              Available tools:
+              - probe_search_code: Search for code using keywords
+              - probe_query_code: Query code using AST patterns
+              - probe_extract_code: Extract specific code blocks
+
+              Always use the appropriate tool to answer questions about code.
+              Set the path parameter to "${process.cwd()}" for searches.`
+          },
+          {
+            role: 'user',
+            content: test.query
+          }
+        ],
+        tools: aiTools,
+        maxSteps: 3,
+        temperature: 0.3
+      });
+
+      const duration = Date.now() - startTime;
+
+      // Check if the expected tool was used
+      const toolCalls = result.steps?.filter(step => step.toolCalls?.length > 0) || [];
+      const usedTools = toolCalls.flatMap(step =>
+        step.toolCalls.map(call => call.toolName)
+      );
+
+      console.log(`   ✅ Response received in ${duration}ms`);
+      console.log(`   🔧 Tools used: ${usedTools.join(', ') || 'none'}`);
+
+      if (test.expectedTool && !usedTools.includes(test.expectedTool)) {
+        console.log(`   ⚠️  Expected tool ${test.expectedTool} was not used`);
+      }
+
+      // Show a preview of the response
+      const preview = result.text.substring(0, 200);
+      console.log(`   📄 Response preview: ${preview}${result.text.length > 200 ? '...' : ''}`);
+
+      // Log token usage
+      if (result.usage) {
+        console.log(`   💰 Tokens: ${result.usage.promptTokens} prompt, ${result.usage.completionTokens} completion`);
+      }
+
+      console.log('');
+    } catch (error) {
+      console.error(`   ❌ Test failed: ${error.message}\n`);
+    }
+  }
+
+  // Step 6: Interactive test with complex query
+  console.log('=== Complex Query Test ===\n');
+
+  const complexQuery = `Using the MCP tools available, help me understand how the MCP integration works in this codebase.
+    Specifically:
+    1. Search for MCP-related code
+    2. Find the main MCP client implementation
+    3. Extract key functions that handle MCP connections`;
+
+  console.log('📝 Complex query:', complexQuery.replace(/\n\s+/g, ' '));
+
+  try {
+    const result = await generateText({
+      model,
+      messages: [
+        {
+          role: 'system',
+          content: `You are a code analysis expert. Use the MCP tools to thoroughly analyze code.
+            The codebase is located at: ${process.cwd()}
+            Be systematic and use multiple tools to gather comprehensive information.`
+        },
+        {
+          role: 'user',
+          content: complexQuery
+        }
+      ],
+      tools: aiTools,
+      maxSteps: 10,
+      temperature: 0.3
+    });
+
+    console.log('\n📊 Analysis Results:');
+    console.log('─'.repeat(50));
+    console.log(result.text);
+    console.log('─'.repeat(50));
+
+    // Save detailed results
+    const reportPath = '/tmp/mcp-ai-test-report.md';
+    const report = `# MCP Integration Test Report
+
+## Test Date
+${new Date().toISOString()}
+
+## Configuration
+- Model: ${model.modelId}
+- MCP Servers: ${Object.keys(mcpConfig.mcpServers).join(', ')}
+- Available Tools: ${Object.keys(aiTools).join(', ')}
+
+## Query
+${complexQuery}
+
+## Response
+${result.text}
+
+## Tool Usage
+${result.steps?.map((step, i) =>
+  step.toolCalls?.map(call =>
+    `### Step ${i + 1}: ${call.toolName}\n\`\`\`json\n${JSON.stringify(call.args, null, 2)}\n\`\`\``
+  ).join('\n')
+).join('\n') || 'No tools used'}
+
+## Token Usage
+- Prompt Tokens: ${result.usage?.promptTokens || 'N/A'}
+- Completion Tokens: ${result.usage?.completionTokens || 'N/A'}
+- Total Tokens: ${result.usage?.totalTokens || 'N/A'}
+`;
+
+    writeFileSync(reportPath, report);
+    console.log(`\n📄 Detailed report saved to: ${reportPath}`);
+
+  } catch (error) {
+    console.error('❌ Complex query failed:', error.message);
+  }
+
+  // Cleanup
+  await mcpManager.disconnect();
+  console.log('\n✅ MCP connections closed');
+}
+
+// Run the test
+testMCPWithAI().catch(console.error);

package/data/probe/examples/chat/test-multiple-allowed-dirs.js

@@ -0,0 +1,111 @@
+import { promises as fs } from 'fs';
+import { resolve } from 'path';
+import { ProbeAgent } from '../../npm/src/agent/ProbeAgent.js';
+
+// Test that multiple allowed directories work correctly
+async function testMultipleAllowedDirectories() {
+  console.log('🧪 Testing multiple allowed directories...\n');
+
+  // Create test directories and files
+  const testDirs = [
+    './test-images-1',
+    './test-images-2',
+    './test-images-3'
+  ];
+
+  const testFiles = [
+    { dir: './test-images-1', file: 'image1.png' },
+    { dir: './test-images-2', file: 'image2.jpg' },
+    { dir: './test-images-3', file: 'image3.webp' }
+  ];
+
+  try {
+    // Create test directories and dummy image files
+    console.log('📁 Creating test directories and files...');
+    for (const dir of testDirs) {
+      await fs.mkdir(dir, { recursive: true });
+    }
+
+    // Create small dummy image files (just text files with image extensions for testing)
+    const dummyImageContent = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+    
+    for (const testFile of testFiles) {
+      await fs.writeFile(resolve(testFile.dir, testFile.file), dummyImageContent);
+    }
+
+    // Test 1: Create ProbeAgent with only first directory allowed
+    console.log('\n🔒 Test 1: Single allowed directory');
+    const agent1 = new ProbeAgent({
+      debug: true,
+      allowedFolders: ['./test-images-1']
+    });
+
+    const result1a = await agent1.loadImageIfValid('./test-images-1/image1.png');
+    const result1b = await agent1.loadImageIfValid('./test-images-2/image2.jpg');
+    
+    console.log(`   ✓ Image in allowed dir 1: ${result1a} (expected: true)`);
+    console.log(`   ✗ Image in disallowed dir 2: ${result1b} (expected: false)`);
+
+    // Test 2: Create ProbeAgent with multiple allowed directories
+    console.log('\n🔓 Test 2: Multiple allowed directories');
+    const agent2 = new ProbeAgent({
+      debug: true,
+      allowedFolders: ['./test-images-1', './test-images-2']
+    });
+
+    const result2a = await agent2.loadImageIfValid('./test-images-1/image1.png');
+    const result2b = await agent2.loadImageIfValid('./test-images-2/image2.jpg');
+    const result2c = await agent2.loadImageIfValid('./test-images-3/image3.webp');
+    
+    console.log(`   ✓ Image in allowed dir 1: ${result2a} (expected: true)`);
+    console.log(`   ✓ Image in allowed dir 2: ${result2b} (expected: true)`);
+    console.log(`   ✗ Image in disallowed dir 3: ${result2c} (expected: false)`);
+
+    // Test 3: Test with all three directories allowed
+    console.log('\n🌐 Test 3: All directories allowed');
+    const agent3 = new ProbeAgent({
+      debug: true,
+      allowedFolders: ['./test-images-1', './test-images-2', './test-images-3']
+    });
+
+    const result3a = await agent3.loadImageIfValid('./test-images-1/image1.png');
+    const result3b = await agent3.loadImageIfValid('./test-images-2/image2.jpg');
+    const result3c = await agent3.loadImageIfValid('./test-images-3/image3.webp');
+    
+    console.log(`   ✓ Image in allowed dir 1: ${result3a} (expected: true)`);
+    console.log(`   ✓ Image in allowed dir 2: ${result3b} (expected: true)`);
+    console.log(`   ✓ Image in allowed dir 3: ${result3c} (expected: true)`);
+
+    // Validation
+    const allTestsPassed = 
+      result1a === true && result1b === false &&
+      result2a === true && result2b === true && result2c === false &&
+      result3a === true && result3b === true && result3c === true;
+
+    if (allTestsPassed) {
+      console.log('\n🎉 All tests passed! Multiple allowed directories working correctly.');
+    } else {
+      console.log('\n❌ Some tests failed. Check the implementation.');
+    }
+
+  } catch (error) {
+    console.error('❌ Test failed with error:', error.message);
+  } finally {
+    // Clean up test files and directories
+    console.log('\n🧹 Cleaning up test files...');
+    try {
+      for (const testFile of testFiles) {
+        await fs.unlink(resolve(testFile.dir, testFile.file)).catch(() => {});
+      }
+      for (const dir of testDirs) {
+        await fs.rmdir(dir).catch(() => {});
+      }
+      console.log('✅ Cleanup completed.');
+    } catch (cleanupError) {
+      console.log('⚠️  Some cleanup failed:', cleanupError.message);
+    }
+  }
+}
+
+// Run the test
+testMultipleAllowedDirectories().catch(console.error);

package/data/probe/examples/chat/test-probe-mcp-server.js

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+
+/**
+ * Test script to connect to probe MCP server and explore its capabilities
+ */
+
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+
+async function testProbeMcpServer() {
+  console.log('Testing Probe MCP Server...\n');
+
+  // Create transport to probe MCP server
+  const transport = new StdioClientTransport({
+    command: 'npx',
+    args: ['-y', '@probelabs/probe@latest', 'mcp']
+  });
+
+  const client = new Client(
+    {
+      name: 'test-client',
+      version: '1.0.0'
+    },
+    {
+      capabilities: {}
+    }
+  );
+
+  try {
+    // Connect to the server
+    console.log('Connecting to Probe MCP server...');
+    await client.connect(transport);
+    console.log('✅ Connected successfully\n');
+
+    // List available tools
+    console.log('Available tools:');
+    const tools = await client.listTools();
+
+    for (const tool of tools.tools) {
+      console.log(`\n📦 Tool: ${tool.name}`);
+      console.log(`   Description: ${tool.description}`);
+
+      if (tool.inputSchema) {
+        console.log('   Input Schema:');
+        console.log(JSON.stringify(tool.inputSchema, null, 4));
+      }
+    }
+
+    // Test a simple search
+    console.log('\n\nTesting search_code tool...');
+    const searchResult = await client.callTool({
+      name: 'search_code',
+      arguments: {
+        query: 'function',
+        path: process.cwd(),
+        max_results: 3
+      }
+    });
+
+    console.log('\nSearch result (truncated):');
+    if (searchResult.content && searchResult.content[0]) {
+      const content = searchResult.content[0].text;
+      console.log(content.substring(0, 500) + '...');
+    }
+
+    // Test query_code tool
+    console.log('\n\nTesting query_code tool...');
+    const queryResult = await client.callTool({
+      name: 'query_code',
+      arguments: {
+        pattern: 'function $NAME($$$PARAMS) { $$$BODY }',
+        path: process.cwd(),
+        language: 'javascript',
+        max_results: 2
+      }
+    });
+
+    console.log('\nQuery result (truncated):');
+    if (queryResult.content && queryResult.content[0]) {
+      const content = queryResult.content[0].text;
+      console.log(content.substring(0, 500) + '...');
+    }
+
+    // Test extract_code tool
+    console.log('\n\nTesting extract_code tool...');
+    const extractResult = await client.callTool({
+      name: 'extract_code',
+      arguments: {
+        files: [`${process.cwd()}/probeChat.js:230-250`]
+      }
+    });
+
+    console.log('\nExtract result (truncated):');
+    if (extractResult.content && extractResult.content[0]) {
+      const content = extractResult.content[0].text;
+      console.log(content.substring(0, 500) + '...');
+    }
+
+    // Close the connection
+    await client.close();
+    console.log('\n✅ All tests completed successfully!');
+
+  } catch (error) {
+    console.error('Error during testing:', error);
+    process.exit(1);
+  }
+}
+
+// Run the test
+testProbeMcpServer().catch(console.error);