# Obsidian - Web Clipper ![[images/Obsidian-Web-Clipper.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=DtlFcflkZIo) · 49:15 · Josh Plunkett · 2024-12-14 *Built from the video's English captions.* ## Outline ### 00:00 Intro: one-click wiki pages - **Obsidian Web Clipper** is a browser extension from the Obsidian developers: go to a web page, press a button, and the page is saved into your vault as a note. - Why a DM wants it: Josh's group plays in the Forgotten Realms, and the **Forgotten Realms Wiki** is a great resource for places, items and factions, but it's full of ads and lives outside his vault. - Demo: one click brings **Mirabar** into his notes. Headings, coinage and holiday sections, image captions and the appendix all come across. Only the bolding was missed. ![[images/Obsidian-Web-Clipper-t0100.webp]] - He clips **Luskan** too, images included, and calls it "game-changing": you could build a whole Forgotten Realms vault linked to a map. - The catch: links in the clipped note stay external links back to the wiki. Turning them into internal links would only make sense once those notes exist in your vault, and regex could do it later. - He also clips a Teenage Mutant Ninja Turtles wiki page. The table colors are off, but the pictures and content all arrive. - His first try had copied the ads too, which is why he'd moved on to the AI version before coming back to the default. ### 05:20 Installation and walk-through - Install the extension, pin it in the browser, and press it to open the clipping panel. - A dropdown picks the template. The default template captures generic page properties (author, description, title and so on). Josh would rather have TTRPG properties such as the next town or the goods a town sells. - The **...** menu lists every variable the page exposes. Templates reference them with double curly brackets, for example `{{title}}` or `{{url}}`. ![[images/Obsidian-Web-Clipper-t0530.webp]] ### 08:00 Help file and settings - The settings include an official help file covering highlighting web pages, the Interpreter, templates, regex support, URL matching, automatic template triggers and variables. He strongly recommends reading it. - Template options: - **Behavior:** create a new note, add to the top or bottom of an existing note, or add to the daily note. He uses create note. - **Note name:** `{{title}}`. - **Note location:** the folder (by default a Clippings folder). - **Vault:** last used, or a named vault. - **Template triggers:** rules that pick a template automatically for a given website, so you can have one just for the Forgotten Realms Wiki. - **Properties:** add your own, such as a note type of "building", which could then drive automatic icons through the Supercharged Links plugin. - **Content:** the default just brings in `{{content}}`, and that's the whole page. - After seeing this, he decides the default output is honestly enough for him, except it lacks the wiki's right-hand infobox. ### 11:58 Enable Interpreter (AI-enabled) - Warning up front: the next part uses AI. Josh spent about 14 hours learning how to make it do what he wanted. - Turn on **Interpreter** in the settings. You can make it run automatically when you open the clipper, or click it manually, since every run costs money. ![[images/Obsidian-Web-Clipper-t1300.webp]] - **Providers:** add one from the list, which fills in the base URL, then paste an API key. Interpreter requests go straight to your provider, and Obsidian collects nothing, but the page content is sent to the AI, so think about the site's license and what you're sending. - He's set up **OpenAI** (his best results) and **Google Gemini**. Local LLMs are another option if you have a strong PC. - **Keep your API key secret:** anything run with it is charged to your account. His usage so far was about 42 cents one day and 61 cents the next, roughly a dollar total. Load a balance and **set a spending limit**. - **Models:** he uses GPT-4o. The short alias name didn't work, so he pasted the full dated model name that the alias points to, then added it with the provider and a label. ### 18:04 Create an Interpreter template - His template is now a "Forgotten Realms Wiki" template that triggers on that site and saves to his clippings folder. - Plain variables like `{{title}}` read straight from the page. Anything wrapped in quotation marks inside the curly brackets is a prompt sent to the AI. - The content builds an **infobox** in the format the **ITS theme** uses for wiki-style right-hand panels (he has other videos on it): the title, the image from the page's image URL, a stats heading and the table header are all plain text, no AI. ![[images/Obsidian-Web-Clipper-t2030.webp]] - The tricky part was finding the wiki's sidebar data. It isn't in the variables list, so he viewed the page source, searched for text from the sidebar, and found an `aside` element. Helpers on the official Obsidian Discord pointed him to the selector `aside.portable-infobox`. - He adds that selector to **Interpreter context**, then writes an AI prompt: add the infobox contents formatted as table rows (one line per element) and don't add the table headings, because he's already written them. Without that last instruction the AI re-added headings and broke the table. ### 24:26 Test the template - He clips a new page (a church in Mirabar) and gets a matching sidebar. The AI renamed "races" to "membership", which he thinks is actually an improvement. Where the page had no image, it used the wiki's default image. - A person page works perfectly: home, sex, race, alignment, class, level and edition are all in the infobox. ![[images/Obsidian-Web-Clipper-t2445.webp]] - He plans to release the template (on Patreon). ### 26:28 Original end of the video: internal links - He tests live (and says he should stop testing on live videos) a prompt that converts links to Obsidian-style links. After a few attempts, links become local, and the existing Mirabar note in his vault links up. - You'd still need to create every linked note, so he suggests starting with the area your party is in and working page by page. - He also has the AI drop the appendix and references sections for cleaner notes, since the website still has the sources. - He'd like images saved locally instead of hotlinked, but isn't sure the AI can do that. - **Tips:** give the AI clear, logical, ordered instructions. Each AI prompt seems to send another request, so keep prompts small. Large pages can struggle, and models have max output token limits. - His usage had climbed to about $1.50. Clipping the whole wiki would cost real money, and every clip sends data up. ### 35:49 When AI goes bad - One clip comes back broken out differently. Refining the prompt (markdown links, no appendix, references or sources, keep everything else such as the description) makes things worse, and one specific note keeps failing completely. "This is why AI is not going to take over the world." - Conclusion: for the page body, *not* using the AI gives a better result. The AI is only worth it for the infobox, which he couldn't get otherwise. - Relying too much on AI worries him, because when clipping fast he won't notice what it missed. He'd rather keep the default content and fix links later with a regex find-and-replace (covered in other videos). ### 42:34 Community and support - On the official Obsidian Discord (linked from his site), the **obsidian-clipper help** channel answered his question within minutes, and the **Clipper showcase** channel is full of shared templates to learn from. - He asks people to share TTRPG templates there with a TTRPG tag, and in his community server. - Read the official help docs, set spending limits, and keep currency conversion in mind: one US dollar means very different things in different countries. - His view: AI is here to stay, so he wants to learn how to use it as a tool. ### 47:47 Outro - Template ideas he'd like to see: clipping from random table generators or NPC generator sites into notes. - Thanks to his supporters. Up next: an update on his CLI import process. ## Things mentioned ### Obsidian tools, plugins and themes - **Obsidian Web Clipper**: official browser extension, free. [Get it](https://obsidian.md/clipper) - **Interpreter**: Web Clipper's AI feature. Free to turn on, but you pay your AI provider. - **ITS Theme**: Obsidian theme with wiki-style infobox support, used for the sidebar. - **Supercharged Links**: plugin he mentions for automatic note icons from properties. - **Templates, variables, properties and template triggers**: Web Clipper features. - Regex find-and-replace (covered in his other videos). ### AI providers and models - **OpenAI** API with **GPT-4o** (paid, pay-as-you-go with spending limits). - **Google Gemini** (also set up). - Local LLMs (free, but need a powerful PC). ### Websites and TTRPG content - **Forgotten Realms Wiki** (Mirabar, Luskan and Mirabar NPC pages), for Dungeons & Dragons 5e in the Forgotten Realms. - A Teenage Mutant Ninja Turtles wiki. - Random table and NPC generator websites, as future template ideas. ### Community and Josh's resources - [Josh's Web Clipper template on Patreon](https://www.patreon.com/posts/obsidian-web-117945666) - [Obsidian TTRPG Tutorials](https://obsidianttrpgtutorials.com/), his free tutorial and community site. - [TTRPG Foundation Vault on Patreon](https://www.patreon.com/JPlunkett) (paid). - Official Obsidian Discord: obsidian-clipper help and Clipper showcase channels. ## Bios - **Josh Plunkett**: Australian Dungeon Master and YouTuber behind Obsidian TTRPG Tutorials. He teaches how to run tabletop games in Obsidian, runs a Patreon with vault templates, and plays D&D 5e in the Forgotten Realms with his group. - **Obsidian team**: the developers of the Obsidian note-taking app, who released the Web Clipper extension in late 2024. - **Obsidian Discord helpers**: unnamed members of the official Obsidian Discord who showed Josh the `aside.portable-infobox` selector.