VoiceCommit MCP Server

Model Context Protocol server for VoiceCommit widget management and feedback operations.

Overview

This MCP server allows AI assistants (Claude, ChatGPT, etc.) to programmatically:

• Create and manage VoiceCommit widgets
• Retrieve and manage widget feedback
• Generate integration code for different frameworks
• Update feedback status and assignments
• Access comprehensive widget integration documentation

Installation

npm install @voicecommit/mcp-server

Configuration

Environment Variables

Set one of these authentication methods:

API Key (Recommended):

VOICECOMMIT_API_KEY=your_api_key_here
VOICECOMMIT_API_URL=https://app.voicecommit.com

Session Token:

VOICECOMMIT_SESSION_TOKEN=your_session_token
VOICECOMMIT_API_URL=https://app.voicecommit.com

Claude Desktop Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "voicecommit": {
      "command": "npx",
      "args": ["@voicecommit/[email protected]"],
      "env": {
        "VOICECOMMIT_API_KEY": "your_api_key_here",
        "VOICECOMMIT_API_URL": "https://app.voicecommit.com"
      }
    }
  }
}

Note: Version 1.1.0+ includes resource handlers that provide AI assistants with automatic access to comprehensive widget integration documentation. This eliminates the need to search external sites for integration instructions.

Available Tools

Widget Management

• create_widget - Create a new feedback widget
• list_widgets - List all user widgets
• get_widget - Get detailed widget information
• update_widget - Update widget settings
• delete_widget - Delete a widget
• get_widget_integration_code - Generate framework-specific integration code

Feedback Management

• get_widget_feedback - Get feedback submissions for a widget
• get_feedback_details - Get detailed feedback information
• update_feedback_status - Update feedback status and assignments

Documentation Resources

• AI Integration Documentation - Complete widget integration guide optimized for AI assistants
  • Includes framework-specific code examples (HTML, React, Vue, Angular)
  • CSP configuration requirements
  • Common troubleshooting solutions
  • Browser compatibility information
  • HTTPS requirements and setup

Usage Examples

Create a Widget

{
  "name": "Marketing Site Feedback",
  "submission_type": "feedback-dashboard",
  "allowed_domains": ["mysite.com", "www.mysite.com"],
  "position": "bottom-right",
  "theme": "auto",
  "rate_limit_per_hour": 25
}

Generate Integration Code

{
  "widget_id": "widget_123",
  "framework": "react"
}

Using Resources (New in v1.1.0)

When using Claude Desktop with this MCP server, AI assistants automatically have access to:

• Complete Integration Guide: Framework-specific examples for HTML, React, Vue, Angular
• Troubleshooting Documentation: Solutions for common setup issues
• Configuration Requirements: CSP, HTTPS, browser compatibility details

Ask questions like:

• "How do I integrate a VoiceCommit widget in my React app?"
• "What CSP settings do I need for VoiceCommit widgets?"
• "How do I fix voice recording not working?"

The AI assistant will use the embedded documentation resources to provide accurate, up-to-date answers.

Authentication

API Key Authentication

1. Log into VoiceCommit dashboard
2. Go to Settings > API Keys
3. Generate a new API key
4. Set VOICECOMMIT_API_KEY environment variable

Session Token Authentication

1. Log into VoiceCommit dashboard
2. Open browser developer tools
3. Find session token in localStorage/cookies
4. Set VOICECOMMIT_SESSION_TOKEN environment variable

Development

# Install dependencies
npm install

# Run in development
npm run dev

# Build
npm run build

# Run built version
npm start

Integration Examples

HTML

<link rel="stylesheet" href="https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.css">
<script src="https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>

React

import { useEffect } from 'react';

export default function VoiceCommitWidget() {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.css';
    document.head.appendChild(link);

    const script = document.createElement('script');
    script.src = 'https://app.voicecommit.com/api/widget/YOUR_WIDGET_ID/widget.js';
    script.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(link);
      document.head.removeChild(script);
    };
  }, []);

  return null;
}

Support

For issues and questions:

• Documentation: https://app.voicecommit.com/docs
• GitHub Issues: https://github.com/voicecommit/mcp-server/issues
• Contact: [email protected]

License

MIT