Obsidian Web Clipper + AI: Capture & Summarise Web Content (📽️YouTube, Reddit, 📚Books & More)
Summary
This video demonstrates how to use the Obsidian Web Clipper and AI tools to efficiently capture, summarize, and organize web content directly into an Obsidian vault. It covers installation, configuration, template creation for various platforms like YouTube, Blinkist, Reddit, Goodreads, and ChatGPT, and showcases the use of AI interpreters for content processing. The guide also details different variable types (preset, prompt, meta, selector, schema.org) and filters for customizing data extraction, along with setting up AI providers like Google Gemini, OpenAI, and local LLMs.
Key Insights
Capture inspiring content by asking 'Why does this information inspire me?'
To determine what information to capture, users should ask themselves why it inspires them, if it's personal, surprising, or useful. Content that meets these criteria should be captured and organized within their Obsidian vault. This question serves as a filter for relevant and valuable information.
The Obsidian Web Clipper, combined with AI, revolutionizes research and note-taking workflows.
The Obsidian Web Clipper, especially when paired with AI tools, offers a powerful and seamless way to capture, process, and organize online information. This integration transforms traditional research and note-taking by automating summarization and data extraction, leading to a more efficient knowledge management system.
Sections
Introduction to Obsidian Web Clipper
Obsidian Web Clipper captures web pages, allowing customization of templates and saving into your vault.
The Obsidian Web Clipper is a browser extension that enables users to highlight and capture web pages directly within their web browser. It offers customization through user-defined templates, allowing control over how captured content is saved in the Obsidian vault. It includes an inbuilt highlighting function and is free, open-source, and compatible with multiple browsers.
The clipper system integrates browser extension, AI interpreter, and Obsidian templates for efficient note-making.
The system involves plugging the Obsidian Web Clipper browser extension into AI tools to create an AI interpreter. This interpreter is then used with custom web clipper templates that link to existing Obsidian vault templates. This setup facilitates capturing and organizing information, which is the first part of the note-making cycle, followed by distilling literature notes into personal notes.
Capture inspiring content by asking 'Why does this information inspire me?'
To determine what information to capture, users should ask themselves why it inspires them, if it's personal, surprising, or useful. Content that meets these criteria should be captured and organized within their Obsidian vault. This question serves as a filter for relevant and valuable information.
Web Clipper Use Cases and Setup
Web Clipper can summarize YouTube videos, news articles, PDFs, podcasts, blog posts, and Wikipedia articles.
The Obsidian Web Clipper, used with tools like Recall.ai, can summarize various content types. Examples include YouTube videos, news articles, PDFs, podcasts, blog posts, and Wikipedia articles. The free plan typically limits the number of summaries, prompting users to manage or remove processed summaries.
Configure the 'Interpreter' tab to enable AI summarization using providers like Google Gemini or Obsidian AI tools.
Within the web clipper settings, the 'Interpreter' tab allows users to enable AI interpretation. Users can load multiple interpreters, such as Google Gemini (linking to AI Studio) or Obsidian AI tools (a subscription service for premium models). Preloaded or custom models can be selected for processing.
Templates map content structure, AI prompts, and interpreter context for specific websites.
Predefined templates in the web clipper define the structure for captured notes. Each template specifies the note name, location within the vault, and trigger conditions (e.g., website URL). The note content section includes AI prompts for tasks like summarizing key takeaways, adding timestamps, or extracting specific information, along with interpreter context.
YouTube video capture involves using Recall for initial summarization, then clipping for detailed analysis via templates.
When capturing YouTube videos, users first use Recall.ai for a concise summary to quickly scan content. If desired content is found (e.g., at a specific timestamp), the web clipper is used. The detected YouTube template is applied, a model is selected (e.g., Google Gemini), and the content is added to Obsidian. The resulting note includes YAML properties, AI summaries, key takeaways, tools, reflections, and key messages.
Blinkist book summaries can be generated by an AI prompt analyzing each 'blink' for key takeaways.
For Blinkist content, a template can be set up to trigger on Blinkist URLs. The AI prompt analyzes each 'blink' (summary segment) to generate a condensed AI summary and list key takeaways. The captured note includes YAML properties, the AI summary, key takeaways, and the original blink content for further highlighting and note-building.
Reddit posts can be captured with AI-generated comment summaries and author links using selector variables.
When capturing Reddit posts, a template can use selector variables to extract specific HTML elements like the post title and comments. An AI prompt can then summarize comments, listing authors with profile links and their comments formatted as quotes. The captured note includes YAML properties, post details, original post content, and summarized comments with user attribution.
Goodreads book pages can be captured with AI-generated descriptions and key messages.
For Goodreads, templates can extract book details like title, author, and publication info into YAML properties. AI prompts can be used to generate summaries of the book description and identify the key message. The captured note includes YAML properties, AI-generated summaries, and spaces for personal notes on best ideas and tools.
ChatGPT conversations can be captured by sending prompts directly to Obsidian.
Capturing ChatGPT interactions involves setting up a template triggered by ChatGPT URLs. The captured note includes YAML properties and can display the prompt and the AI's response, often using specific formatting like chat bubbles and icons to distinguish between user input and AI output.
The web clipper's highlighter function enables capturing specific text snippets from any webpage.
Even without a specific template, the web clipper's highlighter function can be enabled (via hotkey Ctrl+Shift+H). Users can select desired text segments on a webpage, and upon clipping, these highlights are organized under a 'My Highlights' heading in the captured note. The default template can also be configured to list best points and include the full article content.
The default template structure includes highlights, best points, and full article content.
The web clipper's default template is designed to capture highlights, list the best points from a page, and include the entire article's content. This template can be customized, for instance, by adding prompt variables to analyze the content or using specific syntax to format highlights.
Obsidian Web Clipper Variables and Filters
Variables dynamically insert data from webpages into templates.
Web clipper templates utilize variables to automatically populate data from the source webpage into the note's name, location, properties, and content. These variables can be modified using filters for further customization.
Preset variables are automatically generated from page content for common data points.
Preset variables are automatically extracted from webpage content and are designed to work across most websites. Examples include author, content, date time, description, and title. Users can access and search for these variables through the clipper's three-dot menu.
Prompt variables leverage LLMs for flexible but potentially slower and costly data extraction.
Prompt variables are highly flexible and easy to write as they use large language models. However, they are slower to execute and may incur costs or raise privacy concerns depending on the AI provider. They are useful for complex data extraction tasks that require AI interpretation.
Meta variables extract data from HTML meta elements, including Open Graph data.
Meta variables allow extraction of data from meta elements within a webpage's HTML, such as meta name, description, title, and type. These are accessible through the clipper's three-dot menu and can be previewed before use.
Selector variables use CSS selectors to extract specific text content from webpage elements.
Selector variables enable users to target and extract text content from specific HTML elements using CSS selectors. This feature is particularly useful for users familiar with HTML and CSS. To use them, one might need to inspect the webpage's source code. Complex selector syntax can be decoded using AI tools.
Schema.org variables extract structured data from JSON-LD markup on webpages.
Schema.org variables allow extraction of data embedded in Schema.org JSON-LD format on webpages. This data can include information like book format, ISBN, author, rating, and publication details. Schema data can also be used to automatically trigger specific templates.
Filters modify variables, enabling customization like formatting or conversion.
Filters are applied to variables using the pipe syntax (|) and can be chained for complex modifications. Common filters include 'call out' for formatting content into Obsidian callouts, and 'wiki link' for converting text into Obsidian internal links. Filters can be applied to any variable type.
Installation and Configuration
Install the web clipper extension into your browser (e.g., Firefox, Chrome).
The Obsidian Web Clipper can be installed as a browser extension. The process involves navigating to the browser's extension store, searching for the web clipper, and clicking 'Add to [Browser Name]' followed by confirmation. The extension will then appear in the browser's toolbar.
Configure basic settings like vault location, save behavior, and legacy mode.
In the web clipper's general settings, users can specify the Obsidian vault to save notes to, choose the save behavior (e.g., open note after clipping), and enable legacy mode if using an older version of Obsidian.
Customize default properties, such as adding specific tags like #my/webclippings.
The properties tab allows customization of default YAML properties for captured notes. Users can import properties from Obsidian or start with defaults. A common customization is adding a specific tag (e.g., #my/webclippings) to categorize clipped content.
The highlighter tab settings control default highlight behavior and clip settings.
The highlighter tab in the settings determines how highlights are displayed and processed. By default, it shows highlights and uses the 'highlight the page content' behavior. Options for exporting highlights are also available.
Setting Up AI Interpreters
Enable AI interpreter and add providers like Google Gemini with an API key.
To use AI features, the AI interpreter must be enabled in the web clipper settings. Users can add providers by entering their API key, such as for Google Gemini, which can be obtained from Google AI Studio. This allows the clipper to access various AI models.
Add specific AI models (e.g., Gemini 2.0 Flash, 2.5 Flash preview) to the interpreter.
After adding a provider, users can select and add specific AI models. For Google Gemini, popular choices include Gemini 2.0 Flash and 2.5 Flash preview. Custom models can also be added by referencing model IDs from provider documentation.
Configure local large language models (LLMs) like Llama for private web clipping.
For users prioritizing privacy, local LLMs can be configured. This involves installing Llama, running models like Gemma 3 (27B parameter), and then adding Llama as a provider in the web clipper with its base URL. This enables private, offline AI processing.
Integrate subscription services like Obsidian AI Tools for access to premium models.
Subscription services like Obsidian AI Tools can be added as custom providers. Users input their API key, base URL, and then select from a range of premium models offered by the service, including Claude and OpenAI models (GPT-4.1, GPT-3.5 Turbo).
Creating Web Clipper Templates
Set up a default template for general web page capture if no specific template matches.
A default template can be configured to handle captures when no specific template matches the webpage. This template typically uses the page title as the note name, saves to a designated folder (e.g., 'vault web clippings'), and includes basic YAML properties and note content that can incorporate highlights and AI prompts.
Build specific templates by defining note name, location, trigger, properties, and AI prompts.
Creating a specific template involves defining its name, the variable for the note name (e.g., schema video object name), the target folder in Obsidian, the URL pattern to trigger the template, predefined YAML properties, and the note content, which often includes AI prompts for summarization or data extraction.
Utilize schema variables (e.g., video object name, author) for structured data input.
Schema variables, like those for YouTube videos (e.g., `schema.org/VideoObject/name`, `schema.org/VideoObject/author`), provide structured data directly from the page's metadata. These can be used for note names, channel names, or other dynamic properties. Filters like `trim` can clean up whitespace.
Define YAML properties dynamically using variables, prompts, or static values.
YAML properties in templates can be static (e.g., `status: In Progress`, `source: YouTube`), dynamic using preset variables (e.g., `date`), prompt variables (e.g., for topics), or meta/schema variables (e.g., `creator` as a wiki link).
Structure note content with AI prompts for summaries, key takeaways, and reflections.
The note content area is crucial for defining what information is captured and processed. It can include AI prompts for summarizing the video, listing key takeaways, suggesting tools, prompting reflection, or identifying the key message. Hidden callouts can include raw data like the video description.
Integrate tools like Media Extended for interactive video playback and timestamp notes within Obsidian.
Templates can include structures that integrate with Obsidian plugins like Media Extended. This allows for interactive video players within notes, enabling users to easily add timestamp notes by playing, scrubbing, and bookmarking specific moments in the video directly from Obsidian.
Interpreter context provides background information for AI prompts within the template.
Interpreter context at the end of a template provides additional information to the AI model, guiding how it interprets the prompts. This can include structured data about the video, channel, or description, helping the AI generate more relevant and accurate outputs.
Test templates with chosen AI models and verify the output in Obsidian.
After creating a template, it's essential to test it with a specific AI model (e.g., Gemini 2.0 Flash) and the intended web content. The resulting note in Obsidian should then be reviewed to ensure all properties and content are captured correctly and AI-generated sections meet expectations.
Resources and Conclusion
Join the Obsidian Discord's Web Clipper channel for support and resources.
The Obsidian Discord server, specifically the #web-clipper channel, is a valuable resource for users. Pinned messages often contain links to developer resources, community templates, and showcases.
Explore developer and community template repositories on GitHub.
Repositories like Kapano's clipper templates on GitHub offer pre-built templates for various platforms (e.g., ChatGPT). Similarly, Obsidian community template collections provide examples that can be imported or adapted.
The Obsidian Web Clipper, combined with AI, revolutionizes research and note-taking workflows.
The Obsidian Web Clipper, especially when paired with AI tools, offers a powerful and seamless way to capture, process, and organize online information. This integration transforms traditional research and note-taking by automating summarization and data extraction, leading to a more efficient knowledge management system.
Ask a Question
*Uses 1 Wisdom coin from your coin balance
