groq-mcp-voice-template

# 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](https://groq-voice-mcp-agent.groqcloud.dev)** ## 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](https://console.groq.com/keys)) - Cloudflare account for deployment ### Setup 1. **Clone the repository** ```bash git clone https://github.com/build-with-groq/groq-mcp-voice-template cd groq-mcp-voice-template ``` 2. **Install dependencies** ```bash npm install ``` 3. **Configure environment variables** Update `wrangler.jsonc` with your API keys: ```json { "vars": { "GROQ_API_KEY": "your-groq-api-key-here", "APP_PASSWORD": "optional-app-password" } } ``` 4. **Start development server** ```bash npm run dev:vite ``` 5. **Deploy to Cloudflare Workers** ```bash 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](https://console.groq.com) - **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](https://community.groq.com) ### 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](https://groq.com/enterprise-access/) 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](https://www.linkedin.com/in/julian-francisco/).