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

# Chat Interface

> Learn how to use ChatAndBuild's AI-powered chat interface for development

## Overview

The ChatAndBuild chat interface is your primary way to interact with AI models for code generation, debugging, and development assistance. It combines the power of multiple AI providers in a unified, developer-focused experience.

### Starting a New Chat

1. Navigate to the main chat interface
2. Select your preferred [AI model](/docs/chat/models) from the model selector
3. Begin typing your [development question or request](/docs/chat/prompts)
4. Press Enter or click the send button to start the conversation

### Chat Features

<CardGroup cols={2}>
  <Card icon="brain" title="Multi-Model Support">
    Choose from Claude, Gemini, GPT-5, and other leading AI models for different types of tasks.
  </Card>

  <Card icon="code" title="Code Generation">
    Generate complete applications, components, or code snippets through natural language.
  </Card>

  <Card icon="folder" title="File Integration">
    Upload files, import from GitHub, or reference existing code in your conversations.
  </Card>

  <Card icon="eye" title="Live Preview">
    See generated code running in real-time with integrated preview functionality.
  </Card>

  <Card icon="language" title="Multi-language and voice imput">
    Multi-language and voice input support lets users interact naturally in their preferred language and speaking style, making the platform more inclusive and accessible.
  </Card>

  <Card icon="sparkles" title="Prompt Enhancer">
    Want to give your prompt more power? Use our ✨ **Prompt Enhancer** to rework and optimize it — but keep it simple for the first prompt.
  </Card>
</CardGroup>

## Chat Controls

### Voice Input

Enable voice input to speak your development requests:

1. Click the microphone icon in the chat input
2. Allow microphone permissions when prompted
3. Speak your question or request clearly
4. The speech will be automatically transcribed and sent

<Tip>
  Voice input works best in quiet environments and supports multiple languages.
</Tip>

### File Attachments

Attach files to provide context for your development requests:

1. Click the attachment icon in the chat input
2. Select files from your device or Drag and drop files directly into the chat area

<Info>
  Supports only images at the moment (png, jpg, webp etc.)
</Info>

3. Files are automatically analyzed and incorporated into AI responses
4. Maximum file size limit applies per attachment

<Tip>
  For best results with images, upload one image at a time to ensure proper analysis and context understanding.
</Tip>

### Prompt Enhancer

Improve your prompts automatically for better AI responses:

1. Type your initial prompt in the chat input
2. Click the "Enhance" button that appears
3. Review the AI-suggested improvements to your prompt
4. Send your prompt with enhancements with one click or edit manually
5. Enhanced prompts provide more context and clearer instructions

### Chat History Export

Export your conversations for documentation and sharing:

1. Click the export button in the chat input window
2. Downloaded files preserve formatting, code blocks, and attachments

<Tip>
  Share your chats with others or save them for future reference
</Tip>

<Note>
  Available exclusively with Paid Plans
</Note>

### Screenshot Capturing

ChatandBuild provides built-in screenshot capturing that integrates directly with your chat interface. Screenshots are automatically added to your chat context for AI assistance.

<img src="https://mintcdn.com/chatandbuild-cfa8e63c/l1psyImHabNsMx4L/docs/images/image_capture.png?fit=max&auto=format&n=l1psyImHabNsMx4L&q=85&s=06e2b0c7d949b76c4bb6a777a9e34e16" alt="Image Capture Pn" width="1984" height="192" data-path="docs/images/image_capture.png" />

1. Click the button shown in the picture, then choose Area for a screenshot
2. The image is automatically added to your chat
3. You'll see a success notification

## Conversation Management

### Chat History

All your conversations are automatically saved and organized by:

* **Order**: Most recently updated at the top, oldest at the bottom
* **Recent**: Last 24 hours
* **Previous 7 Days**: Past week
* **Previous 30 Days**: Last month
* **Older**: All previous conversations

### Editing Chat Titles

1. Open the chat menu in the sidebar
2. Hover on the chat title - > Rename
3. Enter a descriptive name for easy reference

**or**

1. Open the chat
2. Edit title on the top of the page

### Deleting Chat

1. Open the chat menu in the sidebar
2. Hover on the chat title - > Delete
3. Confirm by clicking "Delete"

## Best Practices

### Writing Effective Prompts

<AccordionGroup>
  <Accordion title="Be Specific About Requirements">
    Instead of "Build a website", try "Create a React website with a navigation bar, hero section, and contact form using Tailwind CSS"
  </Accordion>

  <Accordion title="Provide Context">
    Share relevant files, explain your project structure, or mention specific frameworks you're using
  </Accordion>

  <Accordion title="Break Down Complex Tasks">
    For large projects, break them into smaller, manageable requests across multiple messages
  </Accordion>

  <Accordion title="Use Technical Language">
    AI models understand technical terms, so don't hesitate to use specific programming terminology
  </Accordion>
</AccordionGroup>

### Example Conversations

<CodeGroup>
  ```text Frontend Development theme={null}
  User: Create a React component for a user profile card with avatar, name, email, and a follow button

  AI: I'll create a user profile card component for you...
  ```

  ```text Backend API theme={null}
  User: Build a Node.js Express API with routes for user authentication including register, login, and logout

  AI: I'll create a complete authentication API with Express...
  ```

  ```text Database Integration theme={null}
  User: Create a Supabase schema for a blog platform with posts, comments, and user relationships

  AI: I'll design a blog platform schema for Supabase...
  ```
</CodeGroup>

<Note>
  For more advanced chat features, explore our guides on [Model Selection](/docs/chat/models) and [Prompt Engineering](/docs/chat/prompts).
</Note>