Online Store

### Example VOIX Chat Navigation Prompts Source: https://svenschultze.github.io/VOIX/index Illustrates example natural language prompts that can be used with VOIX to navigate its documentation or inquire about its features, demonstrating the conversational interface. ```plaintext How do I use tools in VOIX? Navigate to the context documentation How do I integrate VOIX with Svelte? ``` -------------------------------- ### VOIX Chrome Extension Installation Source: https://svenschultze.github.io/VOIX/index Instructions for installing the VOIX Chrome extension from the Chrome Web Store. This involves visiting the store link, clicking 'Add to Chrome', and confirming the installation. ```APIDOC Installation Steps: 1. Visit the VOIX Chrome Extension page on the Chrome Web Store. 2. Click the "Add to Chrome" button. 3. Confirm the installation when prompted. 4. The VOIX icon will appear in your Chrome toolbar. ``` -------------------------------- ### VOIX Context: Application Status Example Source: https://svenschultze.github.io/VOIX/index Demonstrates how to use a `` element to provide application-wide status information. This example includes details like the current mode and unsaved changes, helping the AI make informed decisions. ```html Mode: Edit Unsaved changes: Yes Auto-save: Enabled Last saved: 5 minutes ago ``` -------------------------------- ### VOIX Context: User Information Example Source: https://svenschultze.github.io/VOIX/index Provides an example of a VOIX `` element used to supply user-specific information to the AI. The context is defined as plain text within the element, making it easily parsable. ```html Name: John Doe Role: Administrator Last login: 2025-01-30 10:00 ``` -------------------------------- ### Context Element Example (Status Information) Source: https://svenschultze.github.io/VOIX/index Illustrates the `` element for conveying system status information. It provides key-value pairs like server connection status, sync state, version, and environment. ```html Server: Connected Sync: Up to date Version: 2.1.0 Environment: Production ``` -------------------------------- ### HTML Tool Example for Testing VOIX Integration Source: https://svenschultze.github.io/VOIX/index A basic HTML page demonstrating how to register and test a VOIX tool. It includes a `` element with a `message` property and a JavaScript event listener to capture the 'call' event, logging the details to the console. ```html ``` -------------------------------- ### Context Element Example (Lists and Collections) Source: https://svenschultze.github.io/VOIX/index Demonstrates the use of the `` element to hold plain text information, such as a list of recent actions. This helps AI understand the application's current state. ```html Recent actions: - Created document "Q4 Report" - Shared with team@example.com - Updated project timeline - Completed task #42 ``` -------------------------------- ### VOIX Context: Page State Example Source: https://svenschultze.github.io/VOIX/index Illustrates using a `` element to convey the current state of a web page to the AI. This example includes details like the current page, user role, and item counts, aiding the AI in understanding the application's status. ```html Page: Dashboard User role: Admin Total items: 42 Filter: Active only ``` -------------------------------- ### VOIX Settings and AI Provider Configuration Source: https://svenschultze.github.io/VOIX/index Guides users on accessing VOIX settings and configuring their preferred AI provider. It details the required parameters for OpenAI, OpenAI-compatible services (like Azure OpenAI), and local Ollama instances. ```APIDOC Accessing Settings: 1. Click the VOIX extension icon in your toolbar. 2. Select "Options" or right-click the icon and choose "Options". AI Provider Configuration: OpenAI: - Base URL: https://api.openai.com/v1 - API Key: Your OpenAI API key (starts with sk-) - Model: gpt-4 or gpt-3.5-turbo OpenAI-compatible (e.g. Azure OpenAI): - Base URL: Your OpenAI-compatible endpoint (e.g. https://api.example.org/v1) - API Key: Your API key - Model: Your model name Local (Ollama): - Base URL: http://localhost:11434/v1 - API Key: Not required (leave empty) - Model: qwen3, mistral, or your installed model ``` -------------------------------- ### VOIX Tool Execution Event Handling Source: https://svenschultze.github.io/VOIX/index Provides a JavaScript example of how to listen for and handle the 'call' event triggered by VOIX when an AI selects a tool. This handler receives parameters and executes the corresponding action within the website's logic. ```APIDOC document.querySelector('[name=create_task]').addEventListener('call', (e) => { const { title } = e.detail; // Create the task in your application createTask(title); }); ``` -------------------------------- ### Svelte Context Component Source: https://svenschultze.github.io/VOIX/index Provides an example of using the `` element within a Svelte component to expose user properties like name and role for AI processing. ```svelte Name: {user.name} Role: {user.role} ``` -------------------------------- ### Tool: Submit Contact Form Source: https://svenschultze.github.io/VOIX/index An example of a tool designed to submit contact form data. It defines required properties for name, email, and message, and includes an event listener to send the data via a POST request. ```html ``` ```javascript document.querySelector('[name=submit_contact]').addEventListener('call', async (e) => { const { name, email, message } = e.detail; await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, email, message }) }); // Show success message to user showNotification('Contact form submitted!'); }); ``` -------------------------------- ### Simple Tool: Toggle Theme Source: https://svenschultze.github.io/VOIX/index A basic example of a tool that toggles a CSS class on the body element to switch between light and dark themes. It listens for the 'call' event and manipulates the DOM. ```html ``` ```javascript document.querySelector('[name=toggle_theme]').addEventListener('call', (e) => { document.body.classList.toggle('dark-theme'); }); ``` -------------------------------- ### VOIX Context: Dynamic Context Update Example Source: https://svenschultze.github.io/VOIX/index Shows how to dynamically update the content of a VOIX `` element using JavaScript. This example uses `setInterval` to update a session state context with the current time, reflecting real-time application changes. ```html Loading... ``` -------------------------------- ### React App Usage of Tool Component Source: https://svenschultze.github.io/VOIX/index Demonstrates how to use the `Tool` component within a React application. It shows setting up state, handling the `onCall` event, and passing props to the `Tool` component, including custom `prop` elements. This example illustrates a counter increment functionality. ```tsx import { useState } from 'react' import './App.css' import { Tool } from './Tool' function App() { const [count, setCount] = useState(0) function handleIncrement(event: Event) { const details = (event as CustomEvent).detail; console.log('Incrementing counter:', details); setCount((prevCount) => prevCount + details.n); } return ( <> The current count is {count} handleIncrement(event)}> ) } export default App ``` -------------------------------- ### Svelte Tool Definition with `on:call` Event Source: https://svenschultze.github.io/VOIX/index Shows how to define a VOIX tool in Svelte using the `on:call` directive. This example includes a tool for adding items, specifying an `item` property, and handling the AI's call with the `handleAdd` function, which executes `addItem` and displays a message. ```svelte ``` -------------------------------- ### Vue Dashboard with Real-Time Context Updates Source: https://svenschultze.github.io/VOIX/index This snippet showcases a Vue.js dashboard component that utilizes the `` element for displaying real-time data like online users and last update time. It includes a script setup for managing reactive data and simulating updates using `setInterval`. ```vue ``` -------------------------------- ### VOIX Context Best Practices: Simplicity and Conciseness Source: https://svenschultze.github.io/VOIX/index Highlights best practices for VOIX context elements, emphasizing the use of simple, readable plain text over complex formats like JSON or HTML. It also advises on keeping context concise and relevant to the AI's needs. ```html Order ID: ORD-12345 Status: Processing Items: 3 Total: $99.99 {"orderId": "ORD-12345", "status": "processing", "items": 3} ``` -------------------------------- ### Define and Handle Tools with Return Data Source: https://svenschultze.github.io/VOIX/index Demonstrates how to define a tool with the 'return' attribute to send data back to the AI. Includes an event listener that dispatches a 'return' custom event with the fetched data in its detail. ```html ``` ```javascript document .querySelector('[name=get_weather]') .addEventListener('call', async (e) => { const { location } = e.detail; const weather = await fetchWeather(location); // your data-fetching logic // Send the weather data back to the AI e.target.dispatchEvent( new CustomEvent('return', { detail: weather }) ); // (Optional) update the UI for the user as usual updateWeatherWidget(weather); }); ``` -------------------------------- ### VOIX Website Declaration with Tools and Context Source: https://svenschultze.github.io/VOIX/index Demonstrates how to declare AI-executable actions using elements and provide current state information using elements within HTML. This allows VOIX to discover and utilize website capabilities. ```APIDOC Name: John Doe Role: Admin ``` -------------------------------- ### VOIX Context Common Patterns: Page Description Source: https://svenschultze.github.io/VOIX/index Illustrates a common pattern for VOIX context, using a `` element to provide a descriptive summary of the current page. This helps the AI understand the overall purpose and content of the user's view. ```html This is the user dashboard showing their recent activity and pending tasks. The user has been inactive for the past week but has several overdue items that need attention. ``` -------------------------------- ### VOIX Configuration Options Source: https://svenschultze.github.io/VOIX/index Lists the configuration parameters for VOIX's voice input, primarily utilizing OpenAI's Whisper API. This includes language selection, model choice, and base URL for API endpoints. ```APIDOC Language: Select your preferred language or use "Auto-detect" Model: whisper-1 (default) Base URL: Leave empty to use the same as your AI provider, otherwise specify another OpenAI-compatible endpoint API Key: Your API key (if using a separate endpoint) ``` -------------------------------- ### Declare Task Completion Tool and Context Source: https://svenschultze.github.io/VOIX/index This snippet demonstrates how a website declares a tool for marking tasks as complete and provides context about active tasks. The tool definition includes its name, description, and required properties, while the context provides relevant state information. ```apidoc Active tasks: 5 Task IDs: task-1, task-2, task-3, task-4, task-5 ``` -------------------------------- ### VOIX Standard: Tool and Context Elements Source: https://svenschultze.github.io/VOIX/index Defines the core VOIX standard elements `` and `` as they might appear in HTML. `` declares an action with properties, while `` provides state information. ```apidoc HTML Standard Elements for AI Interaction: Declares an action or capability a website provides. Attributes: - name: (string, required) The unique name of the tool. - description: (string, required) A human-readable description of what the tool does. Child Elements: - : Defines a parameter for the tool. Attributes: - name: (string, required) The name of the parameter. - type: (string, required) The data type of the parameter (e.g., 'string', 'number', 'boolean'). - required: (boolean, optional) Indicates if the parameter is mandatory. Provides current state or information about the page. Attributes: - name: (string, required) A name identifying the context information. Content: - Plain text describing the context. Example Usage: Online Store Items in cart: 3 Total: $47.99

...

``` -------------------------------- ### VOIX Tool Definition and Handling Source: https://svenschultze.github.io/VOIX/index Defines how to declare AI tools using HTML tags, specifying their name, description, and parameters. It also covers handling tool calls with JavaScript event listeners, including parameter extraction and asynchronous operations. ```APIDOC ``` ```javascript document.querySelector('[name=search_products]').addEventListener('call', async (e) => { const { query } = e.detail; const results = await searchAPI(query); updateUI(results); }); ``` -------------------------------- ### Best Practice: Graceful Error Handling in Tools Source: https://svenschultze.github.io/VOIX/index Illustrates a robust approach to handling errors within a tool's event listener. It uses a try-catch block to execute the tool's logic and logs errors, while also providing user feedback. ```javascript tool.addEventListener('call', async (e) => { try { // Your logic here await performAction(e.detail); } catch (err) { console.error('Tool execution failed:', err); showErrorMessage('Action failed. Please try again.'); } }); ``` -------------------------------- ### React Tool Definition with `useRef` and `useEffect` Source: https://svenschultze.github.io/VOIX/index Demonstrates defining a VOIX tool in React using `useRef` to attach an event listener for the 'call' event. It shows how to pass properties like `title` to the tool and handle the AI's action, including dependencies on `createTask` and `refreshTaskList`. ```jsx function TaskManager() { const toolRef = useRef(); useEffect(() => { const handleCall = async (e) => { const { title } = e.detail; await createTask(title); refreshTaskList(); }; toolRef.current?.addEventListener('call', handleCall); return () => toolRef.current?.removeEventListener('call', handleCall); }, []); return ( ); } ``` -------------------------------- ### Tool: Search Items Source: https://svenschultze.github.io/VOIX/index A tool for searching items, allowing optional filtering by category. It defines 'query' as a required string and 'category' as an optional string, with an event listener to perform the search. ```html ``` ```javascript document.querySelector('[name=search_items]').addEventListener('call', async (e) => { const { query, category } = e.detail; const results = await performSearch(query, category); updateUI(results); }); ``` -------------------------------- ### Return Success or Error Messages from Tools Source: https://svenschultze.github.io/VOIX/index Shows how to handle potential errors during tool execution and notify the AI about success or failure. A 'return' event is dispatched with a detail object indicating the outcome. ```javascript document.querySelector('[name=submit_form]').addEventListener('call', async (e) => { try { const response = await submitForm(e.detail); // Notify AI of success e.target.dispatchEvent(new CustomEvent('return', { detail: { success: true, message: 'Form submitted successfully.' } })); } catch (error) { // Notify AI of failure e.target.dispatchEvent(new CustomEvent('return', { detail: { success: false, error: error.message } })); } }); ``` -------------------------------- ### Svelte Integration: Counter Tool and Context Source: https://svenschultze.github.io/VOIX/index This Svelte component demonstrates integrating VOIX tools and context. It includes a reactive counter, a button to increment it, a VOIX tool ('increment_counter') that calls a local function via 'oncall', and a VOIX context ('counter') that exposes the current count. ```svelte increment(event.detail.n)}> The current count is {count}. ``` -------------------------------- ### Fetch Weather Data with Svelte Tool Source: https://svenschultze.github.io/VOIX/index Demonstrates creating a VOIX tool in Svelte to fetch weather data. It uses the Open-Meteo API for geocoding and weather forecasts, handling location lookup and returning weather details or an error message. The tool is defined with props for location and an oncall handler to execute the fetch logic. ```svelte { const { location } = event.detail; const data = await getWeather(location); event.target?.dispatchEvent(new CustomEvent('return', { detail: data })); }}> ``` -------------------------------- ### Vue Component Tools: User Profile Management Source: https://svenschultze.github.io/VOIX/index Demonstrates defining component-specific tools within a Vue.js template using the `` element and `@call` event binding. It shows how to link tools like 'update_profile' and 'toggle_notifications' to their respective handler methods, passing parameters via `` and managing reactive user state. ```vue ``` -------------------------------- ### Svelte Integration: Conditional Admin Tools Source: https://svenschultze.github.io/VOIX/index This Svelte component illustrates conditional rendering of VOIX tools and context based on application state. It uses a boolean flag 'isAdmin' to toggle the visibility of an admin tool and related context, demonstrating how to manage access to specific functionalities. ```svelte {#if isAdmin} Admin tools are available. {/if}

``` -------------------------------- ### Handle Tool Call Event in JavaScript Source: https://svenschultze.github.io/VOIX/index This JavaScript code shows how to listen for a 'call' event dispatched by a tool. It extracts the 'taskId' from the event details and executes a local function 'markTaskComplete' followed by a UI update. ```javascript tool.addEventListener('call', (e) => { const { taskId } = e.detail; markTaskComplete(taskId); updateTaskList(); }); ``` -------------------------------- ### React Context Component Source: https://svenschultze.github.io/VOIX/index Shows how to embed a `` element within a React component to expose user-specific information like name and role to AI agents. ```jsx function UserContext({ user }) { return ( {`Name: ${user.name} Role: ${user.role}`} ); } ``` -------------------------------- ### Global Styles for Hiding VOIX Elements Source: https://svenschultze.github.io/VOIX/index This CSS snippet is used to hide VOIX-specific elements like , , and from the user interface. This ensures that the underlying website's UI remains clean and unaffected by the VOIX markup. ```css /* app.css or global styles */ tool, prop, context, array, dict { display: none; } ``` -------------------------------- ### Vite Configuration for VOIX Custom Elements Source: https://svenschultze.github.io/VOIX/index Configures Vite to recognize VOIX custom elements (`tool`, `prop`, `context`, `array`, `dict`) by updating the Vue template compiler options. This prevents Vue from issuing warnings about unrecognized HTML tags. ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // Tell Vue to ignore VOIX custom elements isCustomElement: (tag) => ['tool', 'prop', 'context', 'array', 'dict'].includes(tag) } } }) ] }) ``` -------------------------------- ### Global Styles for VOIX Elements Source: https://svenschultze.github.io/VOIX/index Applies global CSS rules to hide VOIX custom elements (`tool`, `prop`, `context`, `array`, `dict`) in the application's layout. This ensures these elements do not visually interfere with the UI, as their functionality is managed by JavaScript. ```css /* App.vue or global styles */ tool, prop, context, array, dict { display: none; } ``` -------------------------------- ### Vue Component Tools: Conditional Availability with v-if Source: https://svenschultze.github.io/VOIX/index Explains how to conditionally render tools in Vue.js components based on application state, such as user roles or permissions, using the `v-if` directive. This ensures that tools are only exposed to the AI when they are relevant and authorized, as demonstrated with an admin-specific 'delete_users' tool and a general 'export_data' tool. ```vue ``` -------------------------------- ### Vue Tool Definition with `@call` Event Source: https://svenschultze.github.io/VOIX/index Illustrates creating a VOIX tool in Vue.js using the `@call` event binding. This snippet shows how to define a tool with a `status` property and handle the AI's invocation via the `handleUpdate` method, which calls `updateStatus` and `refreshUI`. ```vue ``` -------------------------------- ### Vue Context Component Source: https://svenschultze.github.io/VOIX/index Demonstrates embedding a `` element in a Vue.js component, making user details such as name and role available for AI interaction. ```vue ``` -------------------------------- ### React Tool Component Definition Source: https://svenschultze.github.io/VOIX/index Defines a reusable `Tool` component in React (TSX) for encapsulating tool definitions. It handles `onCall` events and accepts props like `name`, `description`, and `children`. The component uses `useRef` and `useEffect` to manage event listeners for custom events. ```tsx import React, { useRef, useEffect } from 'react'; // Define the type for the event handler prop type ToolCallEventHandler = (event: CustomEvent) => void; // Define the component's props type ToolProps = { name: string; description: string; onCall: ToolCallEventHandler; return?: boolean; children?: React.ReactNode; } & Omit, 'onCall'>; export function Tool({ name, description, onCall, children, // Rename the 'return' prop to avoid conflict with the JS keyword return: returnProp, ...rest }: ToolProps) { const toolRef = useRef(null); useEffect(() => { const element = toolRef.current; if (!element || !onCall) return; const listener = (event: CustomEvent) => onCall(event); element.addEventListener('call', listener); return () => { element.removeEventListener('call', listener); }; }, [onCall]); // Re-attach the listener if the onCall function changes return ( {children} ); } ``` -------------------------------- ### Vue Component Tools: Unique Product IDs for Tools Source: https://svenschultze.github.io/VOIX/index Illustrates how to ensure unique tool names in reusable Vue.js components by incorporating dynamic identifiers, such as a product ID, into the tool's `name` attribute. This prevents naming conflicts when multiple instances of a component are used, as shown with 'add_to_cart_product.id' and 'toggle_favorite_product.id'. ```vue ``` -------------------------------- ### Global Styles for Hiding VOIX Elements Source: https://svenschultze.github.io/VOIX/index CSS rules to hide VOIX custom elements from the user interface. This is typically used when VOIX components are managed programmatically or within a specific framework context, ensuring they don't render visible DOM elements by default. ```css /* index.css or global styles */ tool, prop, context, array, dict { display: none; } ``` -------------------------------- ### TypeScript Declarations for VOIX Custom Elements Source: https://svenschultze.github.io/VOIX/index Provides TypeScript type definitions for VOIX custom elements to enable type checking and autocompletion in React projects. It declares intrinsic elements like 'context', 'tool', 'prop', 'array', and 'dict' with their respective custom attributes and types. ```typescript // e.g. vite-env.d.ts declare namespace JSX { interface IntrinsicElements { 'context': React.DetailedHTMLProps & { // Add any custom props here name?: string; }, HTMLElement>; // You can add more custom elements here if needed 'tool': React.DetailedHTMLProps & { name: string; description?: string; return?: boolean; }, HTMLElement>; 'prop': React.DetailedHTMLProps & { name: string; type: string; required?: boolean; description?: string; }, HTMLElement>; 'array': React.DetailedHTMLProps & {}, HTMLElement>; 'dict': React.DetailedHTMLProps & {}, HTMLElement>; } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.

Dashboard

{{ user.name }}'s Profile

{{ product.name }}