> For the complete documentation index, see [llms.txt](https://docs.frayme.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frayme.ai/readme.md).

# Frayme

UI for Agents — your agent calls one API, and Frayme streams back live, interactive UI: validated before it renders, built on open standards.

{% hint style="info" %}
**API access opens August 24, 2026.** The SDKs are on npm today (`npm i @frayme/api @frayme/runtime`) and everything in these docs is ready to wire up — API keys become available at launch.
{% endhint %}

## The idea

Agents are good at deciding *what* to show and terrible at hand-writing frontend code. Frayme splits the problem:

1. **You send a prompt** (plus optional data and declared actions) to `POST /v1/compose`.
2. **Frayme composes a UI spec** — a stream of [json-render](https://json-render.dev) operations, not HTML or React code. Frayme runs its own model, purpose-built for composing interfaces; every spec is validated against the 189-component catalog before it is finalized, and weak generations are automatically retried on a stronger model inside the same response.
3. **You render the spec** with `@frayme/runtime` — live React with a strict component whitelist. No eval, no raw HTML.

Roughly 90% of interactions (typing, tabs, filters, toggles) resolve locally in the renderer at zero cost and zero latency. Only the actions the spec explicitly declares — a form submit, a "regenerate" — round-trip to your agent.

## Twenty lines to a live UI

```ts
// server — @frayme/api
import Frayme from '@frayme/api';

const frayme = new Frayme({ apiKey: process.env.FRAYME_API_KEY });

const stream = frayme.compose.stream({ prompt: 'A pricing page with three tiers' });
stream.on('op', (op, snapshot) => render(snapshot)); // live spec snapshots
stream.on('restarted', () => clearRendered());       // attempt failed → discard
const { spec } = await stream.finalSpec();           // validated final spec
```

```tsx
// client — @frayme/runtime
import { FraymeRenderer } from '@frayme/runtime/react';
import '@frayme/runtime/styles.css';

<FraymeRenderer spec={spec} onDynamicAction={(e) => sendToAgent(e)} />;
```

The [quickstart](/getting-started/quickstart.md) turns this into a running Next.js app in under five minutes.

## Explore the docs

| Section                                                                                   | What you'll find                                                               |
| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| [Quickstart](/getting-started/quickstart.md)                                              | Empty Next.js app → streaming, interactive UI in under five minutes            |
| [Authentication](/getting-started/authentication.md)                                      | API keys, the browser guard, and keyless proxy mode                            |
| [Your first generation](/getting-started/first-generation.md)                             | One compose call end to end — request, events, final spec                      |
| [Concepts](https://github.com/frayme-ai/frayme-sdk/tree/main/docs/concepts/README.md)     | Specs, the component catalog, actions, and the interactivity model             |
| [SDK](https://github.com/frayme-ai/frayme-sdk/tree/main/docs/sdk/README.md)               | `@frayme/api`, `@frayme/runtime`, and `@frayme/catalog` in depth               |
| [API reference](/api-reference/api.md)                                                    | Every endpoint, parameter, event, and error code                               |
| [Frameworks](https://github.com/frayme-ai/frayme-sdk/tree/main/docs/frameworks/README.md) | Vercel AI SDK, Mastra, LangChain.js, OpenAI Agents, AG-UI                      |
| [Guides](https://github.com/frayme-ai/frayme-sdk/tree/main/docs/guides/README.md)         | Recipes: agent tools, custom components, theming, editing specs                |
| [Examples](/examples/examples.md)                                                         | Runnable apps — live demos at [frayme.ai/examples](https://frayme.ai/examples) |
| [Resources](https://github.com/frayme-ai/frayme-sdk/tree/main/docs/resources/README.md)   | Pricing, changelog, support                                                    |

## The packages

All MIT-licensed, ESM, Node ≥ 20.19.

| Package                                                            | Version | What it does                                                                                                                             |
| ------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| [`@frayme/api`](https://www.npmjs.com/package/@frayme/api)         | 0.3.2   | Zero-dependency API client: streaming, typed errors, retries that can't double-bill, one agent-tool definition for every major framework |
| [`@frayme/runtime`](https://www.npmjs.com/package/@frayme/runtime) | 0.3.2   | Renders specs as live React 19 — full 189-component registry, `--frayme-*` CSS theming, AI SDK and AG-UI adapters                        |
| [`@frayme/catalog`](https://www.npmjs.com/package/@frayme/catalog) | 0.3.0   | The component vocabulary: schemas, `fraymeCatalog.validate()`, and bring-your-own-component manifests                                    |

## Built on open standards

Frayme adopts three open standards rather than inventing formats:

* [**json-render**](https://json-render.dev) (Vercel) — the UI spec format. A Frayme spec is a standard json-render spec; no proprietary DSL.
* [**AG-UI**](https://github.com/ag-ui-protocol) (Linux Foundation) — agent-to-UI event transport, via `@frayme/runtime/ag-ui`.
* **MCP** — serve Frayme UIs inside Claude and ChatGPT as MCP Apps.

Your specs are portable JSON. If you leave Frayme, they still render.

## Links

[frayme.ai](https://frayme.ai) · [GitHub](https://github.com/frayme-ai/frayme-sdk) ([Discussions](https://github.com/frayme-ai/frayme-sdk/discussions) open) · [X @frayme\_ai](https://x.com/frayme_ai) · [LinkedIn](https://www.linkedin.com/company/frayme-ai) · [r/frayme](https://www.reddit.com/r/frayme)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frayme.ai/readme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.