Playground · AI assistant

AI rich text editor demo — bring-your-own-model assistant

The AI module is bring-your-own-model: one complete hook is the entire integration — point it at OpenAI, Claude, or a local model and yjd handles the UX. Select any text and hit ✦ Ask AI for the action menu (improve · fix · shorten · …): the result streams in and lands as a word-level diff you can accept, reject, or edit word-by-word. Stop typing for a moment and a ghost-text continuation appears — Tab accepts it. This demo ships a tiny offline mock so you can feel the flow without any keys or backend.

Select text → ✦ Ask AI (improve, fix, shorten…), streamed with a word-level diff. Ghost-text autocomplete: pause, then Tab.

💡 The code shown imports from the CDN for copy-paste; here it runs against a pre-loaded core. Edit anything and hit Run.

ai.js

// Stylesheet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
import yjd from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd';

// Bring your own model: `complete` is the whole integration. Swap this mock
// for a fetch() to your endpoint and stream tokens through onToken.
const MOCK = {
  improve:   'Streaming makes prompt inputs feel alive: tokens land as they arrive, and the diff shows exactly what changed.',
  fix:       'Streaming makes prompt inputs feel alive; tokens land as they arrive.',
  shorten:   'Streaming makes prompt inputs feel alive.',
  lengthen:  'Streaming makes prompt inputs feel alive: tokens land as they arrive, the caret keeps moving, and the reader never stares at a spinner wondering whether anything is happening.',
  simplify:  'Streaming shows words as they arrive, so the input feels alive.',
  summarize: 'Streaming output feels faster and more trustworthy.',
  autocomplete: ' — and the diff view lets you keep only the words you like.',
};

async function complete({ action, text, signal }, onToken) {
  const out = MOCK[action] || MOCK.improve;
  const words = out.split(' ');
  for (let i = 0; i < words.length; i++) {
    if (signal && signal.aborted) return;
    await new Promise(r => setTimeout(r, 55));            // fake network latency
    onToken((i ? ' ' : '') + words[i]);                   // stream word by word
  }
  return out; // ghost-text autocomplete reads the return value
}

new yjd('#editor', {
  width: '100%',
  placeholder: 'Type, pause for a ghost suggestion, or select text for ✦ AI…',
  content: '<p>Streaming make prompt input feel alive, token land as they arrives.</p>' +
           '<p>Select the sentence above and try <b>Fix spelling &amp; grammar</b> — then accept the diff word-by-word.</p>',
  ai: {
    complete,               // ← your model goes here (six built-in actions included)
    autocomplete: true,     // ghost text while typing · Tab to accept
  },
});

Live previewBYO model