html icon indicating copy to clipboard operation
html copied to clipboard

Proposal: AI Task Meta Tag

Open flaboy opened this issue 10 months ago • 1 comments

What problem are you trying to solve?

Currently, there is no standard way for webpages to declare tasks that AI assistants can perform on their content. This leads to an inconsistent and fragmented experience for users relying on AI to interact with web content. Webpages need a way to explicitly mark up AI-executable tasks and provide a clear interface for input and output.

What solutions exist today?

Websites can independently integrate AI capabilities to enhance their functionality to a certain extent. However, this is a website-level solution and lacks a client-side approach.

If the client-side (browser) can recognize the webpage's AI interaction requirements through meta tags, it offers the following two advantages:

  1. The accumulation of AI capabilities can reside on the user side rather than the website side, meaning that AI assistants with a better understanding of the user can better utilize the web's capabilities.
  2. It enables the execution of complex tasks across multiple websites.

How would you solve it?

Introduce a new tag with the name ai-task that contains all the necessary information for an AI to understand and complete a task on the webpage.

<meta name="ai-task" 
      content="task_description"
      input="input_params"
      output="output_callback">

The content attribute contains a plain-language description of the task, serving as a prompt for the AI. The input attribute optionally specifies a comma-separated list of page elements, data points, or other parameters the AI needs to consume. The output attribute names a JavaScript function to call with the AI-generated result, allowing the page to dynamically integrate the output.

Here's an example usage:

<meta name="ai-task"
      content="Summarize the main points of the article" 
      input="article-body"
      output="handleSummary">

<article id="article-body">
  <!-- Article content -->
</article>

<script>
function handleSummary(summary) {
  document.getElementById('summary').innerText = summary;
}
</script>

The AI assistant would:

  1. Detect the ai-task meta tag
  2. Read the task description from content
  3. Extract the input article text from the article-body element
  4. Process the article to generate a summary
  5. Invoke handleSummary() with the generated text, to be integrated into the page

Multiple ai-task meta tags could be included to specify different tasks on the same page. The browser or AI assistant could provide a UI to let the user choose which task to execute.

Anything else?

Some additional points to consider:

  • Specifying the input as element IDs could be limiting. We may want a more expressive format like CSS selectors, XPath, or JSON pointers.
  • For complex multi-step tasks, we might need a way to chain multiple ai-task tags together.
  • We should define a mechanism for the AI to report progress, errors, or request additional user input during task execution.
  • To avoid abuse, the output callback should have strict limits on what it can do (e.g., no arbitrary DOM modification, network access, etc.)
  • The ai-task tag should be ignored by browsers and other tools not explicitly invoking an AI assistant, to avoid compat issues.
  • We may want to explore integrating this with the Permissions API, so webpages can request user consent before the AI accesses certain page data.

flaboy avatar Apr 15 '24 03:04 flaboy

I'm not entirely certain on wether HTML could benefit from AI tasks, but structured Data Markup already exists for aiding web crawlers.

M-Valentino avatar Apr 18 '24 17:04 M-Valentino