agentronicsDOCS
Frameworks

Vite + React

Authenticate in-page agents in a Vite + React single-page app.

Vite + React

A single-page app only sees agents that run it, so this guide covers in-page agents. Put the server middleware in front of your API as well to authenticate everything else.

1. Install

npm install @agentronics/sdk @agentronics/react

2. Mount the provider

// src/main.tsx
import { createRoot } from 'react-dom/client'
import { AgentronicsProvider } from '@agentronics/react'
import App from './App'
 
createRoot(document.getElementById('root')!).render(
  <AgentronicsProvider publishableKey={import.meta.env.VITE_AGENTRONICS_KEY} siteId="my-app">
    <App />
  </AgentronicsProvider>
)

Use a publishable key (agtx_pk_…). A secret key throws at start-up.

3. React to the agent

import { useAgentContext } from '@agentronics/react'
 
export function AgentBanner() {
  const { identity } = useAgentContext()
  if (!identity) return null
  return identity.trust === 'verified' || identity.trust === 'linked'
    ? <p>Signed in as {identity.vendor}</p>
    : <p>An unverified agent is using this page.</p>
}

useAgentContext() re-renders on detect, declare, authenticate and clear.

4. Authenticate a credential

import { useAgentronics } from '@agentronics/react'
 
const client = useAgentronics()
await client.authenticate({ extensionToken: tokenFromYourAgentExtension })

Credentials are verified through the auth.verifyToken hook — see WebMCP & browser agents.

Bundle impact

The full SDK is ~25 KB (brotli). If you only need WebMCP detection, import from @agentronics/sdk/lite (≤ 8 KB).

Previous

Any runtime (Fetch)

Next

Plain HTML / CDN

On this page