vlt / affordances
  • Quickstart
  • Concepts
  • Guides
  • Reference
  • For agents
  • Why Affordances
  • Quickstart
  • Benchmarks
Concepts
  • Overview
  • Actions
  • State
  • Expose
  • Guards and confirm
  • Deltas
  • Plugins
Guides
  • Overview
  • React and WebMCP
  • MCP
  • Lint
  • Security
Plugins
  • Overview
Reference
  • Overview
  • Protocol
  • Options
  • CLI
  1. Guides
  2. /
  3. Overview

Guides

How to wire Affordances into a Next.js app, a React tree, an MCP client, and your lint setup, and how to keep them secure.

Each guide covers one package or one surface. New to Affordances? Start with Getting started.

  • Next.js: set up an existing app with an agent or by hand, then how files, routing, route handlers, plugins, and sessions work.
  • React and WebMCP: AffordancesProvider turns the current page's actions into WebMCP tools for browser agents. Affordance marks the controls in the DOM.
  • MCP: @affordances/mcp turns any Affordances site into two MCP tools, for Claude, Cursor, and other MCP clients.
  • Lint: two rules that keep the manifest buildable and every server-action control visible to agents.
  • Security: default deny, explicit confirmation, Origin checks for cookies, and a fixed order of checks on every agent call.
PreviousPluginsNextNext.js
Edit this page

Make your app agent-operable

Give every page a graph and every server action an agent path: HTTP, WebMCP, and MCP, with the same session and the same checks. One command sets it up.

Read the quickstart