---
sidebar_label: "Conversation Starters"
---

import { CodeEditor } from "@site/src/components/CodeEditor/CodeEditor";
import app from "./0009-conversation-starters/app";
import send from "./0009-conversation-starters/send";
import setup from "./0009-conversation-starters/setup";

# Conversation Starters

With `NLUX`, you have the option to define **conversation starters**. These starters are displayed beneath the chat persona when there is no existing chat history.

Each conversation starter must include a `prompt` property and can optionally include an `icon` (as a string or JSX element) and a `label` (which, if provided, will be displayed instead of the `prompt`'s text).

To specify conversation starters, set them using `conversationOptions.conversationStarters`.

<CodeEditor
  files={{
    "App.tsx": app,
    "send.ts": send,
    "setup.tsx": setup,
  }}
  editorHeight={460}
  simulatedPrompt={false}
/>
