CueFrame

Preview one component as a still in a compose session

Render a SINGLE org-installed component as one still inside the client's warm session box and return a presigned PNG URL. The component's authored tsxSource is read server-side (org-scoped) from the `componentId`; the box materializes and renders it. On a compile failure the response is a 422 `component_does_not_compile` carrying the sanitized compiler message — the authoring agent reads it to self-fix. A 422 `component_source_unavailable` means no authored source exists for the componentId in this org. The CLIENT owns the session lifecycle (open/close); this op neither opens nor closes a box.

POST
/v1/projects/{id}/compose-session/{sessionId}/component-preview

Authorization

AuthorizationBearer <token>

API key auth. Prefix cf_live_ for production orgs, cf_test_ for sandbox.

In: header

Path Parameters

id*string
sessionId*string

Request Body

application/json

TypeScript Definitions

Use the request body type in TypeScript.

Response Body

application/json

application/json

application/json

application/json

application/json

application/json

application/json

application/json

curl -X POST "https://example.com/v1/projects/string/compose-session/string/component-preview" \  -H "Content-Type: application/json" \  -d '{    "componentId": "string"  }'
{  "url": "string"}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}
{  "error": {    "code": "string",    "message": "string",    "details": {      "property1": null,      "property2": null    }  }}