Linking tools together

A tool can send data to another one or open it as soon as you allow it. That turns single tools into a small system: a task moves to the shopping list, ingredients from a recipe land on the list, a timer logs study time into a diary. The bundled to-do list shows how: its 🛒 button sends a task to the shopping list. If you plan it from the start, it works best.

New: the examples on this page now use the shared message format of the gallery (typ, v, id, text). That way your tools understand the gallery tools and vice versa.

The three building blocks

Example: a task to the shopping list

// In the task tool: send a task to the shopping list
function sendToShoppingList(item) {
  if (!window.ARTEFAKT) return;                    // outside the toolbox there is no linking
  ARTEFAKT.senden('Shopping list', {
    typ: 'einkauf', v: 1,                          // kind and version of the message (field names are the same in every language)
    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6),   // against duplicates
    text: item,                                    // readable for every tool
    artikel: [item]                                // always a list, even for one item
  });
}

// In the shopping list: pick up on start what other tools have sent
function pickUpInbox() {
  if (!window.ARTEFAKT) return;
  for (const e of ARTEFAKT.eingang()) {            // e = { von: 'To-do', zeit: 1760000000000, daten: { typ: 'einkauf', artikel: ['Milk'], … } }
    const d = e.daten;
    if (!d || d.typ !== 'einkauf' || !Array.isArray(d.artikel)) continue;   // only what we understand
    for (const a of d.artikel) {
      if (typeof a === 'string' && a.length <= 120) items.push({ text: a, from: e.von });
    }
  }
  save();                                           // as usual into localStorage
  render();
}
pickUpInbox();

Setting it up in the app

1. Open Links

   Tool menu ⋮ › Set up › Links. The list shows all other tools. Tools that pick up data themselves are marked “accepts data”.

2. Allow

   With the switch “may reach …” you allow a tool to reach one specific other tool. Without a switch the toolbox asks at the first attempt. Your answer applies to exactly this pair, is remembered and can be withdrawn at any time.

3. Have it built in

   If a tool has no button for it yet, tap the robot symbol next to the target. The toolbox hands an assistant a ready-made change request including the code (see below) via “Change with AI”. You load the result as a new version of the same tool.

4. Pick up at the target

   For the target to show the data, it has to pick it up with ARTEFAKT.eingang(). That too can be built in through “Change with AI” on the target tool.

Link this tool with “Shopping list”: add a clearly visible button that sends the matching data to “Shopping list” with ARTEFAKT.senden("Shopping list", data).

Plan it from the start

It gets cleanest if you describe both tools as a pair right away. This prompt shows what belongs in it:

Create TWO separate HTML files for me (one tool each, each a single file) that work together in the Artefakt Toolbox.

Tool 1 “Recipes”: I add recipes with ingredients. Each recipe has a clearly visible button “Ingredients to shopping list”.
Tool 2 “Shopping list”: a checklist that also takes over what “Recipes” sends.

Linking: The Artefakt Toolbox provides window.ARTEFAKT. Tool 1 calls ARTEFAKT.senden('Shopping list', message) with message = { typ: 'einkauf', v: 1, id: unique id, text: 'Lasagne: 500 g minced meat, 2 tins of tomatoes', aktion: 'brauche', anlass: recipe name, artikel: [ingredients as text] }. The field names stay exactly like this. All ingredients of one recipe go into ONE message.
Tool 2 picks everything up on start and when returning (visibilitychange) with ARTEFAKT.eingang() (a list of { von, zeit, daten }). It accepts only messages with typ 'einkauf' and v at most 1, checks that artikel is a list of texts (at most 120 characters each), remembers the last 200 ids against duplicates, shows where entries came from (“from Recipes”), offers “Undo” and stores everything in localStorage. Receiving never triggers sending. Check first whether window.ARTEFAKT exists and otherwise show a friendly note instead of an error. Never insert the data with innerHTML, only with textContent.

Technical: one single HTML file each, no external files, localStorage, works offline, mobile first, dark design, tap targets at least 48 px, English. Output both files in separate code blocks.

• Define the data format and keep it small. Best use the shared envelope of the gallery: { typ, v, id, text, … }. typ says what it is, v is the version, id prevents duplicates, text is readable for every tool (see “Shared messages”).
• The receiver accepts only what it understands and ignores everything else. That way nobody can break it with a foreign format.
• Prevent duplicates, for example through a fixed id per entry or by comparing the text.
• Never insert received data with innerHTML, only with textContent. Treat it like any foreign input.
• The target is found by its name. Keep names calm and stable and make the target name adjustable in the tool (for example KONFIG.ziele). If you rename the target, adapt the name in the sender.
• Show where an entry came from (“from Recipes”) and offer to remove an entry again.
• Test the chain with sample data first: first the sender, then open the target, then check that everything arrived.

What is possible

• Pass tasks, ideas or notes to another tool, for example turning a note into a task.
• Put ingredients from a recipe tool onto the shopping list.
• A timer, counter or measurement sends its results to a diary or statistics tool.
• A tool opens another one as the next step, for example from a plan to a checklist.
• Several sources feed one target that collects and sorts everything.

Where the limits are

Working together with the gallery tools

The tools of the gallery speak six shared message kinds, for example “einkauf” (shopping), “erledigt” (done) or “betrag” (amount). If your tools send or understand the same kinds, they work together with them without any arrangement. How that works, and what a proposed connection layer in the app would change, is on these pages:

See also: Shared messages · Outlook: connection layer