> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Runnable endpoint

> Add testable API endpoints to your docs with RunnableEndpoint. Support multiple environments, examples, and real-time response previews.

The `<RunnableEndpoint>` component lets users make real HTTP requests to your APIs directly from your documentation. It auto-detects the endpoint definition from your API specification, renders a request builder for headers, path parameters, query parameters, and request bodies, and displays the response status, headers, body, and timing inline. Form inputs persist in local storage across page reloads. When AI agents fetch the [Markdown version](/learn/docs/ai-features/markdown) of a page, Fern renders the endpoint definition — method, path, parameters, and request body schema — as structured content, so agents receive the full specification without the interactive form.

## Usage

### Request

POST [https://fai.buildwithfern.com/chat/\{domain}](https://fai.buildwithfern.com/chat/\{domain})

```curl
curl -X POST https://fai.buildwithfern.com/chat/domain \
     -H "Authorization: Bearer <token>" \
     -H "Content-Type: application/json" \
     -d '{
  "messages": [
    {
      "role": "user",
      "content": "string"
    }
  ]
}'
```

**`Markdown`**

```jsx Markdown
<RunnableEndpoint endpoint="POST /chat/{domain}" />
```

## Variants

### Collapse by default

Use `collapsed` to render the component with the form section hidden. Users can expand it by clicking the component.

### Request

POST [https://fai.buildwithfern.com/chat/\{domain}](https://fai.buildwithfern.com/chat/\{domain})

```curl
curl -X POST https://fai.buildwithfern.com/chat/domain \
     -H "Authorization: Bearer <token>" \
     -H "Content-Type: application/json" \
     -d '{
  "messages": [
    {
      "role": "user",
      "content": "string"
    }
  ]
}'
```

**`Markdown`**

```jsx Markdown
<RunnableEndpoint endpoint="POST /chat/{domain}" collapsed />
```

## Properties

**`endpoint`** `string`

The endpoint locator in the format "METHOD /path". For example: `"POST /api/users"` or `"GET /api/users/{id}"`. If your API uses [namespaces](/learn/api-definitions/overview/project-structure#combined-sdks-from-multiple-apis), prefix with the namespace and `::` (e.g., `"payments::POST /api/users"`).

---

**`example`** `string`

Pre-fill the form with a specific example by name. If not specified, the first example is used by default.

---

**`defaultEnvironment`** `string`

Set the default environment for the endpoint. The value must correspond to the [`x-fern-server-name`](/learn/api-definitions/openapi/extensions/server-names-and-url-templating) of a server URL defined in your API specification. If not specified, the first environment is used by default.

---

**`readonly`** `list of strings`

Fields to lock by hiding their dropdown selectors. Accepts `"environment"` to lock the server URL and prevent users from switching environments. When set to `readonly={["environment"]}`, the environment selector is hidden and the endpoint uses the environment specified by `defaultEnvironment` (or the first environment if not specified).

---

**`collapsed`** `boolean` — default: false

Controls whether the component renders collapsed by default with the form section hidden. Set as `collapsed={true}` or use the shorthand `collapsed`. Users can expand it by clicking the component.

---

**`className`** `string`

CSS class name for custom styling of the component container.

---

> Add testable API endpoints to your docs with RunnableEndpoint. Support multiple environments, examples, and real-time response previews.