### Initialize Clippy via npm Source: https://github.com/pithings/clippy/blob/main/README.md Install and import ClippyJS using npm for use in projects with build tools. This example shows loading and displaying the Clippy agent. ```javascript import { initAgent } from "clippyjs"; import { Clippy } from "clippyjs/agents"; // Load and show the agent const agent = await initAgent(Clippy); agent.show(); ``` -------------------------------- ### Text-to-Speech Example Source: https://github.com/pithings/clippy/blob/main/README.md This example shows how to enable text-to-speech for agent speech using the Web Speech API by passing the `{ tts: true }` option. ```javascript agent.speak("Hello! I'm Clippy, your virtual assistant.", { tts: true }); ``` -------------------------------- ### Agent Data Format Example Source: https://github.com/pithings/clippy/blob/main/AGENTS.md Illustrates the structure of animation data exported by each agent, including frame size, sounds, TTS configuration, and animation definitions. ```typescript { overlayCount: number, framesize: [width, height], sounds: string[], tts: { rate: number, pitch: number, voice: string }, animations: { [name: string]: { frames: Array<{ duration: number, images: [x, y][], sound?: string, exitBranch?: number, branching?: { branches: Array<{ weight: number, frameIndex: number }> } }>, useExitBranching?: boolean } } } ``` -------------------------------- ### GitHub Actions Workflow for Checks Source: https://github.com/pithings/clippy/blob/main/AGENTS.md This workflow runs on push and pull requests to perform essential checks: installing dependencies, type checking, linting, and building the project. ```yaml name: Checks on: [push, pull_request] jobs: checks: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - name: Install dependencies run: pnpm install --frozen-lockfile - name: Type check run: pnpm typecheck - name: Lint run: pnpm lint - name: Build run: pnpm build ``` -------------------------------- ### ClippyJS Initialization and Usage Source: https://github.com/pithings/clippy/blob/main/README.md Demonstrates how to initialize and use ClippyJS via CDN or npm, including importing agents and basic agent interactions. ```APIDOC ## CDN Usage ### Description Use ClippyJS directly in the browser via CDN without build tools. ### Code Example ```html ``` ## npm package Usage ### Description Install and import ClippyJS agents using npm. ### Code Example ```js import { initAgent } from "clippyjs"; import { Clippy } from "clippyjs/agents"; // Load and show the agent const agent = await initAgent(Clippy); agent.show(); ``` ## Available Agents ### Description Import agents individually or all at once. ### Code Example ```js // Import all agents import * as agents from "clippyjs/agents"; // Or import individually import { Clippy } from "clippyjs/agents"; // Also available: Bonzi, F1, Genie, Genius, Links, Merlin, Peedy, Rocky, Rover // Import from own subpath import Merlin from "clippyjs/agents/merlin"; ``` ``` -------------------------------- ### Agent Actions - Basic Source: https://github.com/pithings/clippy/blob/main/README.md Shows how to make the agent perform basic actions like playing animations, speaking, and moving. Actions are queued and executed sequentially. ```javascript // Play a specific animation agent.play("Searching"); // Play a random animation agent.animate(); // List all available animations agent.animations(); // => ["MoveLeft", "Congratulate", "Hide", "Pleased", "Acknowledge", ...] // Show a speech balloon agent.speak("When all else fails, bind some paper together. My name is Clippy."); // Move to a given point, using animation if available agent.moveTo(100, 100); // Gesture at a given point (if a gesture animation is available) agent.gestureAt(200, 200); ``` -------------------------------- ### Initialize Agent with Clippy Source: https://github.com/pithings/clippy/blob/main/AGENTS.md Demonstrates how to initialize an agent using the Clippy export. Ensure the agent is imported correctly. ```typescript import { initAgent } from "clippyjs"; import { Clippy } from "clippyjs/agents"; const agent = await initAgent(Clippy); ``` -------------------------------- ### Importing Agents Source: https://github.com/pithings/clippy/blob/main/README.md Demonstrates how to import all available agents at once or individually. Agents can also be imported from their specific subpaths. ```javascript // Import all agents import * as agents from "clippyjs/agents"; // Or import individually import { Clippy } from "clippyjs/agents"; // Also available: Bonzi, F1, Genie, Genius, Links, Merlin, Peedy, Rocky, Rover ``` ```javascript import Merlin from "clippyjs/agents/merlin"; ``` -------------------------------- ### Initialize Clippy via CDN Source: https://github.com/pithings/clippy/blob/main/README.md Use this snippet to quickly add Clippy to a website without any build tools, directly via a CDN link. ```html ``` -------------------------------- ### Display Agent with agent.show() Source: https://context7.com/pithings/clippy/llms.txt Makes the agent visible on screen with an entrance animation. If no position has been set, the agent appears centered at the top of the viewport. Pass `true` for instant display without animation. ```javascript const agent = await initAgent(Clippy); // Show with animation (default) agent.show(); // Show immediately without animation agent.show(true); ``` -------------------------------- ### Importing and Loading Agents in ClippyJS Source: https://context7.com/pithings/clippy/llms.txt Demonstrates how to import various animated assistant agents and load them dynamically by name. Ensure the 'clippyjs/agents' path is correctly configured in your project. ```javascript import { initAgent } from "clippyjs"; import { Clippy, Bonzi, F1, Genie, Genius, Links, Merlin, Peedy, Rocky, Rover } from "clippyjs/agents"; // Or import individual agents from subpaths import Merlin from "clippyjs/agents/merlin"; import Clippy from "clippyjs/agents/clippy"; // Load agent dynamically const agentName = "Bonzi"; const agents = await import("clippyjs/agents"); const agent = await initAgent(agents[agentName]); ``` -------------------------------- ### Build Configuration with Inline PNG Plugin Source: https://github.com/pithings/clippy/blob/main/AGENTS.md Defines the build process using obuild, incorporating a custom plugin to convert PNG sprite sheets to base64 data URIs. Output is directed to 'dist/' with agent-specific chunk naming. ```javascript import { defineConfig } from 'obuild'; import inlinePng from 'rolldown-plugin-inline-png'; export default defineConfig({ plugins: [inlinePng()], input: { // Per-agent chunk naming agents: 'src/agents/index.ts', }, output: { dir: 'dist/agents', format: 'esm', chunkFileNames: '[name].js', }, }); ``` -------------------------------- ### agent.show() - Display the Agent Source: https://context7.com/pithings/clippy/llms.txt Makes the agent visible on screen with an entrance animation. Can also display instantly. ```APIDOC ## agent.show() - Display the Agent ### Description Makes the agent visible on screen with an entrance animation. If no position has been set, the agent appears centered at the top of the viewport. Pass `true` for instant display without animation. ### Method `agent.show(instant?: boolean)` ### Parameters #### Query Parameters - **instant** (boolean) - Optional - If `true`, displays the agent immediately without animation. ### Request Example ```javascript const agent = await initAgent(Clippy); // Show with animation (default) agent.show(); // Show immediately without animation agent.show(true); ``` ``` -------------------------------- ### Initialize Animated Agent with initAgent Source: https://context7.com/pithings/clippy/llms.txt Asynchronously loads and initializes an agent character. It loads the agent's sprite sheet, animation data, and sound effects, then returns a fully configured Agent instance ready for use. Import specific agents or all agents dynamically. ```javascript import { initAgent } from "clippyjs"; import { Clippy } from "clippyjs/agents"; // Initialize and display Clippy const agent = await initAgent(Clippy); agent.show(); // Or import all agents and choose dynamically import * as agents from "clippyjs/agents"; const merlin = await initAgent(agents.Merlin); merlin.show(); ``` -------------------------------- ### initAgent - Initialize an Animated Agent Source: https://context7.com/pithings/clippy/llms.txt Asynchronously loads and initializes an agent character, returning a configured Agent instance. ```APIDOC ## initAgent - Initialize an Animated Agent ### Description The `initAgent` function asynchronously loads and initializes an agent character. It loads the agent's sprite sheet, animation data, and sound effects, then returns a fully configured Agent instance ready for use. ### Method `initAgent(agentConfig)` ### Parameters #### Path Parameters - **agentConfig** (Object) - Required - Configuration object for the agent to load (e.g., `Clippy` from `clippyjs/agents`). ### Request Example ```javascript import { initAgent } from "clippyjs"; import { Clippy } from "clippyjs/agents"; // Initialize and display Clippy const agent = await initAgent(Clippy); agent.show(); // Or import all agents and choose dynamically import * as agents from "clippyjs/agents"; const merlin = await initAgent(agents.Merlin); merlin.show(); ``` ### Response #### Success Response (200) - **Agent** (Object) - An instance of the initialized agent. #### Response Example ```javascript // agent object is returned ``` ``` -------------------------------- ### Agent Control - Visibility and State Source: https://github.com/pithings/clippy/blob/main/README.md Demonstrates how to control the agent's visibility, pause/resume animations, and remove it from the DOM. These actions manage the agent's lifecycle and presentation. ```javascript // Hide the agent agent.hide(); // Pause and resume animations agent.pause(); agent.resume(); // Remove the agent from the DOM agent.dispose(); ``` -------------------------------- ### GitHub Actions Workflow for Autofix Source: https://github.com/pithings/clippy/blob/main/AGENTS.md This workflow automatically formats code using 'pnpm fmt' on push and pull requests, committing any fixes found. It's designed to maintain consistent code style. ```yaml name: Autofix on: [push, pull_request] jobs: autofix: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: # Allow to commit back to the repo token: - uses: actions/setup-node@v4 with: node-version: 20 - name: Install dependencies run: pnpm install --frozen-lockfile - name: Auto format code run: pnpm fmt - name: Commit fixes uses: "peter-evans/create-pull-request@v6" with: commit-message: "chore: Auto format code with pnpm fmt" title: "Auto Format Code" body: "This PR automatically formats code using `pnpm fmt`." branch: "auto-fix-$(date +%s)" ``` -------------------------------- ### agent.moveTo() - Move Agent to Position Source: https://context7.com/pithings/clippy/llms.txt Moves the agent to a specified position on the screen. It utilizes a movement animation if available and ensures the agent remains within the viewport boundaries. ```APIDOC ## agent.moveTo() - Move Agent to Position ### Description Moves the agent to a specific screen position using movement animation if available. The agent stays within viewport bounds. ### Method POST ### Endpoint /agent/move ### Parameters #### Query Parameters - **x** (integer) - Required - The target x-coordinate on the screen. - **y** (integer) - Required - The target y-coordinate on the screen. - **duration** (integer) - Optional - The duration of the movement animation in milliseconds. Defaults to 1000ms. Use 0 for an instant move. ### Request Example ```json { "x": 100, "y": 100, "duration": 1000 } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "moved". ### Response Example ```json { "status": "moved" } ``` ``` -------------------------------- ### Agent Actions - Advanced Source: https://github.com/pithings/clippy/blob/main/README.md Covers advanced agent interactions including speech with text-to-speech, holding speech balloons, streaming text, and controlling the agent's queue. ```javascript // Speak with text-to-speech (uses Web Speech API) agent.speak("Hello! I'm here to help.", { tts: true }); // Keep the balloon open until manually closed agent.speak("Read this carefully.", { hold: true }); // Stream text into the speech balloon from an async iterable (e.g. LLM response) await agent.speakStream(asyncIterableOfChunks); await agent.speakStream(asyncIterableOfChunks, { tts: true }); // Stop the current action in the queue agent.stopCurrent(); // Stop all actions and return to idle agent.stop(); ``` -------------------------------- ### List Available Animations Source: https://context7.com/pithings/clippy/llms.txt Retrieves a list of all animation names supported by the current agent. Use this to dynamically select and play animations. ```javascript const animations = agent.animations(); console.log(animations); // => ["Alert", "Congratulate", "Explain", "GetAttention", "GestureDown", // "GestureLeft", "GestureRight", "GestureUp", "GoodBye", "Greeting", // "Hide", "Idle1_1", "IdleAtom", "IdleEyeBrowRaise", "IdleFingerTap", // "IdleHeadScratch", "IdleRopePile", "IdleSideToSide", "IdleSnooze", // "LookDown", "LookDownLeft", "LookDownRight", "LookLeft", "LookRight", // "LookUp", "LookUpLeft", "LookUpRight", "Print", "Processing", // "RestPose", "Save", "Searching", "SendMail", "Show", "Thinking", // "Wave", "Writing", ...] // Play a random animation from the list const randomAnim = animations[Math.floor(Math.random() * animations.length)]; agent.play(randomAnim); ``` -------------------------------- ### Text-to-Speech (TTS) Integration Source: https://github.com/pithings/clippy/blob/main/README.md Explains how to enable text-to-speech for agent speech using the Web Speech API. ```APIDOC ## Text-to-Speech (TTS) ### Description Each agent can utilize the Web Speech API for voice output, providing a unique voice personality. To enable TTS, pass the `{ tts: true }` option to the `speak()` method. ### Usage ```js agent.speak("Hello! I'm Clippy, your virtual assistant.", { tts: true }); ``` ``` -------------------------------- ### ClippyJS Agent API Methods Source: https://github.com/pithings/clippy/blob/main/README.md Details the various methods available to control agent behavior, such as animations, speech, movement, and state management. ```APIDOC ## Agent API All agent actions are queued and executed sequentially, allowing for chaining. ### Play Specific Animation - **Method**: `agent.play(animationName)` - **Description**: Plays a specific animation by its name. - **Example**: `agent.play("Searching");` ### Play Random Animation - **Method**: `agent.animate()` - **Description**: Plays a random available animation. - **Example**: `agent.animate();` ### List Available Animations - **Method**: `agent.animations()` - **Description**: Returns a list of all available animation names. - **Example**: `agent.animations(); // => ["MoveLeft", "Congratulate", "Hide", "Pleased", "Acknowledge", ...]` ### Speak - **Method**: `agent.speak(text, [options])` - **Description**: Displays a speech balloon with the given text. Supports text-to-speech (TTS) and holding the balloon open. - **Options**: - `tts` (boolean): Use Web Speech API for voice output. Defaults to `false`. - `hold` (boolean): Keep the balloon open until manually closed. Defaults to `false`. - **Example**: - `agent.speak("When all else fails, bind some paper together. My name is Clippy.");` - `agent.speak("Hello! I'm here to help.", { tts: true });` - `agent.speak("Read this carefully.", { hold: true });` ### Speak Stream - **Method**: `agent.speakStream(asyncIterableOfChunks, [options])` - **Description**: Streams text into the speech balloon from an async iterable, such as an LLM response. Supports TTS. - **Options**: - `tts` (boolean): Use Web Speech API for voice output. Defaults to `false`. - **Example**: `await agent.speakStream(asyncIterableOfChunks);` - **Example with TTS**: `await agent.speakStream(asyncIterableOfChunks, { tts: true });` ### Move To - **Method**: `agent.moveTo(x, y)` - **Description**: Moves the agent to the specified coordinates (x, y), using an animation if available. - **Example**: `agent.moveTo(100, 100);` ### Gesture At - **Method**: `agent.gestureAt(x, y)` - **Description**: Makes the agent perform a gesture at the specified coordinates (x, y), if a gesture animation is available. - **Example**: `agent.gestureAt(200, 200);` ### Stop Current Action - **Method**: `agent.stopCurrent()` - **Description**: Stops the currently executing action in the queue. - **Example**: `agent.stopCurrent();` ### Stop All Actions - **Method**: `agent.stop()` - **Description**: Stops all ongoing actions and returns the agent to an idle state. - **Example**: `agent.stop();` ### Hide Agent - **Method**: `agent.hide()` - **Description**: Hides the agent from the page. - **Example**: `agent.hide();` ### Pause Animations - **Method**: `agent.pause()` - **Description**: Pauses the current animation. - **Example**: `agent.pause();` ### Resume Animations - **Method**: `agent.resume()` - **Description**: Resumes a paused animation. - **Example**: `agent.resume();` ### Dispose Agent - **Method**: `agent.dispose()` - **Description**: Removes the agent from the DOM. - **Example**: `agent.dispose();` ``` -------------------------------- ### agent.animations() - List Available Animations Source: https://context7.com/pithings/clippy/llms.txt Retrieves a list of all animation names that the agent can perform. The available animations may vary depending on the specific agent. ```APIDOC ## agent.animations() - List Available Animations ### Description Returns an array of all available animation names for the current agent. Different agents have different animations available. ### Method GET ### Endpoint /agent/animations ### Response #### Success Response (200) - **animations** (array) - An array of strings, where each string is an available animation name. ### Response Example ```json { "animations": [ "Alert", "Congratulate", "Explain", "GetAttention", "GestureDown", "GestureLeft", "GestureRight", "GestureUp", "GoodBye", "Greeting", "Hide", "Idle1_1", "IdleAtom", "IdleEyeBrowRaise", "IdleFingerTap", "IdleHeadScratch", "IdleRopePile", "IdleSideToSide", "IdleSnooze", "LookDown", "LookDownLeft", "LookDownRight", "LookLeft", "LookRight", "LookUp", "LookUpLeft", "LookUpRight", "Print", "Processing", "RestPose", "Save", "Searching", "SendMail", "Show", "Thinking", "Wave", "Writing" ] } ``` ``` -------------------------------- ### agent.pause() / agent.resume() - Pause and Resume Source: https://context7.com/pithings/clippy/llms.txt Allows for pausing and resuming all agent activities, including animations and speech balloons. This is useful during user interactions. ```APIDOC ## agent.pause() / agent.resume() - Pause and Resume ### Description Pauses and resumes all agent animations and speech balloon activity. Useful when the user is interacting with the agent. ### Method POST ### Endpoint /agent/pause ### Parameters #### Query Parameters - **action** (string) - Required - Specifies the action to perform. Can be 'pause' or 'resume'. ### Request Example ```json { "action": "pause" } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "paused" or "resumed". ### Response Example ```json { "status": "paused" } ``` ``` -------------------------------- ### CDN Usage for ClippyJS Source: https://context7.com/pithings/clippy/llms.txt Integrate ClippyJS directly in the browser using a CDN. This method requires no build tools and is suitable for quick prototypes or simple websites. ```html Clippy Demo

Welcome!

``` -------------------------------- ### agent.play() - Play a Named Animation Source: https://context7.com/pithings/clippy/llms.txt Plays a specific animation by name. Animations are queued and executed sequentially. ```APIDOC ## agent.play() - Play a Named Animation ### Description Plays a specific animation by name. All animations are queued and executed in sequence. Returns `true` if the animation exists and was queued. ### Method `agent.play(animationName: string, timeout?: number, callback?: Function)` ### Parameters #### Path Parameters - **animationName** (string) - Required - The name of the animation to play. #### Query Parameters - **timeout** (number) - Optional - The duration in milliseconds to play the animation. Defaults to 5000ms. - **callback** (Function) - Optional - A function to call when the animation is complete. ### Request Example ```javascript // Play a specific animation agent.play("Searching"); agent.play("Congratulate"); agent.play("Thinking"); agent.play("Wave"); // Animation with custom timeout (default 5000ms) agent.play("Writing", 10000); // Animation with completion callback agent.play("GetAttention", 5000, () => { console.log("Animation finished"); }); // Check if animation was queued successfully if (!agent.play("NonExistent")) { console.log("Animation not found"); } ``` ``` -------------------------------- ### Play Named Animation with agent.play() Source: https://context7.com/pithings/clippy/llms.txt Plays a specific animation by name. All animations are queued and executed in sequence. Returns `true` if the animation exists and was queued. Supports custom timeouts and completion callbacks. ```javascript // Play a specific animation agent.play("Searching"); agent.play("Congratulate"); agent.play("Thinking"); agent.play("Wave"); // Animation with custom timeout (default 5000ms) agent.play("Writing", 10000); // Animation with completion callback agent.play("GetAttention", 5000, () => { console.log("Animation finished"); }); // Check if animation was queued successfully if (!agent.play("NonExistent")) { console.log("Animation not found"); } ``` -------------------------------- ### Display Speech Balloon with agent.speak() Source: https://context7.com/pithings/clippy/llms.txt Displays text in a speech balloon next to the agent with a typewriter effect. Supports text-to-speech using the Web Speech API and can hold the balloon open until manually closed. Multiple speech actions can be chained. ```javascript // Simple speech agent.speak("Hello! I'm Clippy, your virtual assistant."); // Speech with text-to-speech (each agent has a unique voice) agent.speak("Let me read this aloud for you!", { tts: true }); // Keep balloon open until user interaction agent.speak("Read this carefully before continuing.", { hold: true }); // Chain multiple speech actions agent.speak("First message"); agent.speak("Second message"); agent.speak("Third message", { tts: true }); ``` -------------------------------- ### agent.gestureAt() - Gesture Toward a Point Source: https://context7.com/pithings/clippy/llms.txt Directs the agent to gesture or look towards a specific point on the screen. The agent automatically selects an appropriate directional animation for the gesture. ```APIDOC ## agent.gestureAt() - Gesture Toward a Point ### Description Makes the agent gesture or look toward a specific point on the screen. Automatically selects the appropriate directional animation. ### Method POST ### Endpoint /agent/gesture ### Parameters #### Query Parameters - **x** (integer) - Required - The target x-coordinate on the screen. - **y** (integer) - Required - The target y-coordinate on the screen. ### Request Example ```json { "x": 500, "y": 300 } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "gestured". ### Response Example ```json { "status": "gestured" } ``` ``` -------------------------------- ### agent.animate() - Play Random Animation Source: https://context7.com/pithings/clippy/llms.txt Plays a random non-idle animation from the agent's repertoire. ```APIDOC ## agent.animate() - Play Random Animation ### Description Plays a random non-idle animation from the agent's repertoire. Useful for adding personality during idle moments. ### Method `agent.animate()` ### Request Example ```javascript // Play a random animation agent.animate(); // Periodically play random animations setInterval(() => { agent.animate(); }, 5000); ``` ``` -------------------------------- ### Stream Text into Speech Balloon with agent.speakStream() Source: https://context7.com/pithings/clippy/llms.txt Streams text chunks into the speech balloon from an async iterable, perfect for displaying LLM responses in real-time. Returns a Promise that resolves when streaming is complete. Supports text-to-speech after completion and integration with fetch streaming. ```javascript // Stream from an async generator (e.g., LLM response) async function* generateResponse() { yield "Hello! "; yield "I am "; yield "thinking..."; yield " Here's my answer!"; } await agent.speakStream(generateResponse()); // Stream with text-to-speech after completion await agent.speakStream(llmResponseStream, { tts: true }); // Integration with fetch streaming async function* streamFromAPI() { const response = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ message: "Hello" }) }); const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; yield decoder.decode(value); } } await agent.speakStream(streamFromAPI(), { tts: true }); ``` -------------------------------- ### Play Random Animation with agent.animate() Source: https://context7.com/pithings/clippy/llms.txt Plays a random non-idle animation from the agent's repertoire. Useful for adding personality during idle moments. Can be used periodically with `setInterval`. ```javascript // Play a random animation agent.animate(); // Periodically play random animations setInterval(() => { agent.animate(); }, 5000); ``` -------------------------------- ### Pause and Resume Agent Activity Source: https://context7.com/pithings/clippy/llms.txt Pauses all agent animations and speech balloon activity with `pause()`, and resumes them with `resume()`. Useful during user interactions like dragging. ```javascript // Pause all activity agent.pause(); ``` ```javascript // Resume when ready agent.resume(); ``` ```javascript // Example: Pause during drag element.addEventListener("mousedown", () => { agent.pause(); }); element.addEventListener("mouseup", () => { agent.resume(); }); ``` -------------------------------- ### Hide Agent with agent.hide() Source: https://context7.com/pithings/clippy/llms.txt Hides the agent from the screen, optionally with an exit animation. The agent remains in memory and can be shown again. Supports immediate hiding or hiding with a callback. ```javascript // Hide with animation (default) agent.hide(); // Hide immediately without animation agent.hide(true); // Hide with callback when complete agent.hide(false, () => { console.log("Agent is now hidden"); }); ``` -------------------------------- ### Move Agent to Position Source: https://context7.com/pithings/clippy/llms.txt Moves the agent to specified screen coordinates using an optional movement animation and duration. The agent remains within viewport bounds. ```javascript // Move to coordinates (uses movement animation) agent.moveTo(100, 100); ``` ```javascript // Move with custom duration (default 1000ms) agent.moveTo(500, 300, 2000); ``` ```javascript // Instant move (no animation) agent.moveTo(200, 200, 0); ``` ```javascript // Chain movement with other actions agent.moveTo(100, 100); agent.speak("I moved here!"); agent.moveTo(500, 500); agent.speak("Now I'm over here!"); ``` -------------------------------- ### agent.delay() - Add Queue Delay Source: https://context7.com/pithings/clippy/llms.txt Introduces a delay into the agent's action queue, allowing for timed sequences between animations or speech. ```APIDOC ## agent.delay() - Add Queue Delay ### Description Adds a delay to the action queue. Useful for timing between animations or speech. ### Method POST ### Endpoint /agent/delay ### Parameters #### Query Parameters - **duration** (integer) - Optional - The delay duration in milliseconds. Defaults to 250ms. ### Request Example ```json { "duration": 2000 } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "delayed". ### Response Example ```json { "status": "delayed" } ``` ``` -------------------------------- ### Interactive Agent Behavior in ClippyJS Source: https://context7.com/pithings/clippy/llms.txt Configures an agent to be draggable and respond to double-clicks. The agent automatically stays within viewport bounds and can be repositioned after window resize. ```javascript const agent = await initAgent(Clippy); agent.show(); // Agent is now draggable - users can click and drag to reposition // Double-clicking triggers "ClickedOn" animation or a random animation // Access the agent's DOM element for custom event handling agent._el.addEventListener("dblclick", () => { agent.speak("You double-clicked me!", { tts: true }); }); // Reposition after window resize (called automatically) agent.reposition(); ``` -------------------------------- ### Lazy Loader Interface for Agents Source: https://github.com/pithings/clippy/blob/main/AGENTS.md Shows the structure of lazy loaders exported by each agent, allowing for on-demand loading of agent data, sounds, and sprite sheets. ```typescript { agent: () => import("./agent.ts"), sound: () => import("./sounds-mp3.ts"), map: () => import("./map.png") } ``` -------------------------------- ### Add Queue Delay Source: https://context7.com/pithings/clippy/llms.txt Inserts a delay into the action queue using `delay()`. Use the default 250ms or specify a custom duration in milliseconds for timing between actions. ```javascript // Add default delay (250ms) agent.delay(); ``` ```javascript // Add custom delay agent.speak("Wait for it..."); agent.delay(2000); agent.speak("Surprise!"); ``` ```javascript // Build complex sequences agent.play("Thinking"); agent.delay(1500); agent.play("GetAttention"); agent.speak("I've got it!"); ``` -------------------------------- ### agent.stop() / agent.stopCurrent() - Control Animation Queue Source: https://context7.com/pithings/clippy/llms.txt Manages the animation queue. `stop()` halts all animations and clears the queue, returning the agent to an idle state. `stopCurrent()` skips only the currently playing animation and proceeds to the next item in the queue. ```APIDOC ## agent.stop() / agent.stopCurrent() - Control Animation Queue ### Description `stop()` halts all animations and clears the queue. `stopCurrent()` skips only the current action and continues with the next queued item. ### Method POST ### Endpoint /agent/stop ### Parameters #### Query Parameters - **mode** (string) - Optional - Specifies the stopping mode. Can be 'all' (default) or 'current'. ### Request Example ```json { "mode": "current" } ``` ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "stopped". ### Response Example ```json { "status": "stopped" } ``` ``` -------------------------------- ### agent.speak() - Display Speech Balloon Source: https://context7.com/pithings/clippy/llms.txt Displays text in a speech balloon with a typewriter effect, supporting text-to-speech and holding the balloon open. ```APIDOC ## agent.speak() - Display Speech Balloon ### Description Displays text in a speech balloon next to the agent with a typewriter effect. Supports text-to-speech using the Web Speech API and can hold the balloon open until manually closed. ### Method `agent.speak(text: string, options?: { tts?: boolean, hold?: boolean })` ### Parameters #### Path Parameters - **text** (string) - Required - The text to display in the speech balloon. #### Query Parameters - **tts** (boolean) - Optional - If `true`, enables text-to-speech for the message. - **hold** (boolean) - Optional - If `true`, keeps the speech balloon open until manually closed. ### Request Example ```javascript // Simple speech agent.speak("Hello! I'm Clippy, your virtual assistant."); // Speech with text-to-speech (each agent has a unique voice) agent.speak("Let me read this aloud for you!", { tts: true }); // Keep balloon open until user interaction agent.speak("Read this carefully before continuing.", { hold: true }); // Chain multiple speech actions agent.speak("First message"); agent.speak("Second message"); agent.speak("Third message", { tts: true }); ``` ``` -------------------------------- ### Gesture Toward a Point Source: https://context7.com/pithings/clippy/llms.txt Makes the agent gesture or look towards a specific point on the screen, automatically selecting a directional animation. Can be used to point at elements. ```javascript // Gesture toward a point agent.gestureAt(500, 300); ``` ```javascript // Point at an element const button = document.querySelector("#submit-btn"); const rect = button.getBoundingClientRect(); agent.gestureAt(rect.left + rect.width / 2, rect.top + rect.height / 2); ``` ```javascript // Combined with speech agent.speak("Click this button!"); agent.gestureAt(300, 400); ``` -------------------------------- ### agent.hide() - Hide the Agent Source: https://context7.com/pithings/clippy/llms.txt Hides the agent from the screen, optionally with an exit animation. The agent remains in memory. ```APIDOC ## agent.hide() - Hide the Agent ### Description Hides the agent from the screen, optionally with an exit animation. The agent remains in memory and can be shown again. ### Method `agent.hide(instant?: boolean, callback?: Function)` ### Parameters #### Query Parameters - **instant** (boolean) - Optional - If `true`, hides the agent immediately without animation. - **callback** (Function) - Optional - A function to call when the hide animation is complete. ### Request Example ```javascript // Hide with animation (default) agent.hide(); // Hide immediately without animation agent.hide(true); // Hide with callback when complete agent.hide(false, () => { console.log("Agent is now hidden"); }); ``` ``` -------------------------------- ### agent.speakStream() - Stream Text into Speech Balloon Source: https://context7.com/pithings/clippy/llms.txt Streams text chunks into the speech balloon from an async iterable, ideal for real-time LLM responses. ```APIDOC ## agent.speakStream() - Stream Text into Speech Balloon ### Description Streams text chunks into the speech balloon from an async iterable, perfect for displaying LLM responses in real-time. Returns a Promise that resolves when streaming is complete. ### Method `agent.speakStream(stream: AsyncIterable, options?: { tts?: boolean })` ### Parameters #### Path Parameters - **stream** (AsyncIterable) - Required - An async iterable yielding text chunks to stream. #### Query Parameters - **tts** (boolean) - Optional - If `true`, enables text-to-speech for the streamed content after it's fully received. ### Request Example ```javascript // Stream from an async generator (e.g., LLM response) async function* generateResponse() { yield "Hello! "; yield "I am "; yield "thinking..."; yield " Here's my answer!"; } await agent.speakStream(generateResponse()); // Stream with text-to-speech after completion await agent.speakStream(llmResponseStream, { tts: true }); // Integration with fetch streaming async function* streamFromAPI() { const response = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ message: "Hello" }) }); const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; yield decoder.decode(value); } } await agent.speakStream(streamFromAPI(), { tts: true }); ``` ``` -------------------------------- ### agent.dispose() - Clean Up Agent Source: https://context7.com/pithings/clippy/llms.txt Removes the agent from the DOM and performs cleanup of all associated resources, including event listeners and audio playback. This method should be called when the agent is no longer needed. ```APIDOC ## agent.dispose() - Clean Up Agent ### Description Removes the agent from the DOM and cleans up all resources including event listeners and audio. Call this when you're done with the agent. ### Method DELETE ### Endpoint /agent ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "disposed". ### Response Example ```json { "status": "disposed" } ``` ``` -------------------------------- ### Control Animation Queue Source: https://context7.com/pithings/clippy/llms.txt Stops all animations and clears the queue with `stop()`, or skips only the current action and proceeds with the next queued item using `stopCurrent()`. ```javascript // Stop everything and return to idle agent.stop(); ``` ```javascript // Skip current animation, continue queue agent.speak("First"); agent.speak("Second"); agent.speak("Third"); agent.stopCurrent(); // Skips "First", continues to "Second" ``` ```javascript // Emergency stop with TTS cancellation agent.speak("This is a very long message...", { tts: true }); agent.stop(); // Stops speech and cancels TTS ``` -------------------------------- ### agent.closeBalloon() - Close Speech Balloon Source: https://context7.com/pithings/clippy/llms.txt Manually closes the agent's speech balloon. This is particularly useful when the `hold: true` option has been used with `agent.speak()`. ```APIDOC ## agent.closeBalloon() - Close Speech Balloon ### Description Manually closes the current speech balloon. Useful when using `hold: true` option. ### Method POST ### Endpoint /agent/balloon/close ### Response #### Success Response (200) - **status** (string) - Indicates the success of the operation, e.g., "balloon_closed". ### Response Example ```json { "status": "balloon_closed" } ``` ``` -------------------------------- ### Clean Up Agent Resources Source: https://context7.com/pithings/clippy/llms.txt Removes the agent from the DOM and releases all associated resources, including event listeners and audio playback. Call this method when the agent is no longer needed. ```javascript // Clean up when done agent.dispose(); ``` ```javascript // Replace with different agent agent.dispose(); const newAgent = await initAgent(agents.Merlin); newAgent.show(); ``` -------------------------------- ### Close Speech Balloon Source: https://context7.com/pithings/clippy/llms.txt Manually closes the agent's current speech balloon. This is particularly useful when the `hold: true` option has been used to keep the balloon open. ```javascript // Display held message agent.speak("Important: Read this carefully!", { hold: true }); ``` ```javascript // Close after user action document.querySelector("#understood-btn").addEventListener("click", () => { agent.closeBalloon(); }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.