# Import your own components

An imported component is a card from your app, redrawn for the chat. Faustine looks in your code for the cards your app shows its entities with in listings, such as a deal or a contact, and adapts each one. When the agent shows that entity, it uses your card instead of `EntityCards`.

No code from your app runs in the chat. Faustine writes a template of what the card shows, and the widget draws it. Buttons, tables and forms are never imported.

## Find and import components

A run reads your code on your model provider and costs tokens. It takes a few minutes and changes nothing until you import.

1. In the portal, go to [**Web Agents**](https://auth.faustine.ai/go?to=%2Fweb-assistants) and select your agent.
2. Select the **Generative UI** tab.
3. Select **Customize look**, then **Import components**.
4. Select **Find components**.
5. Review what the run found. Each component shows its name, the entity it draws, its source file, its fields, and the card drawn by the real widget with sample values.
6. Select the checkbox of each component the chat should use.
7. Select the import button in the bar that appears, for example **Import 2 components**. Its label has the number you picked.

The **Generative UI** tab opens again, with the imported components under **Entities**.

Importing saves the components to the draft. Your users get them when you [publish a version](https://docs.faustine.ai/web-agents/publish-a-version/) and [deploy it](https://docs.faustine.ai/web-agents/deploy-a-version/).

## What the page shows after a run

| What you see | Meaning |
| --- | --- |
| A component with a checkbox | It can be imported. |
| A badge that starts with **Replaces the imported** | The entity already has an imported card. Importing this one replaces it. An entity has one card. |
| A component under **Already imported** | The draft has this card. It cannot be imported twice. |
| A line that says a component was found but could not be adapted | The run names the component and the reason. The entity keeps Faustine's card. |

The run and its log are in the agent's **Activity** tab. **Find again** runs it again after your code changes.

## Turn off or remove an imported component

Imported components have a switch and a **Remove** button in the **Generative UI** tab, under **Entities**. See [Turn components on and off](https://docs.faustine.ai/web-agents/generative-ui-components/#turn-an-imported-component-off).

## Troubleshooting

| Symptom | Cause | Fix |
| --- | --- | --- |
| **No entity card was found in your app’s listings, so there is nothing to import.** | The run found no card that draws an entity in a listing. | The chat keeps Faustine's card for every entity. There is nothing to change. |
| The bar says **Pick at least one** | No checkbox is selected. | Select a component, or select **Cancel** to leave without importing. |
| The agent still draws Faustine's card in your app | The import is in the draft. | Publish a version and deploy it. |

## Next steps

- [Turn components on and off](https://docs.faustine.ai/web-agents/generative-ui-components/): pause an imported component without removing it.
- [Match the look of your app](https://docs.faustine.ai/web-agents/match-your-app/): give the rest of the components your app's look.
- [Generative UI](https://docs.faustine.ai/web-agents/generative-ui/): every component the agent can draw.