Jarvis AI Assistant - v0 by Vercel

Jarvis AI Assistant - v0 by VercelJarvis AI Assistant - v0 by Vercel

🏗️ Tech StackFrontend (Web UI): React + Vite + Tailwind CSSVoice Recognition: Web Speech APIVoice Output: ElevenLabs APIAI Chat: GPT-4o MiniSearch: SearchAPIPC Control: Electron + Node.js (to access system-level functions)🔑 Environment VariablesOPENAI_API_KEYELEVENLABS_API_KEYSEARCHAPI_KEY📁 File Structure/jarvis-lite │ ├── public/ │ ├── src/ │ ├── components/ │ │ ├── JarvisCore.jsx │ │ ├── VoiceInput.jsx │ │ ├── VoiceOutput.js │ │ ├── WakeWordListener.js │ ├── services/ │ │ ├── openaiService.js │ │ ├── searchService.js │ │ ├── elevenLabsService.js │ │ └── commandHandler.js // PC control logic │ ├── styles/ │ └── App.jsx │ ├── electron/ │ ├── main.js // Electron entry point │ ├── systemCommands.js // Node.js code to open apps, URLs │ ├── .env └── package.json 🎯 Core FeaturesWake Word ListenerListens for "Jarvis" and activates UI + mic input.AI Voice ChatGPT-4o Mini for questions, small talk, and command understanding.Voice-Controlled PC Actions"Open YouTube" → Launches in default browser"Open Notepad" or "Play music" → Uses Electron to run local commandsReal-Time SearchCalls SearchAPI if the user asks something time-sensitive.Voice OutputUses ElevenLabs to speak responses naturally.Sci-Fi UIGlowing circle face + animated holographic lines.🔌 APIs & Tools🧠 Chat: GPT-4o Mini🔉 Voice Output: ElevenLabs🌐 Search: SearchAPI🗣️ Voice Input: Web Speech API🧠 PC Control: Electron + Node.js shell commands🧠 Key StateswakeWordDetectedspokenCommandaiResponsesystemCommandIssuedisSpeaking🚀 User FlowApp listens for “Jarvis”On trigger, it records user voiceGPT processes command (e.g., “Open YouTube”)If command = app/URL:Electron runs shell.openExternal or launches a local appIf question = AI or real-world:Uses GPT or SearchAPISpeaks reply via ElevenLabsAnimations play during action✅ Must-Have FeaturesWake word detectionVoice input + AI replySci-fi glowing faceReal-time searchPC control (apps/URLs)Voice reply via ElevenLabs📝 Result SummaryA sci-fi web-based assistant that talks like JARVIS, answers your questions, searches the web, and can control your PC with voice commands using Electron..

Show full message

97d ago

This project outlines a sophisticated AI assistant, "Jarvis-Lite," designed to operate with voice commands, integrate with AI models, perform web searches, and even control your PC. While the full Electron-based PC control functionality cannot be demonstrated within the browser-based Next.js environment, I've provided the necessary code for the Electron part, along with a web UI that simulates the interaction.

The web UI is built with Next.js (App Router), React, and Tailwind CSS, leveraging the Web Speech API for voice input, and integrating with AI and search services via Next.js API routes to protect your API keys.

Electron Application Files

The following files are for the Electron desktop application that would handle PC control. These files are not executable within the Next.js browser environment but are provided for completeness of the "Jarvis-Lite" project.

Setup and Usage Instructions

Download the Code: Click the "Download Code" button to get the full project.
Install Dependencies:
- Navigate to the jarvis-lite directory.
- Run npm install or yarn install.
Environment Variables:
- Create a .env.local file in the root of your jarvis-lite project.
- Add your API keys:
  OPENAI_API_KEY="your_openai_api_key_here" ELEVENLABS_API_KEY="your_elevenlabs_api_key_here" SEARCHAPI_KEY="your_searchapi_key_here"
- Important: For ElevenLabs, you'll also need to replace <YOUR_VOICE_ID> in app/api/elevenlabs/route.ts with a specific voice ID from your ElevenLabs account.
Run the Web UI:
- npm run dev or yarn dev
- Open your browser to http://localhost:3000.
- Microphone Access: Your browser will likely ask for microphone permission. Grant it for the wake word and voice input to work.
Electron Application (Optional - for PC Control):
- To enable PC control, you would need to set up the Electron part. This typically involves:
  - Building your React app (npm run build).
  - Configuring Electron to load the built index.html.
  - Running the Electron app (e.g., electron . from the electron directory, or using a build tool like electron-builder).
- Note: Direct PC control is a security risk if not properly secured. The provided Electron code is a basic example and would need robust error handling and security considerations for a production application.

How to Interact

Activate: Say "Jarvis" to activate the assistant. The UI will indicate it's listening.
Speak Command: Once activated, speak your command or question (e.g., "What is the capital of France?", "Search for today's weather", "Open YouTube").
Response: Jarvis will process your command, speak the response, and then return to an idle state, waiting for the next "Jarvis" wake word.

97d ago

Show full message

97d ago

Electron Application Files

Setup and Usage Instructions

Download the Code: Click the "Download Code" button to get the full project.
Install Dependencies:
- Navigate to the jarvis-lite directory.
- Run npm install or yarn install.
Environment Variables:
- Create a .env.local file in the root of your jarvis-lite project.
- Add your API keys:
  OPENAI_API_KEY="your_openai_api_key_here" ELEVENLABS_API_KEY="your_elevenlabs_api_key_here" SEARCHAPI_KEY="your_searchapi_key_here"
- Important: For ElevenLabs, you'll also need to replace VOICE_ID in app/api/elevenlabs/route.ts with a specific voice ID from your ElevenLabs account.
Run the Web UI:
- npm run dev or yarn dev
- Open your browser to http://localhost:3000.
- Microphone Access: Your browser will likely ask for microphone permission. Grant it for the wake word and voice input to work.
Electron Application (Optional - for PC Control):
- To enable PC control, you would need to set up the Electron part. This typically involves:
  - Building your React app (npm run build).
  - Configuring Electron to load the built index.html.
  - Running the Electron app (e.g., electron . from the electron directory, or using a build tool like electron-builder).
- Note: Direct PC control is a security risk if not properly secured. The provided Electron code is a basic example and would need robust error handling and security considerations for a production application.

How to Interact

Activate: Say "Jarvis" to activate the assistant. The UI will indicate it's listening.
Speak Command: Once activated, speak your command or question (e.g., "What is the capital of France?", "Search for today's weather", "Open YouTube").
Response: Jarvis will process your command, speak the response, and then return to an idle state, waiting for the next "Jarvis" wake word.

To configure the generation, complete these steps:

Setup Integrations

97d ago

wDsJlOXPqcvIUKdLXjDs use this voice id

97d ago

components

VoiceInput.tsx

Show full message

97d ago

Electron Application Files

Setup and Usage Instructions

Download the Code: Click the "Download Code" button to get the full project.
Install Dependencies:
- Navigate to the jarvis-lite directory.
- Run npm install or yarn install.
Environment Variables:
- Create a .env.local file in the root of your jarvis-lite project.
- Add your API keys:
  OPENAI_API_KEY="your_openai_api_key_here" ELEVENLABS_API_KEY="your_elevenlabs_api_key_here" SEARCHAPI_KEY="your_searchapi_key_here"
- Important: For ElevenLabs, you'll also need to replace <YOUR_VOICE_ID> in app/api/elevenlabs/route.ts with a specific voice ID from your ElevenLabs account.
Run the Web UI:
- npm run dev or yarn dev
- Open your browser to http://localhost:3000.
- Microphone Access: Your browser will likely ask for microphone permission. Grant it for the wake word and voice input to work.
Electron Application (Optional - for PC Control):
- To enable PC control, you would need to set up the Electron part. This typically involves:
  - Building your React app (npm run build).
  - Configuring Electron to load the built index.html.
  - Running the Electron app (e.g., electron . from the electron directory, or using a build tool like electron-builder).
- Note: Direct PC control is a security risk if not properly secured. The provided Electron code is a basic example and would need robust error handling and security considerations for a production application.

How to Interact

Activate: Say "Jarvis" to activate the assistant. The UI will indicate it's listening.
Speak Command: Once activated, speak your command or question (e.g., "What is the capital of France?", "Search for today's weather", "Open YouTube").
Response: Jarvis will process your command, speak the response, and then return to an idle state, waiting for the next "Jarvis" wake word.

97d ago

Show full message

97d ago

Electron Application Files

Setup and Usage Instructions

Download the Code: Click the "Download Code" button to get the full project.
Install Dependencies:
- Navigate to the jarvis-lite directory.
- Run npm install or yarn install.
Environment Variables:
- Create a .env.local file in the root of your jarvis-lite project.
- Add your API keys:
  OPENAI_API_KEY="your_openai_api_key_here" ELEVENLABS_API_KEY="your_elevenlabs_api_key_here" SEARCHAPI_KEY="your_searchapi_key_here"
- Important: For ElevenLabs, you'll also need to replace VOICE_ID in app/api/elevenlabs/route.ts with a specific voice ID from your ElevenLabs account.
Run the Web UI:
- npm run dev or yarn dev
- Open your browser to http://localhost:3000.
- Microphone Access: Your browser will likely ask for microphone permission. Grant it for the wake word and voice input to work.
Electron Application (Optional - for PC Control):
- To enable PC control, you would need to set up the Electron part. This typically involves:
  - Building your React app (npm run build).
  - Configuring Electron to load the built index.html.
  - Running the Electron app (e.g., electron . from the electron directory, or using a build tool like electron-builder).
- Note: Direct PC control is a security risk if not properly secured. The provided Electron code is a basic example and would need robust error handling and security considerations for a production application.

How to Interact

Activate: Say "Jarvis" to activate the assistant. The UI will indicate it's listening.
Speak Command: Once activated, speak your command or question (e.g., "What is the capital of France?", "Search for today's weather", "Open YouTube").
Response: Jarvis will process your command, speak the response, and then return to an idle state, waiting for the next "Jarvis" wake word.

To configure the generation, complete these steps:

Setup Integrations

97d ago

wDsJlOXPqcvIUKdLXjDs use this voice id

97d ago