> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Capabilities
> Learn how to use the extension's element selector, snipping tool, CSS editor, and DOM editor.
export const DOMEditor = props => {
return ;
};
export const TextEditor = props => {
return ;
};
export const Scissors = props => {
return ;
};
export const AddReferenceElementsBrowserChat = props => {
return ;
};
## Send DOM elements as context
Kombai includes and tools to help you select or snip DOM elements and attach them to the browser extension's chat window.
Follow the steps in the [Element Selector](#element-selector) and [Snipping tool](#snipping-tool) sections below to use these tools.
### Element selector
1. Click the icon in the browser extension's chat window. Alternatively, press ⌘ + ⌥ + . on macOS.
2. Click the DOM element you want to send to Kombai. When you click, Kombai captures a screenshot of both the element and the entire page.
3. Add any additional instructions you want to send to Kombai.
4. Click the **Send to agent** button.
### Snipping tool
1. Click the icon in the browser extension's chat window.
2. Hold and drag the mouse over the UI area you want to snip. Snipped DOM elements and their screenshots will be captured and attached as context.
3. Add any additional instructions you want to send to Kombai.
4. Click the **Send to agent** button.
## Send visually edited CSS styles to Kombai as context
You can select an element and visually edit its CSS to preview how that element will look like before sending the changes to Kombai for implementation. You can visually edit the position, layout, appearance, and font styles of the selected element.
1. Click the icon in the browser extension's chat window. Alternatively, press ⌘ + ⌥ + . on macOS.
2. Click the DOM element you want to send to Kombai.
3. Go to the **Design** tab in the Kombai extension and edit the CSS values visually based on the available dropdowns and input boxes.
4. Ask Kombai to implement changes and send the message to agent.
## Edit site texts live and send them to Agent
The text editor lets you edit texts in your webpage live and send them to Agent for code implementation. You can edit the text of any element on the page, including headings, paragraphs, buttons, and input fields.
1. Click the icon in the browser extension's chat window.
2. Click on a text element on the page to make it editable.
3. Edit the text.
4. Click the **Send to agent** button.
## Use DOM editor to visually rearrange and delete DOM elements
You can use the DOM editor to visually drag and rearrange DOM elements or delete theme from the UI.
### Drag and rearrange DOM elements
1. Click the icon in the browser extension's chat window.
2. Click and hold a UI element on the page and drag it to a new position to rearrange it.
3. Click the **Send to agent** button.
### Delete DOM elements
1. Click the icon in the browser extension's chat window.
2. Click a UI element on the page and press the Delete / Backspace key on your keyboard to delete the element.
3. Click the **Send to agent** button.
## Preview multiple screens
You can use multiple browser tabs to preview different screens of your app simultaneously. This enables you to select elements from other screens that you want to refer to in your current browser tab.
For example, if you have the **Homepage** open and want to add an avatar from the **Accounts** page:
1. Open the Accounts page in a new tab.
2. Select the avatar element.
3. Return to the previous tab (Homepage).
You will see the avatar's DOM element highlighted in yellow. You can then ask Kombai to add the avatar to the Homepage.
## Send browser data
The browser extension automatically attaches all available browser data to your messages as context. Beyond DOM elements and applied CSS changes, it captures the entire DOM tree, console output, network logs, and performance metrics.
Using this data, Kombai fixes console and network errors, boosts page performance, refactors UI components, and edits your UI with precision.
### Example prompts
1. Fix console errors in my app.
2. Create a new `` component to group the tagged cards together.
3. Identify slow network requests and suggest improvements.
4. Give me the current performance metrics of the page.