Quick start

This tutorial gets a visible clue on screen in three steps.

1. Build the SDK

From the repository root:

npm install
npm run build --workspace=viewcue-mcp

The standalone bundle is written to packages/viewcue-mcp/dist/viewcue.iife.js.

2. Load the bundle

Copy the bundle into your web app’s public assets and add it before the application script:

<script
  defer
  src="/viewcue.iife.js"
  data-viewcue-theme="civic"
  data-viewcue-motion="calm"
></script>

The bundle exposes window.ViewCue and registers the optional ViewCue WebMCP helper tools when document.modelContext is available.

3. Mark a target and show a clue

<button
  data-viewcue-target="checkout.total"
  data-viewcue-label="Order total"
  data-viewcue-description="The final amount before checkout"
>
  Checkout
</button>

Then call the runtime from application code:

await window.ViewCue?.showClue({
  targetId: "checkout.total",
  title: "Order total",
  message: "This is the amount the agent is referring to before checkout.",
  ensureVisible: true,
})

The clue highlights the target and positions a small explanation beside it. It does not click the button or change the application state.

Try the demo

Open the Coretax-inspired demo and select What is this? next to KAP-KJS. The same clue pattern is used for payment steps and terminology.

Verify locally

npm run test --workspace=viewcue-mcp
npm run build --workspace=viewcue-mcp
npm run build --workspace=coretax-viewcue-demo
npm run test --workspace=coretax-viewcue-demo