Skip to content

Usage

Minimal example (Google Cloud Vision + Playwright)

This is the canonical usage pattern from the official README. It visits Hacker News, tags the page, and prints the text representation plus the XPath mapping.

python
import asyncio
import json

from playwright.async_api import async_playwright
from tarsier import Tarsier, GoogleVisionOCRService


def load_credentials(json_file_path):
    with open(json_file_path) as f:
        return json.load(f)


async def main():
    # Load your Google Cloud service account JSON
    credentials = load_credentials("./google_service_acc_key.json")
    ocr_service = GoogleVisionOCRService(credentials)

    tarsier = Tarsier(ocr_service)

    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto("https://news.ycombinator.com")

        # Tag the page and get the text + XPath mapping
        page_text, tag_to_xpath = await tarsier.page_to_text(page)

        print(tag_to_xpath)  # e.g. {1: '/html/body/...', 2: '...'}
        print(page_text)     # Text representation with [ID] tags


if __name__ == "__main__":
    asyncio.run(main())

Using Azure instead of Google

Swap the OCR service; everything else is identical:

python
from tarsier import Tarsier, MicrosoftAzureOCRService

credentials = load_credentials("./microsoft_azure_credentials.json")
ocr_service = MicrosoftAzureOCRService(credentials)
tarsier = Tarsier(ocr_service)

Tagging all text elements (not just interactables)

By default Tarsier only tags interactable elements. To also tag plain text nodes:

python
page_text, tag_to_xpath = await tarsier.page_to_text(page, tag_text_elements=True)

Element tag legend

Tag formatElement type
[#ID]Text-insertable fields (input, textarea)
[@ID]Hyperlinks (anchor tags)
[$ID]Other interactable elements (button, select)
[ID]Plain text nodes (only when tag_text_elements=True)

LLM action mapping pattern

Your LLM reads page_text and responds with an action like CLICK [@3]. Your agent code resolves this:

python
target_id = 3
xpath = tag_to_xpath[target_id]
await page.locator(f"xpath={xpath}").click()

Cookbook notebooks

Full end-to-end agent examples are in the cookbook:

  • LangChain web agent: cookbook/langchain-web-agent.ipynb
  • LlamaIndex web agent: cookbook/llama-index-web-agent.ipynb