# Tenor product reference

Tenor is a creative workspace for refining live React UI interfaces with AI. Compare variants on a canvas, then continue through coding agents or React code export.

Source: https://tenor.design/docs/reference/tenor

Updated: 2026-09-29

## What is Tenor?

Tenor at tenor.design is a creative workspace for designers building with AI, including design engineers who work directly in code. It brings conversations, references, and live React UI interfaces together on a canvas.

Use Tenor to explore an interface, refine a working component, compare visual directions, and continue with the resulting frontend code in your application.

## Is this the Tenor GIF service?

No. Tenor at tenor.design is the interface-design product described here. It is separate from the GIF service at tenor.com.

## Inputs and outputs

- Start with a prompt describing the interface and its behavior, an image or screenshot reference, or self-contained React component code.
- Create a separate rendered variant to compare visual directions while keeping the original component available. Inspect each variant’s appearance and interactions before choosing one.
- Continue manually with Copy for AI or a downloaded .tsx file, or use a supported authenticated coding-agent connection.
- Review dependencies and assets when integrating the result into an application. A saved preview is not a deployed application.

## How does Tenor work with coding agents?

Tenor exposes an authenticated Model Context Protocol (MCP) endpoint at https://tenor.design/api/mcp. Supported connections let agents inspect shared components, import supported React code, and manage owned canvases with separately approved permissions.

Component updates use saved versions and conflict checks. An agent must read the latest version before updating it; a connection does not automatically synchronize an entire repository.

Use the setup offered in Tenor for Codex, Claude, or Cursor. Available connection flows depend on the client and account. The coding-agent guide below describes authentication, permissions, and capability discovery.

## Current boundaries

- Tenor works on frontend UI interfaces. Connect application authentication, real data, routing, and deployment in the destination codebase.
- Self-contained React imports and supported prepared library environments are bounded workflows. Arbitrary package installation and package-backed source builds are not currently available.
- Visual fidelity, accessibility, and behavior need review. Generated output is not a guarantee of production readiness or unchanged behavior after every edit.
- Voice conversations and the floating hover prompt are restricted previews, not generally available account features.
- MCP requires authentication and appropriate consent. Public documentation does not grant access to private canvases, shared components, or account data.

## Access and commercial terms

A Tenor account and the access available to that account are required to use the workspace. Check Pricing and your account’s Billing screen for current plans, usage allowances, and availability.

## Next steps

- [Introduction](https://tenor.design/docs) — A shared creative workspace for shaping real UI interfaces with AI.
- [Tenor MCP: connect coding agents](https://tenor.design/docs/handoff/coding-agents) — Connect Codex, Claude, or Cursor to Tenor’s authenticated MCP endpoint. Inspect shared React components and continue with permitted canvas and version tools.
- [Start with existing code](https://tenor.design/docs/create/from-existing-code) — Bring a working React component into the creative process.
- [Troubleshooting and limits](https://tenor.design/docs/reference/limits) — Find the next useful step when something does not work as expected.
- [Accounts and billing](https://tenor.design/docs/access-and-billing) — Sign in, choose a plan, and manage your subscription.