AI Chat - Kleap Documentation

The AI Chat is your main interface for building apps with Kleap. Simply describe what you want, and the AI generates the code.

How It Works

Describe your request in the chat input
AI processes your request and generates code
Preview updates in real-time
Iterate by sending follow-up messages

Writing Effective Prompts

Be Specific

Good
Too Vague

Create a contact form with fields for name, email,
and message. Add a submit button that shows a
success toast when clicked.

Add a form

Include Context

Tell the AI where and how:

Add a testimonials section to the homepage, below
the features section. Use a carousel with 3 cards
showing customer photos, names, and quotes.

Reference Existing Elements

Change the header background to match the footer color

Make the pricing cards look like the feature cards above

Example Prompts

Creating Components

Create a pricing table with 3 tiers: Free, Pro, and
Enterprise. Include feature lists and CTA buttons.

Styling Changes

Make the hero section full-height with a gradient
background from purple to blue

Adding Functionality

Add user authentication with email/password login
and a sign-up form

Fixing Issues

The button on mobile is too small. Increase the
padding and font size on screens below 768px

Chat Features

Message History

Your conversation is saved automatically. Scroll up to see previous messages and the AI’s responses.

Regenerate Response

If you’re not happy with a response, you can ask the AI to try again:

That's not quite right. Can you try a different approach?

Credit Usage

Each message consumes credits based on complexity:

Request Type	Typical Cost
Small text or style change	Under 1 credit
New section or component	1–3 credits
Full page creation	3–8 credits
Large, complex feature	8+ credits

Estimates — actual usage depends on the request. Image generation and text editing are free.

You can see your remaining credits in the top navigation bar.

Tips for Better Results

Break complex requests into steps

Instead of asking for an entire app at once, build incrementally:

“Create the homepage layout”
“Add a navigation header”
“Create the hero section”
“Add the features grid”

Reference design systems

Mention styles you like:

“Use a clean, minimal design like Linear”
“Make it colorful and playful like Notion”
“Professional and corporate like Stripe”

Provide examples

Share references:

“Similar to how Airbnb shows listings”
“Like a Trello board layout”

Iterate in small steps

Make one change at a time for precise control:

“Increase the heading size”
“Add more spacing between sections”
“Change the button color to green”

Common Issues

If the AI seems stuck or gives unexpected results:

Be more specific in your request
Break it into smaller steps
Reference specific files or components
Refresh and try again

Learn Prompt Engineering

Master the art of prompting for better results

​How It Works

​Writing Effective Prompts

​Be Specific

​Include Context

​Reference Existing Elements

​Example Prompts

​Creating Components

​Styling Changes

​Adding Functionality

​Fixing Issues

​Chat Features

​Message History

​Regenerate Response

​Credit Usage

​Tips for Better Results

​Common Issues

Learn Prompt Engineering

How It Works

Writing Effective Prompts

Be Specific

Include Context

Reference Existing Elements

Example Prompts

Creating Components

Styling Changes

Adding Functionality

Fixing Issues

Chat Features

Message History

Regenerate Response

Credit Usage

Tips for Better Results

Common Issues