Starlight IntelligenceStarlightAcademy

Lesson 04 / 06 · API

Design an API-backed interface.

Understand how typed model output becomes dependable product UI.

Your artifact: A component contract and a mocked integration

The model proposes; the application owns the interface.

Treat model output as data with a contract. Validate its shape, map it to an allowlisted component, and preserve source identifiers. Never execute arbitrary model-produced HTML in your authenticated application. Render loading, partial results and retry states deliberately rather than letting streaming text dictate the entire interaction.

Vercel AI SDK documents generative interfaces built from tool results and UI components. OpenAI's current plugin documentation describes UI resources for MCP tools inside ChatGPT, with feature-detected MCP Apps support. Neither is a claim that ChatGPT's automatic Intelligent UI can be exported as your product API. Choose the route from where the customer works.

Evaluate frontier capabilities in an isolated lab with a stable fallback. The AI Elements site currently announces a move to shadcn/ui and deprecation at the end of November 2026. Workflow and Sandbox have their own lifecycle, access and cost rules. Do not upgrade the whole production stack to follow a course example. Check current official docs and pin the versions used by the actual build.

Worked example · illustrative

See the decision.

A research tool returns title, source URL, checked date and a bounded summary. A validated result maps to a research card. Missing source data produces an explicit incomplete state. A fixture can test this rendering without a live model or API key.

Run the prompt.

Use the supported host shown above and supply your own non-confidential context. Preview availability and tool access depend on your account.

Design a typed research-card integration using the repository's current stack. Begin with local fixtures: valid, missing source, invalid shape, partial result and provider failure. Define an allowlisted result schema, validate on the server, and map it to accessible application-owned components. Show sources, checked dates and uncertainty beside claims. Use current official OpenAI and Vercel documentation; distinguish stable capability, beta access and a proposed experiment. Preserve the existing orchestration owner. Keep secrets server-side, set a request budget and cancellation path, and require explicit opt-in before a billable live call. Do not execute model-produced markup.
Open the prompt library and studio

Make a first attempt.

Write the result schema and five fixture states. Build the component without an API call. Add a live adapter only after the fixture behavior and budget boundary are accepted.

Inspect your artifact

  • Untrusted output is validated before rendering.
  • A denied or failed request has an understandable recovery state.
  • Version, source date, access and cost assumptions are explicit.
  • No API key or private context enters a client bundle.

Transfer / A fresh case

Carry the idea further.

Replace the research card with a planning or creative component while keeping the same trust boundary.

Keep a note of your prediction, what happened and one revision. These are self-study checks, not a graded assessment.

Read the primary sources.

Checked 2026-10-20. Recheck availability, access and API versions before a real implementation.

  • Vercel: Generative user interfaces

    Map typed tool results into application-owned components.

  • OpenAI: Structured outputs

    Application integration; API billing and credentials are separate from a ChatGPT plan.

  • OpenAI: Add UI to your MCP server

    A distinct route for an application UI inside ChatGPT; not an export of Intelligent UI.

  • Vercel: AI Elements

    Component reference. Current notice: moving to shadcn/ui, with deprecation announced for end of November 2026; recheck before adoption.

  • Vercel: Workflow

    Durable execution option to evaluate; this course does not provision a workflow or replace Starlight's existing orchestration owner.

  • Vercel: Sandbox

    Isolated code execution option; verify lifecycle, network boundaries, entitlement and cost before a lab.

  • Vercel: AI Gateway

    Provider access and observability; model availability and spend remain account-specific.