---
sidebar_label: 'AI Chat'
---

import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {PlatformSection} from "@site/src/components/PlatformSection/PlatformSection";

import Javascript from './_001-ai-chat/#js.mdx';
import ReactJs from './_001-ai-chat/#react.mdx';

import InstallationJavascript from './_001-ai-chat/#js/installation.mdx';
import InstallationReactJs from './_001-ai-chat/#react/installation.mdx';

import UsageJavascript from './_001-ai-chat/#js/usage.mdx';
import UsageReactJs from './_001-ai-chat/#react/usage.mdx';

import ConfigJavascript from './_001-ai-chat/config/#js.mdx';
import ConfigReactJs from './_001-ai-chat/config/#react.mdx';

import AdapterDocJavascript from './_001-ai-chat/config/#react/adapter.mdx';
import AdapterDocReactJs from './_001-ai-chat/config/#js/adapter.mdx';

import PersonasDocJavascript from './_001-ai-chat/config/#js/personas.mdx';
import PersonasDocReactJs from './_001-ai-chat/config/#react/personas.mdx';

import ClassNameDocJavascript from './_001-ai-chat/config/#js/className.mdx';
import ClassNameDocReactJs from './_001-ai-chat/config/#react/className.mdx';

import initialConversationJavascript from './_001-ai-chat/config/#js/initialConversation.mdx';
import initialConversationReactJs from './_001-ai-chat/config/#react/initialConversation.mdx';

import conversationOptionsDocJavascript from './_001-ai-chat/config/#js/conversationOptions.mdx';
import conversationOptionsDocReactJs from './_001-ai-chat/config/#react/conversationOptions.mdx';

import layoutOptionsDocJavascript from './_001-ai-chat/config/#js/layoutOptions.mdx';
import layoutOptionsDocReactJs from './_001-ai-chat/config/#react/layoutOptions.mdx';

import promptBoxOptionsDocJavascript from './_001-ai-chat/config/#js/promptBoxOptions.mdx';
import promptBoxOptionsDocReactJs from './_001-ai-chat/config/#react/promptBoxOptions.mdx';

import SyntaxHighlighterJavascript from './_001-ai-chat/config/#js/syntaxHighlighter.mdx';
import SyntaxHighlighterReactJs from './_001-ai-chat/config/#react/syntaxHighlighter.mdx';

# AI Chat Component

The `AiChat` component is the main UI component of the `NLUX` chatbot. It is responsible for rendering the messages and
the prompt input field, and all the user interactions.

<PlatformSelector reactJs={ReactJs} javascript={Javascript}/>

---

## Installation

<PlatformSection reactJs={InstallationReactJs} javascript={InstallationJavascript}/>

---

## Usage

<PlatformSection reactJs={UsageReactJs} javascript={UsageJavascript}/>

---

## Configuration

<PlatformSection reactJs={ConfigReactJs} javascript={ConfigJavascript}/>

---

### Adapter

<PlatformSection reactJs={AdapterDocReactJs} javascript={AdapterDocJavascript}/>

---

### Class Name

<PlatformSection reactJs={ClassNameDocReactJs} javascript={ClassNameDocJavascript}/>

---

### Chat Personas

<PlatformSection reactJs={PersonasDocReactJs} javascript={PersonasDocJavascript}/>

---

### Initial Conversation

<PlatformSection reactJs={initialConversationReactJs} javascript={initialConversationJavascript}/>

---

### Conversation Options

<PlatformSection reactJs={conversationOptionsDocReactJs} javascript={conversationOptionsDocJavascript}/>

---

### Layout Options

<PlatformSection reactJs={layoutOptionsDocReactJs} javascript={layoutOptionsDocJavascript}/>

---

### Prompt Box Options

<PlatformSection reactJs={promptBoxOptionsDocReactJs} javascript={promptBoxOptionsDocJavascript}/>

---

### Syntax Highlighter

<PlatformSection reactJs={SyntaxHighlighterReactJs} javascript={SyntaxHighlighterJavascript}/>