Skip to content

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.

3 min read

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