Installation workspace
Go from repository to working VoiceControl in one guided step.
Choose AI-assisted installation for the fastest route, or use the reviewed manual snippet. Both paths keep provider secrets out of browser code.
Recommended path
Install with your coding AI.
Enter the public integration values from your VoiceControl workspace. We generate a professional prompt that tells your coding assistant to inspect the project, integrate safely, preserve the existing design, and verify its work.
You are a senior web integration engineer working inside an existing customer website repository.
Your task is to install VoiceControl AI safely and completely without changing the site's existing visual design, routes, content, analytics, forms, or unrelated behavior.
PUBLIC VOICECONTROL VALUES
- Website ID: {{WEBSITE_ID}}
- Public key: {{PUBLIC_KEY}}
- API base URL: {{API_BASE}}
- Widget module URL: {{WIDGET_URL}}
WORKFLOW
1. Inspect the repository first. Identify its framework, package manager, build system, routing, root layout or HTML entry point, CSP/security headers, environment conventions, and existing test commands.
2. Do not guess missing values. If any VoiceControl value above still contains a placeholder, stop and ask me only for the missing value.
3. Install VoiceControl once at the application root so it is available on every intended public page and is not mounted twice during client-side navigation or development hot reload.
4. Use the framework's established approach:
- For plain HTML, add a type="module" script before the closing body tag.
- For React, Vue, Next.js, Nuxt, or another SPA/SSR framework, create a small client-only integration component or bootstrap module and mount it from the root layout.
- Do not execute browser-only code during server rendering.
5. Import VoiceControl from the Widget module URL and initialize it with exactly:
websiteId, publicKey, and apiBase from the public values above.
6. Mount the assistant only after the DOM is ready. Add idempotent cleanup if the framework lifecycle requires it.
7. Preserve consent and accessibility:
- Never request microphone access on page load.
- Microphone access must begin only after an explicit visitor action.
- Keep text chat usable without microphone permission.
- Preserve keyboard navigation, visible focus, and reduced-motion preferences.
8. Security requirements:
- The public VoiceControl key may be used in browser code.
- Never put a Gemini API key, OpenAI API key, server secret, database credential, or unrestricted token in browser code, committed files, logs, screenshots, or the generated bundle.
- If the site has a Content Security Policy, minimally extend script-src and connect-src only for the supplied Widget and API origins. Preserve all existing directives.
- Do not weaken CORS, disable certificate checks, use unsafe-eval, or expose environment files.
9. Preserve the existing UI. Do not redesign the website or add custom floating controls that duplicate the VoiceControl widget.
10. Verify the integration using the repository's existing formatter, linter, type checker, tests, and production build. Fix only issues caused by this integration.
11. Report back with:
- the detected framework,
- every file changed,
- the exact integration location,
- validation commands and results,
- any CSP or deployment environment changes,
- and a short manual test checklist for text chat, microphone consent, mobile layout, and duplicate mounting.
Proceed autonomously once all four public values are available. Make the smallest production-quality change that satisfies every requirement.
Secret-safe by designThe generated prompt explicitly prevents Gemini, OpenAI, and server keys from entering browser code.
Manual path
Prefer to install it yourself?
Add the module once near the end of your page or root layout. Replace every placeholder with the matching public value from your workspace.
<script type="module">
import { VoiceControl } from "https://cdn.your-domain.com/widget.js";
const assistant = new VoiceControl({
websiteId: "site_...",
publicKey: "pk_live_...",
apiBase: "https://api.your-domain.com"
});
assistant.mount();
</script>
Never place a Gemini or OpenAI API key in this snippet. Provider credentials belong in the VoiceControl server environment.
Provider connection
Bring the AI account you control.
VoiceControl does not supply provider credentials. Create a key in your own account, then follow the workspace guidance to configure it server-side.
Pre-publish validation
Confirm the integration before visitors see it.
- 01Widget appears once
Navigate between pages and confirm no duplicate instance is mounted.
- 02Text works first
Open chat and complete a text exchange without microphone permission.
- 03Consent is explicit
Confirm the browser asks for microphone access only after a click.
- 04Origin is accepted
Test on the exact production domain registered in the workspace.
- 05Mobile remains usable
Check the widget, keyboard, and page content at narrow viewport sizes.
- 06Production build passes
Run the site's normal lint, type-check, test, and build commands.
Security reference