---
title: "@affordances/md/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/md/react"
image: "https://affordances.vercel.app/og/docs/reference/api-reference/md/react"
lang: "en"
---

# @affordances/md/react

## Functions

### AgentMain()

```ts
function AgentMain(__namedParameters): ReactElement<{
  "data-mode": string;
  style: {
     display: string;
  };
}, string | JSXElementConstructor<any>>;
```

#### Parameters

| Parameter                     | Type                          |
| ----------------------------- | ----------------------------- |
| `__namedParameters`           | { `children?`: `ReactNode`; } |
| `__namedParameters.children?` | `ReactNode`                   |

#### Returns

`ReactElement`<{ `"data-mode"`: `string`; `style`: { `display`: `string`; }; }, `string` | `JSXElementConstructor`<`any`>>

---

### AgentOnly()

```ts
function AgentOnly(__namedParameters): ReactElement<{
  "data-mode": string;
  hidden: boolean;
}, string | JSXElementConstructor<any>>;
```

#### Parameters

| Parameter                     | Type                          |
| ----------------------------- | ----------------------------- |
| `__namedParameters`           | { `children?`: `ReactNode`; } |
| `__namedParameters.children?` | `ReactNode`                   |

#### Returns

`ReactElement`<{ `"data-mode"`: `string`; `hidden`: `boolean`; }, `string` | `JSXElementConstructor`<`any`>>

---

### AgentSkip()

```ts
function AgentSkip(__namedParameters): ReactElement<{
  "data-mode": string;
  style: {
     display: string;
  };
}, string | JSXElementConstructor<any>>;
```

#### Parameters

| Parameter                     | Type                          |
| ----------------------------- | ----------------------------- |
| `__namedParameters`           | { `children?`: `ReactNode`; } |
| `__namedParameters.children?` | `ReactNode`                   |

#### Returns

`ReactElement`<{ `"data-mode"`: `string`; `style`: { `display`: `string`; }; }, `string` | `JSXElementConstructor`<`any`>>

---

### AgentText()

```ts
function AgentText(__namedParameters): ReactElement<{
  "data-mode": string;
  style: {
     display: string;
  };
}, string | JSXElementConstructor<any>>;
```

#### Parameters

| Parameter                     | Type                                                               |
| ----------------------------- | ------------------------------------------------------------------ |
| `__namedParameters`           | { `block?`: `boolean`; `children?`: `ReactNode`; `md`: `string`; } |
| `__namedParameters.block?`    | `boolean`                                                          |
| `__namedParameters.children?` | `ReactNode`                                                        |
| `__namedParameters.md`        | `string`                                                           |

#### Returns

`ReactElement`<{ `"data-mode"`: `string`; `style`: { `display`: `string`; }; }, `string` | `JSXElementConstructor`<`any`>>