# TrendsAGI browser-agent guide

> TrendsAGI is built to be driven by a browser agent as well as by a person. Browser Harness,
> browser-use, Playwright and other CDP agents can read the accessibility tree and use the stable
> `data-agent` attributes below.

Canonical guide: https://trendsagi.com/browser-agents
Machine-readable manifest: https://trendsagi.com/agent-manifest.json
Site: https://trendsagi.com
App: https://app.trendsagi.com

## Agent mode

Append `?agent=1` to a TrendsAGI URL to disable decorative motion and keep the page deterministic.
Agent mode sets `html[data-agent-mode="true"]`, `body[data-agent-site]`, `body[data-agent-route]`
and `body[data-agent-ready="true"]`. Wait for the ready attribute instead of sleeping.

The choice is remembered per origin and tab. Email/password and Google sign-in carry it
across to app.trendsagi.com; if you open the app directly, append `?agent=1` yourself.

Agent mode changes presentation only. It does not bypass authentication, permissions, paywalls or
rate limits.

## Readiness contract

- `html[data-agent-mode="true"]`: agent mode is active.
- `body[data-agent-site]`: `trendsagi-public` on trendsagi.com, `trendsagi-app` on app.trendsagi.com.
- `body[data-agent-route]`: the current path, updated after every client-side navigation.
- `body[data-agent-ready="true"]`: the shell is hydrated and interactive. A lazy route may still show its own loading status.
- `[data-agent-shell]`: the active app shell on app.trendsagi.com.

## Stable public selectors

| Group | data-agent | Element | Purpose |
| --- | --- | --- | --- |
| Every public page | `site-header` | nav | Primary site navigation. |
| Every public page | `home-link` | a | Returns to the home page. |
| Every public page | `header-login` | a | Opens the sign-in form. |
| Every public page | `header-signup` | a | Opens account registration. |
| Every public page | `header-dashboard` | a | Opens the app when the browser already has a session. |
| Every public page | `mobile-menu-toggle` | button | Opens the navigation drawer below 1200px. |
| Every public page | `mobile-menu` | div | The open navigation drawer. |
| Every public page | `site-footer` | footer | Footer navigation, including Browser agents. |
| Every public page | `footer-browser-agents` | a | Opens this guide. |
| Every public page | `nav-research` | a | Primary navigation: Research. |
| Every public page | `nav-use-cases` | a | Primary navigation: Use Cases. |
| Every public page | `nav-tools` | a | Primary navigation: Tools. |
| Every public page | `nav-subscription` | a | Primary navigation: Pricing. |
| Every public page | `nav-api-docs` | a | Primary navigation: API Docs. |
| Every public page | `nav-security` | a | Primary navigation: Security. |
| Every public page | `cookie-banner` | aside | Analytics consent banner, when consent is unset. |
| Every public page | `cookie-deny` | button | Keeps optional analytics off. |
| Every public page | `cookie-accept` | button | Turns optional analytics on. |
| Home and pricing | `hero-start-free` | a | Primary signup call to action in the hero. |
| Home and pricing | `hero-strategy-call` | a | Books a strategy call, in a new tab. |
| Home and pricing | `hero-api-docs` | a | Opens the API documentation. |
| Home and pricing | `plans` | section | The pricing section on the home or subscription page. |
| Home and pricing | `billing-monthly` | button | Shows monthly prices. |
| Home and pricing | `billing-yearly` | button | Shows yearly prices. |
| Home and pricing | `plan-developer-cta` | button | Starts the free Developer plan. |
| Home and pricing | `plan-advantage-cta` | button | Starts the Advantage plan. |
| Home and pricing | `plan-scale-cta` | button | Starts the Scale plan. |
| Home and pricing | `agent-api-cta` | a | Opens the agent API documentation. |
| Home and pricing | `agent-harness-cta` | a | Opens this browser-agent guide from the home page. |
| Sign in and registration | `login-form` | form | Email and password sign-in. |
| Sign in and registration | `login-email` | input | Account email address. |
| Sign in and registration | `login-password` | input | Account password. |
| Sign in and registration | `login-remember` | input | Remember-me checkbox. |
| Sign in and registration | `login-submit` | button | Submits the sign-in form. |
| Sign in and registration | `login-error` | div | Form-level sign-in error, role=alert. |
| Sign in and registration | `login-google` | div | Google Identity button container, when configured. |
| Sign in and registration | `login-microsoft` | button | Starts Microsoft single sign-on. |
| Sign in and registration | `login-forgot` | a | Opens password recovery. |
| Sign in and registration | `login-register` | a | Switches to registration. |
| Sign in and registration | `register-form` | form | Account registration. |
| Sign in and registration | `register-first-name` | input | First name. |
| Sign in and registration | `register-last-name` | input | Last name. |
| Sign in and registration | `register-email` | input | Account email address. |
| Sign in and registration | `register-password` | input | New password, at least 8 characters. |
| Sign in and registration | `register-confirm-password` | input | Password confirmation. |
| Sign in and registration | `register-terms` | input | Terms and privacy agreement checkbox. |
| Sign in and registration | `register-submit` | button | Creates the account. |
| Sign in and registration | `register-error` | div | Form-level registration error, role=alert. |
| Sign in and registration | `register-login` | a | Switches to sign-in. |
| Contact | `contact-form` | form | Contact form. |
| Contact | `contact-name` | input | Sender's name. |
| Contact | `contact-email` | input | Sender's email address. |
| Contact | `contact-message` | textarea | Message body. |
| Contact | `contact-submit` | button | Sends the message. |
| This guide | `browser-agent-guide` | div | This page. |
| This guide | `agent-mode-link` | a | Opens the current page with agent mode on. |
| This guide | `manifest-link` | a | Opens the machine-readable manifest. |

## Stable app selectors

| Group | data-agent | Element | Purpose |
| --- | --- | --- | --- |
| App shell | `app-root` | div | Top-level app container, with the active shell as data-agent-shell. |
| App shell | `app-nav` | nav | Signed-in navigation. |
| App shell | `app-home` | a | Returns to the dashboard when signed in. |
| App shell | `app-search` | button | Opens the command palette. |
| App shell | `app-notifications` | button | Opens recent notifications. |
| App shell | `app-notifications-panel` | section | The open notifications panel. |
| App shell | `app-account` | button | Opens the account menu. |
| App shell | `app-logout` | button | Signs out. |
| App shell | `app-mobile-menu-toggle` | button | Opens the navigation drawer below 1280px. |
| App shell | `app-mobile-menu` | aside | The open navigation drawer. |
| App shell | `app-login` | a | Opens the public sign-in page. |
| App shell | `app-signup` | a | Opens public registration. |
| App navigation | `app-nav-dashboard` | a | Dashboard. |
| App navigation | `app-nav-trends` | a | Live trends. |
| App navigation | `app-nav-watchlists` | a | Watchlists. |
| App navigation | `app-nav-insights` | a | AI insights. |
| App navigation | `app-nav-integrations` | a | Connected ad platforms. |
| App navigation | `app-nav-more` | button | Opens the workspace menu. |
| App navigation | `app-more-menu` | div | The open workspace menu. |
| Command palette | `app-command-palette` | section | Keyboard-driven navigation dialog. |
| Command palette | `app-command-input` | input | Command search field. |
| Command palette | `app-command-close` | button | Closes the palette. |
| Workspace pages | `app-dashboard` | div | Signal desk overview. |
| Workspace pages | `app-trends` | div | Trend discovery page. |
| Workspace pages | `app-trends-search` | input | Filters trends by phrase. |
| Workspace pages | `app-trends-category` | select | Filters trends by category. |
| Workspace pages | `app-trends-timeframe` | select | Filters trends by time window. |
| Workspace pages | `app-watchlists` | div | Watchlist coverage page. |
| Workspace pages | `app-watchlist-add` | button | Opens the add-watchlist form. |
| Workspace pages | `app-watchlist-modal` | div | The add-watchlist dialog. |
| Workspace pages | `app-watchlist-form` | form | The add-watchlist form. |
| Workspace pages | `app-watchlist-keyword` | input | Keyword or phrase to track. |
| Workspace pages | `app-watchlist-threshold` | input | Volume threshold for the alert. |
| Workspace pages | `app-watchlist-submit` | button | Adds the watchlist stream. |
| Workspace pages | `app-watchlist-close` | button | Closes the dialog without adding. |
| Workspace pages | `app-export` | div | Data export page. |
| Workspace pages | `app-export-run` | button | Starts the selected export. |
| Analytics consent | `app-cookie-banner` | section | Analytics consent panel, when consent is unset. |
| Analytics consent | `app-cookie-deny` | button | Keeps optional analytics off. |
| Analytics consent | `app-cookie-accept` | button | Turns optional analytics on. |

## Task recipes

### Read public trend intelligence

Entry: https://trendsagi.com/trending

- Open the trending page, or /blog for editorial reports.
- Read the page h1 and the article links; no account or consent choice is required to read them.
- Follow a report to /blog/trends/<slug> for its measured velocity and evidence.

Success: A report page with a dated headline and its measurement notes is visible.

### Compare plans and prices

Entry: https://trendsagi.com/subscription

- Open /subscription. Prices follow the visitor's detected currency.
- Use data-agent="billing-monthly" or data-agent="billing-yearly" to switch the cycle.
- Read each plan card, or call the public get_trendsagi_plans WebMCP tool when the browser supports it.

Success: Plan names, prices and included capacity are visible without signing in.

### Create an account

Entry: https://trendsagi.com/register

- Wait for data-agent-ready="true" on the body.
- Fill register-first-name, register-last-name, register-email, register-password and register-confirm-password.
- Tick register-terms, then press register-submit.
- Registration ends on /confirm-email; the account is usable after the email is confirmed.

Success: The confirm-email page names the address that was registered.

### Sign in to the app

Entry: https://trendsagi.com/login

- Use email and password with login-email, login-password and login-submit. This is the deterministic path.
- Wait for the redirect to app.trendsagi.com and for body[data-agent-ready="true"].
- Read body[data-agent-route] to confirm the landing route, usually /dashboard or /onboarding.

Success: The signed-in app shell is visible and app-nav is present.

### Find a rising trend

Entry: https://app.trendsagi.com/trends

- Open /trends and wait for the app to be ready.
- Type a phrase into app-trends-search, or choose a category with app-trends-category.
- Read the result rows and follow a row's link for the trend's insight page.

Success: The trend table shows filtered rows with measured volume and velocity.

### Add a watchlist stream

Entry: https://app.trendsagi.com/watchlists

- Open /watchlists and press app-watchlist-add.
- Enter a phrase in app-watchlist-keyword, or switch the dialog to Category and choose one.
- Set the alert threshold with app-watchlist-threshold, then press app-watchlist-submit.
- Wait for the dialog to close and the new stream to appear in the coverage list.

Success: The new stream appears in the watchlist coverage list with its alert condition.

### Read or download an export

Entry: https://app.trendsagi.com/export

- Open /export and choose a report type.
- Press app-export-run, or open a saved configuration and run it.
- Wait for the export run to reach a completed state before downloading it.

Success: A completed export run exposes a download link or the configured destination.

### Use the browser's own tool interface

Entry: https://trendsagi.com/webmcp

- In Chrome 149+ or another WebMCP browser, sign in at app.trendsagi.com.
- The page registers read-only TrendsAGI tools with document.modelContext.
- Call the tool directly instead of driving the DOM; see /webmcp for the list.

Success: The browser lists TrendsAGI tools and returns structured trend data.


## Constraints

- Agent mode (?agent=1) disables decorative motion. It does not bypass authentication, permissions, paywalls or rate limits.
- Public pages are readable without an account. Dashboard, watchlist, insight and export routes require a signed-in session.
- Email and password is the deterministic sign-in path. Google and Microsoft sign-in hand control to the identity provider, which may add its own challenge.
- One account per operator. Do not create accounts, start trials or run exports in bulk.
- Read the Terms of Service and the API limits that apply to the account you use.
- The stable selectors are for navigation and reading. They are not a licence to automate actions a person could not take in the same session.

## Harness brief

```text
Open https://trendsagi.com/?agent=1 and wait for body[data-agent-ready="true"].
Use the data-agent attributes listed at https://trendsagi.com/browser-agents instead of guessing
selectors. For a signed-in task, sign in at https://trendsagi.com/login with email and password,
then open https://app.trendsagi.com/?agent=1 and wait for body[data-agent-site="trendsagi-app"]
and body[data-agent-ready="true"]. Read https://trendsagi.com/agent-manifest.json for the selector
map and task recipes.
```