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

# AI Models

> The AI technology powering Kleap

Kleap uses advanced AI models to understand your requests and build your site.

## How Kleap Uses AI

When you send a message, Kleap:

1. **Understands** your intent and context
2. **Plans** the changes needed
3. **Generates** clean, production-ready code
4. **Applies** changes to your site
5. **Verifies** the result builds and looks right

## What the AI Can Do

<CardGroup cols={2}>
  <Card title="Build Pages & Sections" icon="puzzle-piece">
    Turn descriptions into real pages and layouts
  </Card>

  <Card title="Style Your Site" icon="palette">
    Apply colors, typography, spacing, and animations with Tailwind
  </Card>

  <Card title="Add Interactivity" icon="wand-magic-sparkles">
    Menus, sliders, tabs, and forms via React islands
  </Card>

  <Card title="Add Data & Accounts" icon="database">
    Wire up Kleap Database and user logins when needed
  </Card>

  <Card title="Optimize for SEO" icon="magnifying-glass">
    Metadata, structure, and content that ranks
  </Card>

  <Card title="Debug & Refine" icon="bug">
    Find and fix issues, then iterate
  </Card>
</CardGroup>

## What AI Does Best

* **Beautiful UI** — turning descriptions into polished, responsive designs
* **Content & SEO** — headings, copy, and structured metadata
* **Forms & lead capture** — contact, newsletter, and quote forms
* **Common patterns** — landing pages, portfolios, business sites, blogs

### What Needs More Guidance

* **Complex business logic** — be specific about the rules
* **Custom, unique designs** — reference examples or give detail
* **Advanced integrations** — describe the expected behavior

## Prompt Tips for Best Results

### Be Specific

```
❌ "Make it better"
✅ "Increase the hero heading to 3xl and add more padding around the cards"
```

### Provide Context

```
❌ "Add a button"
✅ "Add a 'Book a call' button next to the hero heading that links to my Calendly"
```

### Break Down Complex Tasks

Instead of:

```
Build a full booking site with accounts, payments, and admin
```

Try:

```
1. "Create a landing page for a barbershop with services and hours"
2. "Add a booking form that saves to a database"
3. "Add a Stripe buy button for deposits"
```

## Code Quality

AI-generated code follows modern best practices:

| Aspect            | Standard                       |
| ----------------- | ------------------------------ |
| **Framework**     | Astro 5 (mostly static, fast)  |
| **Styling**       | Tailwind CSS v4                |
| **Interactivity** | React 19 islands where needed  |
| **Language**      | TypeScript                     |
| **Accessibility** | Semantic HTML, ARIA labels     |
| **SEO**           | Metadata and structured markup |

## Context Understanding

The AI understands:

* **Your whole site** — existing pages, components, and patterns
* **Selected elements** — what you clicked in the preview
* **Conversation history** — earlier messages in the session

<Info>
  The more you build, the better the AI understands your project's style and preferences.
</Info>

## Credits & Usage

Each AI message consumes credits based on how much work it does — see [Plans & Credits](/introduction/plans-and-credits). Tips to get more from each credit:

* Be concise but specific
* Use element selection to point at exactly what you mean
* Break large tasks into smaller messages
* Edit plain text directly in the preview (that's free)

## Privacy & Security

* Your code is processed securely to build your site
* **Never** paste secret keys, passwords, or private tokens into prompts

<Card title="Prompting Best Practices" icon="lightbulb" href="/prompting/best-practices">
  Learn how to write effective prompts
</Card>