WrengleWrengle
Create a plugin with an LLM

Create a plugin with an LLM

Beta

You can ask an LLM to write a local Wrengle plugin for you. This is best for small tools that open in their own tab, such as calculators, converters, checklists, formatters, inspectors, or dashboards for text you select in a note.

For non-technical users, start with a view-only plugin. It needs only two files:

text
my-plugin/
  plugin.toml
  ui/
    index.html

View-only plugins do not need Rust, WASM, plugin.wasm, or a build step. They are local developer-preview plugins, so load only plugin folders you trust. Direct network calls from view JavaScript are not controlled by the httpHosts capability; avoid network requests unless you asked for them explicitly.

If your LLM can read URLs, give it the raw LLM plugin instructions along with your idea. If not, copy the prompt below.

Copy-paste prompt

Replace the bracketed parts, then paste the whole prompt into your LLM:

text
Create a local Wrengle view-only plugin for me.
 
Plugin idea:
[Describe what the plugin should do. Include what users type or paste, what
the plugin should show, and whether it should use selected text from a note.]
 
Wrengle plugin constraints:
- This is a local developer-preview plugin, not a marketplace or remote-install
  plugin.
- Prefer a view-only plugin.
- Produce a complete plugin folder with at minimum these required files:
  - plugin.toml
  - ui/index.html
- Do not include a [runtime] block.
- Do not include plugin.wasm.
- Do not require Rust, WASM, Node, npm, a bundler, or a build step.
- Do not claim the plugin can open terminal tabs, run shell commands, use
  process plugins, read arbitrary local files, install itself remotely, or use a
  marketplace.
- Do not use network requests by default. If I explicitly ask for network
  requests, list the exact destination hosts, explain what data is sent, and
  make each send action user-triggered.
- Do not claim `httpHosts` grants control direct `fetch` or `XMLHttpRequest`
  calls from view JavaScript. `httpHosts` applies only to Wrengle host-bridge
  HTTP made by WASM action plugins.
 
The plugin.toml file must include:
- top-level id, name, version, schema_version = 1, and description
- a top-level id that starts with plugin.
- one [[views]] block with id, label, and entry
- entry = "ui/index.html", relative to the plugin folder, pointing to an
  existing file
- a view id that starts with the plugin id plus a dot, such as
  plugin.my-tool.view
- lowercase ASCII ids using letters, digits, dots, and hyphens, with no ".."
- accepts_selection = true and a clear selection_label if the plugin should
  receive selected note text
 
The ui/index.html file must be one self-contained HTML file:
- inline all CSS and JavaScript
- do not reference external scripts or stylesheets
- do not reference companion JavaScript or CSS files
- keep the file under 5 MB
- use Wrengle CSS variables for all page surfaces, foreground text, borders,
  muted surfaces/text, and primary controls
- prefer variables such as var(--background), var(--foreground), var(--card),
  var(--card-foreground), var(--muted), var(--muted-foreground),
  var(--border), var(--input), var(--primary), and
  var(--primary-foreground)
- do not define an independent hard-coded light or dark color palette
- state that it does not make network requests unless I explicitly asked for them
- include this Wrengle postMessage bridge inside an HTML script element:
 
function applyWrengleTheme(message) {
  if (message.theme) {
    document.documentElement.dataset.theme = message.theme;
  }
 
  if (!message.themeTokens || typeof message.themeTokens !== "object") return;
 
  for (const [name, value] of Object.entries(message.themeTokens)) {
    if (/^--[A-Za-z0-9_-]+$/.test(name) && typeof value === "string" && value.length > 0) {
      document.documentElement.style.setProperty(name, value);
    }
  }
}
 
window.addEventListener("message", (event) => {
  if (event.source !== window.parent) return;
  const msg = event.data;
  if (!msg || typeof msg !== "object") return;
  if (msg.type === "wrengle:init" || msg.type === "wrengle:theme") {
    applyWrengleTheme(msg);
  } else if (msg.type === "wrengle:selection" && typeof msg.text === "string") {
    // Use msg.text as the selected note text.
  }
});
parent.postMessage({ type: "wrengle:ready" }, "*");
 
Return:
1. The folder tree.
2. The full contents of plugin.toml.
3. The full contents of ui/index.html.
4. Short steps to create the files, load the plugin in Settings -> Plugins,
   open it from the command palette, and test selected note text if supported.

Load the generated plugin

After the LLM gives you the files:

  1. Create the plugin folder exactly as shown by the LLM.
  2. Open Wrengle.
  3. Open Settings → Plugins → Developer → Dev plugin paths.
  4. Add the absolute path to the plugin folder.
  5. Click Reload.
  6. Confirm the view appears under Loaded plugins.
  7. Open the command palette with Cmd+K on macOS or Ctrl+K on other platforms.
  8. Run Open <label>, where label is the view label in plugin.toml; the row also shows the plugin name for disambiguation.

If the plugin supports selected text:

  1. Open a note.
  2. Select some text.
  3. Open the floating toolbar's Actions menu.
  4. Choose the plugin's selection_label.
  5. Confirm the selected text appears in the plugin view.

If it does not load

Open Settings → Plugins → Developer → Plugin diagnostics and paste the diagnostic message back into the LLM with this instruction:

text
Fix this Wrengle plugin using the diagnostic below. Keep it view-only unless the
diagnostic proves a different local plugin type is needed. Return the corrected
plugin.toml and ui/index.html files in full.
 
Diagnostic:
[Paste the diagnostic here.]

Common fixes:

ProblemWhat to ask the LLM to check
View is missing from the command paletteConfirm plugin.toml has a valid [[views]] block and that you clicked Reload.
Blank tabConfirm entry = "ui/index.html" and that the file exists inside the plugin folder.
Selection action is missingConfirm accepts_selection = true and selection_label are present in the view block.
Theme looks wrongConfirm the HTML uses Wrengle CSS variables and applies themeTokens from wrengle:init and wrengle:theme.

For implementation details, see Views (custom plugin UI) and the JSON Compare tutorial. For WASM action templates, host grants, and the Rust SDK, see SDK and plugin creator.

docs / plugins/create-with-an-llmAll documentation