---
title: "Guides · Affordances"
description: "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."
url: "https://affordances.vercel.app/docs/guides"
image: "https://affordances.vercel.app/og/docs/guides"
lang: "en"
---

# 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](https://affordances.vercel.app/docs/guides/nextjs/getting-started).

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