A web reimplementation of Microsoft Agent. Bring back Clippy and other classic Office assistants with authentic animations and speech support. Perfect for retro UIs and nostalgic web projects.
Inspired by clippy.js, this is a fully rewritten project focuses on a more faithful and modern recreation of Microsoft Agent with improved animation handling, richer features, extensibility, and a design that works seamlessly on any web page.
Live Demo | Documentation | Contributing | Support on Ko-Fi
- Interactive: Agents are draggable and clickable (single, double, and right-click) with events.
- Speech Support: Support interactive speech balloon text input, selection list, checkbox, and buttons in authentic speech balloon.
- TTS Support: TTS support with browser's native Web Speech API.
- Zero Dependencies: No jQuery or any other external libraries required to run.
- Modern API: Simple, promise-based API for animations, state transitions, and speech.
- Zero CSS leakage: Shadow DOM isolates the Agent, making it safe to drop into any project.
- High Performance: Uses HTML5 Canvas and optimized asset formats (WebP/WebM).
- Legacy Support: Works with decompiled MS Agent's ACF files directly. Add your own Agents!
Current iteration of MSAgentJS focuses on recreating early Microsoft Agent 2.0 featured in Office 2000. Support for 2.1 version such as Genie and Merlin is in the works.
| Clippit | The Dot | F1 | The Genius | Office Logo | Mother Nature | Monkey King | Links | Rocky |
|---|---|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
npm install ms-agent-jsYou can also download the pre-built library and assets directly from GitHub Releases.
import { Agent } from 'ms-agent-js';
async function init() {
const agent = await Agent.load('Clippit');
await agent.show();
await agent.speak('Hello! I am your web assistant.');
}
init();- Getting Started: Installation and basic usage.
- API Reference: Full list of methods, options, and events.
- Request System: Understanding the asynchronous action queue.
- Asset Management: How to add and optimize new agents.
- Demo Implementation: A guide to how the demo is built.
- Internal Architecture: Deep dive into the engine's core logic.
- AI Onboarding: Specific recipes and tips for AI agents.
- Contributing: Guidelines for developers and repo setup.
- Support for MS Agent 2.1 features:
- Advanced animation looping logic.
- Mouth movement (viseme).
- Tray icon.
- Support for streaming text (for LLM streaming output)
- The original Microsoft Agent for Microsoft Office 2000 by Microsoft Corporation.
- Reimplementations and decompilers, including Double Agent, MSAgent Decompiler by Remy Lebeau, and more recently TripleAgent by calavera.
- The first JavaScript implementation who started it all, clippy.js by smore, and some great forks like ClippyJS_EasyAccess by Daniel Britt and Clippy by Pooya Parsa.
- The demo page is styled using 98.css by Jordan Scales.
- TMAFE, the Microsoft Agent community that provides many Agent files and information.
