> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat with the AI to Build Your Site

> Use natural language to create pages, write code, and design your site

The AI assistant is the fastest way to get things done on Hiveku. Describe what you want, and it writes the code, styles the design, and wires everything up.

## Opening the AI Chat

Click the **AI** tab in the left panel of the Editor. This is where you'll spend most of your time.

<Tip>
  You can resize the AI panel by dragging its edge, or pop it into a separate pane if you want chat and code side-by-side.
</Tip>

## Basic Prompt Examples

Start simple. The AI understands natural language — you don't need special syntax.

```
Build a hero section with a bold headline, subtitle, and two CTA buttons
```

```
The nav looks broken on mobile — can you fix it?
```

```
Add a contact form that sends submissions to my email
```

```
Make the homepage match this screenshot [attach image]
```

## Modes

The **Modes** dropdown above the chat input changes how the AI behaves. Pick the one that fits the task.

| Mode          | Best for                                    |
| ------------- | ------------------------------------------- |
| **Code**      | Default. Writes and edits code              |
| **Ask**       | Read-only Q\&A about your codebase          |
| **Architect** | Planning big changes before implementing    |
| **Debug**     | Diagnosing errors and broken behavior       |
| **Designer**  | Visual design and styling decisions         |
| **Test**      | Writing and running tests                   |
| **Security**  | Reviewing for security issues               |
| **Refactor**  | Cleaning up and restructuring existing code |

See [AI Modes](/ai/modes) for a deeper look at each one.

## @-Mentions for Files

Prefix a filename with `@` to pull it into context.

```
Update @about.html to include a photo grid
```

```
Compare @pricing.tsx and @signup.tsx — they should share a button component
```

The AI reads the mentioned files before responding, which makes answers much more accurate.

## Attaching Images and Files

You can drag-and-drop or click the paperclip to attach:

* **Images** — up to 20 at once, 20 MB each (screenshots, mockups, references)
* **Videos** — up to 100 MB (user flow recordings, motion references)
* **Documents** — PDFs, text files, JSON

<Info>
  Attaching a screenshot of a competitor's site or a Figma frame is one of the fastest ways to get the AI to nail a design.
</Info>

## Slash Commands

Type `/` in the chat to see the command menu.

| Command    | What it does                                    |
| ---------- | ----------------------------------------------- |
| `/clear`   | Start a fresh conversation                      |
| `/compact` | Summarize older messages to free up context     |
| `/help`    | Show the full command list                      |
| `/context` | View what files the AI currently has in context |

## Reasoning Effort

The **Effort** selector controls how much the AI thinks before responding.

<Tabs>
  <Tab title="Low">
    Quick answers, small edits, obvious bug fixes. Cheapest.
  </Tab>

  <Tab title="Medium">
    The default. Balanced thinking for most tasks.
  </Tab>

  <Tab title="High">
    Complex multi-file refactors, subtle bugs, architectural decisions. Uses more credits but thinks harder.
  </Tab>
</Tabs>

<Tip>
  Start on Medium. Bump to High if the AI misses the mark twice in a row on a tricky task.
</Tip>

## AI Credits

Each AI response uses **credits** based on the model, effort level, and conversation size. You can see your usage in **Settings > Billing > AI Credits**.

* **Members** can ask the AI as much as their plan allows
* **Budgets** let admins cap spending per project or per user
* Running low? The AI warns you before you hit your cap

See [AI Overview](/ai/overview) for plan limits and BYOK setup.

## Tips for Good Prompts

<Steps>
  <Step title="Be specific">
    `Make a button` is vague. `Add a primary CTA button labeled "Get Started" below the hero headline` is actionable.
  </Step>

  <Step title="Provide context">
    Attach a screenshot. Mention the file. Paste an error message. The more the AI knows, the better it performs.
  </Step>

  <Step title="Iterate in small steps">
    Instead of one giant prompt, build in layers: structure first, then styling, then polish. Easier to review and undo.
  </Step>

  <Step title="Ask it to plan">
    For big changes, switch to **Architect** mode and ask for a plan first. Approve the plan, then let it implement.
  </Step>
</Steps>

## Verifying Results

After the AI makes changes:

* Scan the diff it shows in the chat
* Check the live preview in the Editor
* Open the changed files in the Code Editor to review
* If something's wrong, say so — the AI will fix it without starting over

## Troubleshooting

<AccordionGroup>
  <Accordion title="The AI isn't responding">
    Check the status bar at the bottom of the chat. If it says "thinking" for more than a minute, the model may be overloaded — try `/clear` and re-send, or switch to a different model in **Settings > AI Models**.
  </Accordion>

  <Accordion title="I ran out of credits">
    Top up from **Settings > Billing**, upgrade your plan, or bring your own API key (BYOK) for unlimited usage at your own cost. See [AI Models](/ai/models).
  </Accordion>

  <Accordion title="The AI made changes I don't want">
    Open **Version History** from the top bar and restore the previous snapshot. Every AI change creates a checkpoint, so rolling back is one click.
  </Accordion>

  <Accordion title="The AI keeps getting the same thing wrong">
    Try `/clear` to reset context, switch to High effort, or attach a screenshot of what you want. If it's still stuck, switch to **Architect** mode and ask for a plan first.
  </Accordion>

  <Accordion title="The AI won't touch a specific file">
    Some generated files are marked read-only (like lockfiles). Ask the AI to edit the source file instead — it knows which files regenerate the one you want changed.
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={3}>
  <Card title="AI Overview" icon="circle-info" href="/ai/overview">
    How the AI assistant works
  </Card>

  <Card title="AI Modes" icon="sliders" href="/ai/modes">
    Deep dive on each mode
  </Card>

  <Card title="AI Models" icon="microchip" href="/ai/models">
    Pick the right model
  </Card>
</CardGroup>