Overview

@perhapxin/dddk is a drop-in AI layer for any web product. Install the package, mount one instance, and your users get:

  • Command palette — Ctrl+K opens. Prefix routing, fuzzy search, your custom commands.
  • Web agent — natural-language tasks that operate the page (click / type / navigate / confirm on destructive actions).
  • Voice input — hold Space to dictate, optional LLM cleanup pass.
  • Selection AI — long-press for a Magic Pointer popover, or select text for an inline translate / summarize / explain toolbar.

You never write UI for any of this. dddk ships its own palette, subtitle bar, mobile chrome, agent cursor, magic pointer popover, all styled and themeable via CSS variables. You just register what your product can do (palette items, skills) and bring an LLM.

30-second install

npm install @perhapxin/dddk @perhapxin/webagent

import { DotDotDuck, OpenAIProvider } from '@perhapxin/dddk';
import '@perhapxin/dddk/styles.css';

const dddk = new DotDotDuck({
  siteName: 'YourSaaS',
  llm: new OpenAIProvider({ apiKey: process.env.OPENAI_KEY! }),
});
dddk.mount();

That's it. Ctrl+K works, voice works, magic pointer works.

Where to next

You want to... Read
Use it in React / Svelte / Next.js / Vue 01-quickstart-frameworks
Add a /skill that runs a guided tour or LLM template 02-how-to-add-a-skill
Add a palette command that calls your own code 03-how-to-palette-commands
Toggle voice / subtitle / magic pointer on/off 04-how-to-toggle-features
Change colors / fonts / dark mode 11-theming
Wire your own LLM keys safely (server-side proxy) webagent / 09-security

What you DON'T do

  • Don't write palette UI yourself — dddk renders it.
  • Don't proxy events manually — register a palette item, dddk fires its handler.
  • Don't roll your own DOM action layer — webagent has 19 built-in actions plus your custom ones.
  • Don't ship API keys to the client bundle. Use ProxyProvider + a worker that holds the key. See the security guide in webagent.