HTTP Fetch

Fetch makes HTTP requests from the browser using the native fetch() API. Use it to call REST endpoints, load external data, or submit forms — anything that speaks HTTP without needing an MCP server in the middle. The response is parsed automatically — JSON becomes an object, everything else becomes a string. The on_success callback fires after a successful request, and the parsed response is available as $result (Python: RESULT). Use SetState("users", RESULT) inside on_success to write the response into client-side state, making it immediately available via {{ users }} interpolation.

Classmethods

Each HTTP method has a dedicated classmethod with a tailored signature. GET accepts query params, while POST/PUT/PATCH accept a body.

GET with query params

from prefab_ui.rx import Rx

query = Rx("query")
Fetch.get("/api/search", params={"q": query, "page": "1"})

POST with JSON body

from prefab_ui.rx import Rx

name, email = Rx("name"), Rx("email")
Fetch.post("/api/users", body={"name": name, "email": email})

DELETE

from prefab_ui.rx import Rx

user_id = Rx("user_id")
Fetch.delete(f"/api/users/{user_id}")

You can also construct a Fetch directly for full control:

Full form

from prefab_ui.actions import Fetch, SetState
from prefab_ui.rx import RESULT, Rx

form_data = Rx("form_data")

Fetch(
    "/api/submit",
    method="POST",
    headers={"X-Custom": "value"},
    body={"data": form_data},
    on_success=SetState("response", RESULT),
)

Error Handling

Non-2xx responses trigger on_error with the status line as $error. This follows the same callback pattern as every other Prefab action.

Error handling

from prefab_ui.actions import Fetch, ShowToast
from prefab_ui.rx import Rx

item = Rx("item")

Fetch.post(
    "/api/save",
    body={"item": item},
    on_success=ShowToast("Saved!", variant="success"),
    on_error=ShowToast("{{ $error }}", variant="error"),
)

A 404 would show a toast reading “404 Not Found”.

Request Bodies

Dict bodies are automatically JSON-serialized with a Content-Type: application/json header. String bodies are sent as-is — useful for form-encoded data or raw text. The auto-set Content-Type won’t override a header you set explicitly.

Combined with Client Actions

Like any action, Fetch composes in a list. A common pattern: show a loading state, make the request, then clear it.

Combined actions

from prefab_ui.components import Button
from prefab_ui.actions import Fetch, SetState
from prefab_ui.rx import RESULT, Rx

query = Rx("query")

Button(
    "Submit",
    on_click=[
        SetState("loading", True),
        Fetch.post(
            "/api/submit",
            body={"q": query},
            on_success=SetState("result", RESULT),
        ),
        SetState("loading", False),
    ],
)

If the request fails, SetState("loading", False) never runs (the chain short-circuits). Use on_error on the Fetch to handle that case.

API Reference

Fetch Parameters

url

str

required

URL to fetch. Supports {{ key }} interpolation. Can be passed as a positional argument.

method

str

default:"GET"

HTTP method: GET, POST, PUT, PATCH, or DELETE.

headers

dict[str, str]

Request headers. Values support {{ key }} interpolation.

body

dict | str

Request body. Dicts are JSON-serialized automatically. Ignored for GET requests.

on_success

Action | list[Action] | None

default:"None"

Action(s) to run when the request succeeds. The parsed response is available as $result.

on_error

Action | list[Action] | None

default:"None"

Action(s) to run when the request fails. The error message is available as $error.

Protocol Reference

Fetch

{
  "action": "fetch",
  "url": "string (required)",
  "method?": "GET | POST | PUT | PATCH | DELETE",
  "headers?": "object",
  "body?": "object | string"
}

For the complete protocol schema, see Fetch.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Classmethods

Error Handling

Request Bodies

Combined with Client Actions

API Reference

Fetch Parameters

Protocol Reference

​Classmethods

​Error Handling

​Request Bodies

​Combined with Client Actions

​API Reference

Fetch Parameters

​Protocol Reference

Classmethods

Error Handling

Request Bodies

Combined with Client Actions

API Reference

Protocol Reference