integration-guide.md

SpiceCode Dashboard - Integration Guide

This document provides instructions for integrating the SpiceCode CLI with the SpiceCode Dashboard.

Overview

The SpiceCode Dashboard is a web application that displays code metrics collected by the SpiceCode CLI. The dashboard allows you to:

1. View metrics for all your projects and files
2. Track metrics over time with historical data visualization
3. Identify code quality trends and issues

Integration Steps

1. Get Your API Key

1. Log in to the SpiceCode Dashboard using GitHub authentication
2. Navigate to your Profile page
3. Copy your API key or generate a new one

2. Update SpiceCode CLI

To update your SpiceCode CLI to send metrics to the dashboard:

// Example modification to spicecode/index.js

const axios = require('axios');

// After metrics are calculated
async function sendMetricsToDashboard(filePath, fileName, metrics, apiKey) {
  try {
    const projectName = process.cwd().split('/').pop(); // Get current directory name as project name
    
    const response = await axios.post('https://your-dashboard-url.com/api/metrics/submit', {
      projectName,
      filePath,
      fileName,
      metrics
    }, {
      headers: {
        'X-API-Key': apiKey
      }
    });
    
    console.log('Metrics sent to dashboard:', response.data.message);
  } catch (error) {
    console.error('Failed to send metrics to dashboard:', error.message);
  }
}

// Add a command line option for the API key
program
  .option('--api-key <key>', 'API key for SpiceCode Dashboard')
  .option('--project <name>', 'Project name for dashboard');

// In your main function
if (program.apiKey) {
  await sendMetricsToDashboard(filePath, fileName, metrics, program.apiKey);
}

3. Test the Integration

Run SpiceCode CLI with your API key:

spicecode analyze --api-key YOUR_API_KEY path/to/file.js

4. Verify in Dashboard

1. Log in to the SpiceCode Dashboard
2. Navigate to the Projects page
3. You should see your project and file metrics displayed

Data Format

The metrics should be sent in the following format:

{
  "projectName": "your-project-name",
  "filePath": "/path/to/file.js",
  "fileName": "file.js",
  "metrics": {
    "complexity": 5,
    "maintainability": 85,
    "linesOfCode": 120,
    "commentPercentage": 15,
    "duplications": 2,
    "bugs": 0,
    "vulnerabilities": 0,
    "codeSmells": 3
  }
}

Deduplication

The dashboard automatically deduplicates metrics based on their content. If you submit identical metrics for the same file, they will not be duplicated in the database.

Historical Data

Each time you submit different metrics for the same file, a new entry is created with a timestamp. This allows you to track changes over time and visualize trends in your code quality.