Speak-Bich 🎙️

Transform any web application into a voice-enabled experience with contextual AI assistance that sees and understands everything on your page.

✨ Features

🗣️ Voice Recognition - Convert speech to text with high accuracy
🔊 Text-to-Speech - Natural voice synthesis for AI responses
🤖 Gemini AI Integration - Powered by Google's advanced language model
🧠 Page Context Awareness - AI understands your entire webpage content
🌐 Cross-Browser Compatible - Works seamlessly across all modern browsers
⚡ Zero Dependencies - Lightweight with no external libraries required
🎨 Fully Customizable - Adapt the UI to match your brand and design
🔌 Flexible Integration - Multiple implementation options for any project

🚀 Quick Start

Installation

# npm
npm install speak-bich

# yarn
yarn add speak-bich

# pnpm
pnpm add speak-bich

CDN Usage

<script src="https://cdn.jsdelivr.net/npm/speak-bich@latest/dist/speak-bich.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/speak-bich@latest/dist/speak-bich.min.js"></script>

Basic Implementation

const assistant = new WebVoiceAssistant({
  geminiApiKey: "your-gemini-api-key-here"
});

That's it! Your voice assistant is now active on your page.

🔧 Configuration

Complete Options

Option	Type	Default	Description
`geminiApiKey`	`string`	Required	Your Gemini API key
`model`	`string`	`gemini-1.5-flash`	Gemini model version
`maxTokens`	`number`	200	maximum tokens for Gemini
`temperature`	`number`	0.7	maximum temperature for Gemini
`language`	`string`	`en-US`	Speech recognition language
`position`	`string`	`bottom-right`	Button position (`bottom-right` \| `bottom-left`)
`buttonSize`	`number`	60	Button size in pixels
`panelWidth`	`number`	350	Panel width in pixels
`panelHeight`	`number`	450	Panel height in pixels
`rate`	`number`	0.9	Speech synthesis speed (0.1-2.0)
`pitch`	`number`	1	Voice pitch (0-2.0)
`contextSize`	`number`	5000	Maximum context size in words

For More Speech Recognition Languages check here : https://stackoverflow.com/questions/23733537/what-are-the-supported-languages-for-web-speech-api-in-html5

Styling Options

Option	Type	Default	Description
`ButtonBackGroundColour`	`string`	`black`	Floating button background
`svgColor`	`string`	`white`	Icon color
`textColor`	`string`	`white`	Header text color
`headerTextName`	`string`	`Voice Asistant`	Header text Name
`PanelBackgroundColor`	`string`	`rgb(24 24 27)`	Panel background
`MessagesBackgroundColor`	`string`	`rgb(24 24 27)`	Messages background

Advanced Configuration

const assistant = new WebVoiceAssistant({
  geminiApiKey: "your-api-key",
  model: "gemini-1.5-pro",
  maxTokens: 200,
  temperature: 0.7,
  language: "en-US",
  position: "bottom-left",
  buttonSize: 70,
  panelWidth: 400,
  panelHeight: 500,
  rate: 1.1,
  pitch: 1.2,
  contextSize: 8000,
  ButtonBackGroundColour: "#2563eb",
  svgColor: "#ffffff",
  textColor: "#f8fafc",
  PanelBackgroundColor: "rgb(15 23 42)",
  MessagesBackgroundColor: "rgb(15 23 42)",
  headerTextName : "Asistant"
});

🛠️ Framework Integration

React

import { useEffect } from 'react';
import WebVoiceAssistant from 'speak-bich';

function VoiceAssistant() {
  useEffect(() => {
    const assistant = new WebVoiceAssistant({
      geminiApiKey: process.env.REACT_APP_GEMINI_KEY,
      position: 'bottom-left',
      buttonSize: 70
    });

    // Cleanup on unmount
    return () => {
      // Assistant cleanup if needed
    };
  }, []);

  return null;
}

export default VoiceAssistant;

Next.js

'use client';
import { useEffect } from 'react';
import WebVoiceAssistant from 'speak-bich';

export default function VoiceAssistant() {
  useEffect(() => {
    const assistant = new WebVoiceAssistant({
      geminiApiKey: process.env.NEXT_PUBLIC_GEMINI_KEY,
      panelWidth: 400,
      position: 'bottom-right'
    });
  }, []);

  return null;
}

Vue.js

<template>
  <div></div>
</template>

<script>
import WebVoiceAssistant from 'speak-bich';

export default {
  name: 'VoiceAssistant',
  mounted() {
    this.assistant = new WebVoiceAssistant({
      geminiApiKey: process.env.VUE_APP_GEMINI_KEY,
      language: 'en-US'
    });
  },
  beforeUnmount() {
    // Cleanup if needed
  }
}
</script>

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Voice Assistant Demo</title>
</head>
<body>
    <h1>My Web Application</h1>

    <script src="https://unpkg.com/speak-bich@latest/dist/speak-bich.min.js"></script>
    <script>
        const assistant = new WebVoiceAssistant({
            geminiApiKey: "your-api-key-here",
            position: "bottom-right"
        });
    </script>
</body>
</html>

🌐 Browser Support

Browser	Voice Recognition	Text-to-Speech	Overall Support
Chrome	✅ Full	✅ Full	✅ Excellent
Firefox	✅ Full	✅ Full	✅ Excellent
Edge	✅ Full	✅ Full	✅ Excellent
Safari	⚠️ Limited	✅ Full	⚠️ Good
Mobile Chrome	✅ Full	✅ Full	✅ Excellent
Mobile Safari	⚠️ Limited	✅ Full	⚠️ Good

Note: Safari has limited Web Speech API support. Voice recognition may require user interaction to start.

🔑 Getting Your Gemini API Key

Visit the Google AI Studio
Sign in with your Google account
Click "Create API Key"
Copy your API key and keep it secure
Add it to your environment variables or configuration

🐛 Troubleshooting

Common Issues

🎤 Microphone not working

Check browser permissions (click the microphone icon in address bar)
Ensure HTTPS is enabled (required for microphone access)
Test with a simple "Hello" command

🔑 API errors

Verify your Gemini API key is correct and active
Check your API usage limits in Google AI Studio
Ensure your domain is authorized (if restrictions are set)

🎨 UI not appearing

Check for CSS conflicts with your existing styles
Verify no JavaScript errors in console
Try different positioning options

⚛️ SSR/Framework issues

Use dynamic imports in Next.js: const WebVoiceAssistant = (await import('speak-bich')).default
Ensure component mounts on client-side only
Check that Web Speech API is available: 'webkitSpeechRecognition' in window

🤝 Contributing

We welcome contributions!

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

Made with ❤️ by Abdullah Mukadam

Package detail

speak-bich

readme