Skip to content
Documentation

AI Assistant

Connect your coding assistant, fix UI issues with visual context, and review the code changes in Hexby.

Connect an AI coding agent you already use. Select a screen or component, describe the change, then preview the result and review the code before sharing it.

Connect your AI Agent dialog with Gemini selected and its installation and sign-in guidance open.
Choose an agent while setting up your project.

Connect your agent

To get started, sign in to Hexby and open a project. During setup, Hexby asks you to connect a coding agent.

  1. Choose an agent in the connection dialog. If Hexby says it is not installed, follow the setup instructions to install its CLI.
  2. Sign in to the agent if prompted. Depending on the agent, you may sign in in a browser or enter an API key.
  3. Return to Hexby and finish connecting. The agent will then be available in Chat.

To connect another agent later, open Settings → Agent Configuration. Choose which connected agent to use when you start a conversation.

Hexby’s Connect your AI Agent dialog with supported coding assistants to choose from.
Choose an installed agent to connect it to your project.

Your agent’s CLI

Hexby connects to the command-line version (CLI) of your coding agent. If you use that agent in an editor, you may still need to install its CLI. Sign in to the agent on the same computer account you use for Hexby. Your Hexby and agent accounts are separate.

Ask for a UI change

Select the page or component where the issue appears. Open Component View to inspect a component on its own, then use Chat to describe the result you want and what should stay the same. Hexby includes the selection as context, so you do not need to name it in your request.

For example, select the screen or component you want to update, open Chat, and ask:

Make this button easier to see on mobile. Keep the current colors and wording.

Choose a model or session settings

The available choices depend on your agent. Choose a model from the menu beneath the prompt. For other options, open Session settings (the sliders icon).

Steer or queue a follow-up

While the agent is working, you can send another message in Chat:

  • Steer: Give the agent a correction or new direction for the current task. For example: “Keep the existing colors.”
  • Queue: Add a follow-up for the agent to handle after its current task finishes. For example: “Next, check the mobile layout.”

For context, attachments, queued messages, and conversation history, see Chat.

Refine the result

Check the preview when the agent finishes. If it is close, describe what still needs work. You can also:

  • Use Annotate to point to an exact element.
  • Try ideas and interactive previews with Explore with Hexby before editing.
  • Click Fix with agent if a preview is missing, or add safe example data with Enrich component previews.

Check that it worked

Check that the preview matches what you asked for. To see what the agent changed in your project, open Visual Review and inspect the updated UI and files.

Changes you make with Preview App’s visual controls are temporary until you choose Apply changes. Changes your agent makes in Chat are saved in the project files. Review them before sharing or handing them off.

What Hexby adds to your agent

How Hexby connects to your agent

Hexby connects to coding agents through the Agent Client Protocol (ACP). Chat hosts the conversation and gives the agent context from the screen or component you selected and the project you opened. Some agents support ACP directly. Claude Code and Codex use adapters that Hexby sets up for you.

What your agent can do

Hexby also gives the agent project-aware tools through the Model Context Protocol (MCP). These tools help it inspect components, understand the workspace, and work with the live preview. They can also load Hexby’s built-in guides for design, responsive layouts, and accessibility.

Hexby’s tools do not edit project files. They help the agent inspect your app and use the preview; the agent uses its own tools to read or edit project files. Some Hexby tools can change the preview or the current workspace view. Their activity appears in Chat and usually does not need a separate approval. Depending on the agent’s settings, it may ask permission before editing files or running a command. Review the request in Chat before allowing it.

The agent uses its own sign-in and models. Its provider handles requests under its own terms.

AI usage and billing

Hexby does not include AI usage. Your agent provider sets your usage limits and charges. Check your provider account for billing details.

Supported AI agents

The following coding agents are supported. For Cursor and GitHub Copilot, install their command-line agent even if you already use their editor integration.

If the agent does not connect

Use the check that matches the problem:

  1. The agent is not installed: Follow the installation instructions for its CLI, then try connecting again in Settings → Agent Configuration.
  2. Sign-in does not finish: Open the agent directly and complete any browser or device authorization. Use the same computer account you use to run Hexby.
  3. The agent appears in Chat but does not respond: Check that it is signed in, then start a new conversation with it.
  4. The response misses the UI you meant: Select the screen or component first, then send your request in Chat.

If it still fails, see Troubleshooting for project and preview issues.