Groq MCP Voice Assistant

Voice-enabled template for building AI assistants that connect to remote Model Context Protocol (MCP) servers with Groq's ultra-fast inference capabilities

Live Demo

View the live application

Overview

This application demonstrates voice-controlled AI interactions using Groq API for lightning-fast inference combined with Model Context Protocol (MCP) servers for extended functionality. Built as a complete, end-to-end template that you can fork, customize, and deploy to Cloudflare Workers.

Key Features:

• Voice-First Interface: Real-time speech-to-text and text-to-speech powered by browser APIs
• MCP Integration: Connect to remote Model Context Protocol servers for extended AI capabilities
• Ultra-Fast Inference: Sub-second response times powered by Groq's optimized inference infrastructure
• Modern UI: Beautiful, responsive interface built with Svelte 5 and Tailwind CSS
• Edge Deployment: Deploy globally on Cloudflare Workers with minimal latency
• Conversation Management: Track conversation history and tool calls with expandable UI panels
• Real-time Status: Live status updates showing recording, processing, and response states

Architecture

Tech Stack:

• Frontend: Svelte 5, Tailwind CSS, TypeScript
• Backend: Cloudflare Workers, Wrangler
• AI Infrastructure: Groq API for inference
• Protocol Integration: Model Context Protocol (MCP) for server connections
• Audio Processing: Browser WebRTC APIs for voice input/output

Quick Start

Prerequisites

• Node.js 18+ installed
• Groq API key (Create a free GroqCloud account and generate an API key here)
• Cloudflare account for deployment

Setup

1. Clone the repository

   git clone https://github.com/build-with-groq/groq-mcp-voice-template
   cd groq-mcp-voice-template

2. Install dependencies

   npm install

3. Configure environment variables Update wrangler.jsonc with your API keys:

   {
     "vars": {
       "GROQ_API_KEY": "your-groq-api-key-here",
       "APP_PASSWORD": "optional-app-password"
     }
   }

4. Start development server

   npm run dev:vite

5. Deploy to Cloudflare Workers

   npm run deploy

Usage

1. Grant microphone permissions when prompted by your browser
2. Click the microphone button to start voice recording
3. Speak your query - the interface will show real-time status updates
4. Listen to the AI response - audio will play automatically
5. View conversation history and tool calls in the expandable bottom panels
6. Configure MCP servers using the MCP Servers button for extended functionality

Customization

This template is designed to be a foundation for your voice AI applications. Key areas for customization:

• Model Selection: Update Groq model configuration in the voice agent components
• UI/Styling: Customize themes and components in src/shared/components/
• MCP Servers: Configure and connect to your own MCP servers via the built-in manager
• Voice Settings: Modify speech recognition and synthesis settings
• Conversation Flow: Extend the conversation management and history features

MCP Integration

The template includes built-in support for Model Context Protocol servers:

• Server Management UI: Configure MCP server connections through the web interface
• Tool Call Visualization: View real-time tool executions and responses
• Extensible Architecture: Easy integration with custom MCP servers

Next Steps

For Developers

• Create your free GroqCloud account: Access official API docs, the playground for experimentation, and more resources via Groq Console
• Build and customize: Fork this repo and start customizing to build out your own voice AI application
• Get support: Connect with other developers building on Groq, chat with our team, and submit feature requests on our Groq Developer Forum

For Founders and Business Leaders

• See enterprise capabilities: This template showcases production-ready AI that can handle real-time business workloads with voice interfaces
• Discuss your needs: Contact our team to explore how Groq can accelerate your AI initiatives

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Created by Julian Francisco.