---
title: "@affordances/react · Affordances"
description: "Affordances gives every page of a Next.js app a JSON view for agents, and turns one action definition into a server action, an HTTP endpoint, a WebMCP tool, and an MCP tool."
url: "https://affordances.vercel.app/docs/reference/api-reference/react"
image: "https://affordances.vercel.app/og/docs/reference/api-reference/react"
lang: "en"
---

# @affordances/react

Affordances for React. `<AffordancesProvider>` loads the current page's graph and registers each available action as a WebMCP tool for browser agents; the tools call the page's Affordances endpoint, so they pass the same checks as any agent. `<Affordance>` marks the controls a person would use for an action, for agents that read the DOM. `<AffordancesDevtools>` from `@affordances/react/dev` outlines them in development.

```bash
vlt install @affordances/react
```

```tsx
'use client'

import { usePathname, useRouter } from 'next/navigation'
import { AffordancesProvider } from '@affordances/react'

export const Agents = ({ children }: { children: React.ReactNode }) => {
  const pathname = usePathname()
  const router = useRouter()
  return (
    <AffordancesProvider path={pathname} onDelta={() => router.refresh()}>
      {children}
    </AffordancesProvider>
  )
}
```

Docs: [https://github.com/vltpkg/affordances/blob/main/apps/docs/content/react.mdx](https://affordances.vercel.app/docs/reference/api-reference/react/https:/github.com/vltpkg/affordances/blob/main/apps/docs/content/react)