Examples › LLM integrations › Tool editor

LLM tool editor

Two widgets, one pattern: quikchat for chat UI, QuikdownEditor as the document canvas. This page runs a simulated agent — no API key — that calls the same seven tools a real LLM would use via function calling.

Live demo

Chat (quikchat widget)

Document canvas (QuikdownEditor)

Try a command:

How it works

1. User types in chat → 2. Agent picks tools → 3. Browser runs tools on editor → 4. Agent replies in chat

In production you replace simulateAgentCommand() with an LLM fetch loop (stream: false so tool-call JSON parses cleanly). The editor API and tool definitions stay the same.

Tool reference

ToolParametersEditor API
read_editor—editor.getMarkdown()
write_editorcontenteditor.setMarkdown(content)
replace_textfind, replaceget → replace first match → set
extract_textstart_line, end_lineline slice (read-only)
get_stats—character / word / line counts
undo—editor.undo()
redo—editor.redo()

Wire-up code (minimal)

<!-- quikchat (chat) + quikdown (editor) -->
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
<script src="https://unpkg.com/quikchat/dist/quikchat-md.umd.min.js"></script>

<div id="chat"></div>
<div id="editor"></div>

<script type="module">
  import QuikdownEditor from '../../dist/quikdown_edit.esm.js';

  const editor = new QuikdownEditor('#editor', { mode: 'split', showUndoRedo: true });
  const chat = new quikchat('#chat', async (chat, msg) => {
    chat.messageAddNew(msg, 'You', 'right', 'user');
    // ... LLM tool loop or simulateAgentCommand(editor, msg)
  });

  function read_editor() { return editor.getMarkdown(); }
  function write_editor(content) { editor.setMarkdown(content); }
</script>

Full BYOK example with OpenAI-compatible providers: quikchat tool editor demo →