# Introduction

A shared creative workspace for shaping real UI interfaces with AI.

Source: https://tenor.design/docs

## Start with a thought

A prompt, a reference, or code

## Shape it together

Create, inspect, and refine

## Keep building

Save, share, and continue

## What is Tenor

Tenor brings your ideas, references, conversations, and working UI interfaces into one place. Start with a thought, explore it on the canvas, and refine the result until it feels right.

The work stays with your project. Return to a direction, develop another variation, or bring a component into your codebase through Codex, Claude, or an export.

## Three ways to begin

- Describe an idea. Give Tenor the purpose, content, and behavior of the interface you want to make.
- Bring a reference. Attach a screenshot, import a Figma selection, or use an existing component as visual direction.
- Start with code. Paste a self-contained React component or connect a coding agent to bring work into Tenor.

## Keep building in the same place

Projects and Chats help you organize and revisit your work. The canvas gives you room to compare live UI interfaces, images, and vectors. The conversation gives each change its context.

Create a first pass, point to the part you want to refine, and describe the next change. Keep an alternative alongside the original when you want to compare directions.

## Continue in your app

Your interface is working frontend code. Test its interactions, inspect the source, and share or export the version you want to use.

Connect real data, authentication, routing, and deployment in the destination application. Tenor gives you a concrete interface to continue from.

## Next steps

- [Tenor product reference](https://tenor.design/docs/reference/tenor) — 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.
- [Your first creation](https://tenor.design/docs/quickstart) — Go from an idea to a working interface, then make it your own.
- [Projects and the canvas](https://tenor.design/docs/workspace/projects) — Keep your conversations and creative work together.
- [Images and screenshots](https://tenor.design/docs/create/from-a-visual-reference) — Use a visual reference to make the direction easier to see.
- [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.