# Take a component into your app

Bring the chosen version into a real implementation.

Source: https://tenor.design/docs/how-tos/continue-in-code

## Prepare the handoff

Select the saved version you want to use. Identify the destination route or file and the real application behavior it should connect to.

## Continue in the codebase

### 1. Open Share

Use the selected component’s Share menu.

### 2. Choose the handoff

Use an agent connection, Copy for AI, or Download .tsx.

### 3. Explain the integration

Name the repository location, real data, design primitives, and behavior to preserve.

### 4. Review the changes

Check the source diff, dependencies, and assets.

### 5. Test in the application

Try real states, different screen sizes, and keyboard interaction.

## Finish the implementation

Confirm the interface works with the application’s data and permissions. A successful export or agent handoff begins that review; it is not an automatic deployment.

## 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.