Trilium Docs Chat Bubble Widget Using LLM Tool Calls
Deploy the widget by adding a JavaScript note containing widget.js, setting ROOT_NOTE_ID, hiding it, and linking it via an inheritable shareJs relation to the shared root note; ensure Trilium ≥0.91.
Add the widget.js JavaScript note, set the ROOT_NOTE_ID, hide it, and add an inheritable shareJs relation to the shared root note to enable the chat bubble.
Summary
The author created a single‑file JavaScript widget that adds a floating “Ask the docs” chat bubble to every shared Trilium note page.
The widget exposes two LLM tools—search_notes(query) and read_note(noteId)—so the model can navigate the note tree on demand without embedding the entire content. It works with any OpenAI‑compatible API (Gemini, OpenRouter, DeepSeek, Groq, local Ollama, vLLM, etc.) and stores each visitor’s API key client‑side, eliminating shared costs.
A settings panel offers a live test‑connection probe and an editable system prompt, while the widget is mounted inside a Shadow DOM to isolate CSS. The widget is ~740 lines, written in ES2020, and requires no bundler or build step.
To install, Trilium must be ≥0.91 to support ~shareJs and ~shareCss relations. The setup involves finding the shared root note ID, creating a JavaScript note with widget.js, setting ROOT_NOTE_ID, hiding the note with #shareHiddenFromTree, and adding an inheritable shareJs relation to the root note.
Internally, the widget runs a tool‑use loop that calls the LLM until no tool calls remain, injecting a table of contents and leveraging Shadow DOM for style isolation.
Key changes
- Requires Trilium ≥0.91 for ~shareJs and ~shareCss relations.
- widget.js is ~740 lines, ES2020, no bundler.
- Provides two LLM tools: search_notes(query) and read_note(noteId).
- Supports any OpenAI‑compatible API; API key stored client‑side.
- Settings panel includes live test‑connection and editable system prompt.
- Uses Shadow DOM to isolate CSS from the host page.
- Installation steps: find root note ID, create JS note, set ROOT_NOTE_ID, hide note, add inheritable shareJs relation.
- Tool‑use loop iteratively calls the LLM until no tool calls remain, injecting a table of contents.