# Start with existing code

Bring a working React component into the creative process.

Source: https://tenor.design/docs/create/from-existing-code

## Prepare the source

Use a self-contained React component with working default content. Include the styles and assets needed to render it.

Remove credentials. Simplify or explain private packages, global providers, and backend calls that the canvas cannot reproduce on its own.

## Paste and give direction

Paste the code into the composer and say whether to preserve it, refine it, or make a separate variant. Name the parts that already work.

Check the first rendering before styling changes. Missing imports or application context can affect what appears.

### Example prompt

> Use this component as the starting point. Preserve its content and validation. Tighten the layout and make the primary action clearer without changing the theme.

## Import through an agent

An authorized agent connection can import supported component code into Tenor. Creating components requires permission beyond reading shared components.

The component import accepts self-contained TSX. Open the result on the canvas to verify rendering and behavior; a successful save is not a visual test.

## Continue in the source project

Canvas changes do not automatically update your repository. Export the version you choose or ask your agent to integrate it in the right file.

Review dependencies and application behavior after integration.

## Next steps

- [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.
- [Share and export](https://tenor.design/docs/handoff/sharing-and-export) — Take a saved result into the next part of your workflow.