### Configure Full Microphone Recording Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/files.mdx

This example demonstrates a complete setup for the microphone recording feature, including demo mode, styling, intro message, and history. Adapt this for your chosen framework.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  microphone="true"
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the microphone button or drop a file to attach it to the next outgoing message."}'
  history='[{"files": [{"src": "path-to-file.wav", "type": "audio"}], "role": "user"}]'
></deep-chat>
```

--------------------------------

### Basic Web Model Setup

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/webModel.mdx

Use `webModel={true}` to enable the default web model. This is a simple way to get started with in-browser chat models.

```html
<deep-chat webModel="true"></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat webModel="true" style="border-radius: 8px"></deep-chat>
```

--------------------------------

### Start Go Server

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/go/README.md

Run this command to start the Go server after navigating to the project directory.

```bash
go run main.go
```

--------------------------------

### Full Deep Chat Setup with Audio Autoplay

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/speech.mdx

This example shows a complete Deep Chat component setup with audio autoplay enabled and an introductory message. It's intended for Vanilla JS and may need framework-specific adjustments.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  speechToText='{"audio": {"autoPlay": true}}'
  introMessage='{"text": "Click the microphone to start transcribing your speech."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

--------------------------------

### Basic Deep Chat Setup

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/messages/messages.mdx

A simple example of how to implement the Deep Chat component with basic props like demo and scrollButton.

```html
<deep-chat scrollButton="true"></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  scrollButton='true'
  history='[
    {
      "text": "According to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway because bees don't care what humans think is impossible. Yellow, black. Yellow, black. Yellow, black. Yellow, black. Ooh, black and yellow! Let\'s shake it up a little. Barry! Breakfast is ready! Coming! Hang on a second. Hello? Barry? Adam? Can you believe this is happening? I can\'t. I\'ll pick you up. Looking sharp. Use the stairs, Your father paid good money for those. Sorry. I\'m excited. Here\'s the graduate. We\'re very proud of you, son.",
      "role": "ai"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

--------------------------------

### Full Example with JavaScript Function Handler

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAICompletions.mdx

This example includes the complete setup for OpenAI function calling in JavaScript, along with a sample `getCurrentWeather` function that simulates fetching weather data based on location.

```javascript
// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openAI: {
    completions: {
      tools: [
        {
          type: 'function',
          function: {
            name: 'get_current_weather',
            description: 'Get the current weather in a given location',
            parameters: {
              type: 'object',
              properties: {
                location: {
                  type: 'string',
                  description: 'The city and state, e.g. San Francisco, CA',
                },
                unit: {type: 'string', enum: ['celsius', 'fahrenheit']},
              },
              required: ['location'],
            },
          },
        },
      ],
      function_handler: (functionsDetails) => {
        return functionsDetails.map((functionDetails) => {
          return {
            response: getCurrentWeather(functionDetails.arguments),
          };
        });
      },
    },
    key: 'placeholder-key',
  },
};

function getCurrentWeather(location) {
  location = location.toLowerCase();
  if (location.includes('tokyo')) {
    return JSON.stringify({location, temperature: '10', unit: 'celsius'});
  } else if (location.includes('san francisco')) {
    return JSON.stringify({location, temperature: '72', unit: 'fahrenheit'});
  } else {
    return JSON.stringify({location, temperature: '22', unit: 'celsius'});
  }
}

```

--------------------------------

### Install Node Dependencies and Build Wrapper

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/other-packages/react/README.md

Use these commands to install project dependencies and build the wrapper for local development. Ensure Node.js is installed.

```bash
# Install node dependencies:
$ npm install
```

```bash
# Build the wrapper:
$ npm run build
```

--------------------------------

### Install Node Dependencies

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/component/README.md

Navigate to the /src directory and install node dependencies.

```bash
# Navigate to the /src directory and install node dependencies:
$ npm install
```

--------------------------------

### Full Deep Chat Setup with Web Speech Language Configuration

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/speech.mdx

This example demonstrates a full Deep Chat component setup, including configuring the Web Speech API language to 'en-US'. It's designed for Vanilla JS and requires adaptation for other frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  speechToText='{"webSpeech": {"language": "en-US"}}'
  introMessage='{"text": "Click the microphone to start transcribing your speech."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

--------------------------------

### Configure Full Audio Upload Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/files.mdx

This example shows a full configuration for the audio upload feature, including demo mode, styling, intro message, and history. Tailor this to your specific framework.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  audio="true"
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the audio button or drop a file to attach it to the next outgoing message."}'
  history='[{"files": [{"src": "path-to-file.wav", "type": "audio"}], "role": "user"}]'
></deep-chat>
```

--------------------------------

### Install Dependencies

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/nextjs/app-router/README.md

Navigate to the project directory and run this command to download all necessary dependencies.

```bash
npm install
```

--------------------------------

### Apply Container Styles with `style` (Full Example)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/styles/styles.mdx

This example demonstrates applying container styles using the `style` attribute, including a `demo` property. Tailor to your framework.

```html
<deep-chat style="background-color: #f7f7f7; border-radius: 8px" demo="true"></deep-chat>
```

--------------------------------

### Full HTML Example with Custom Button

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/styles/buttons.mdx

A comprehensive HTML example demonstrating the integration of a custom button with specific styling, alongside other Deep Chat configurations like demo mode and text input styling. This shows a complete setup for a customized chat interface.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  demo="true"
  style="border-radius: 8px"
  customButtons='[
    {
      "styles": {
        "button": {
          "default": {
            "svg": {
              "styles": {
                "default": {
                  "filter":
                    "brightness(0) saturate(100%) invert(42%) sepia(81%) saturate(1870%) hue-rotate(85deg) brightness(106%) contrast(103%)"
                }
              }
            },
            "text": {
              "styles": {"default": {"color": "#09C000"}},
              "content": "Button"
            }}}
  ]'
  textInput='{
    "styles": {
      "container": { "width": "200px", "marginLeft": "-48px" }
    }
  }'
></deep-chat>
```

--------------------------------

### Run NestJS Server

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/node/nestjs/README.md

Execute this command to start the Deep Chat NestJS server after dependencies have been installed.

```bash
npm run start
```

--------------------------------

### Run the Project

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/nextjs/app-router/README.md

Execute this command to start the development server for the NextJS application.

```bash
npm run dev
```

--------------------------------

### Install Dependencies with Maven

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/java/springboot/README.md

Navigate to the project directory and run this command to install the required modules using Maven.

```bash
mvn clean install
```

--------------------------------

### Install Deep Chat Packages

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/llms.txt

Install the core web component and the React wrapper using npm.

```bash
npm install deep-chat
npm install deep-chat-react
```

--------------------------------

### Style Attachment Container (Full Example)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/styles/styles.mdx

This full example demonstrates styling the attachment container, displaying it, and applying general styles to the chat. Tailor to your framework.

```html
<deep-chat
  attachmentContainerStyle='{"backgroundColor": "#b2e1ff57"}'
  demo='{"displayFileAttachmentContainer": true}'
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Install Go Packages

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/go/README.md

Navigate to the project directory and run this command to retrieve the relevant Go packages.

```bash
go get
```

--------------------------------

### Configure Full Mixed File Upload Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/files.mdx

This example shows a comprehensive configuration for the mixed file upload feature, including demo mode, styling, intro message, and history. This should be adapted for your specific framework.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  mixedFiles="true"
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the file button or drop a file to attach it to the next outgoing message."}'
  history='[{"files": [{"src": "path-to-file.txt", "name": "text-file.txt", "type": "file"}], "role": "user"}]'
></deep-chat>
```

--------------------------------

### Install Node Dependencies

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/README.md

Run this command to install all necessary Node.js dependencies for the project.

```bash
# Install node dependencies:
$ npm install
```

--------------------------------

### Customize Introductory Message with HTML Buttons

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/webModel.mdx

Configure the introductory web model message to include custom HTML for start and upload buttons, and specify corresponding CSS classes for their functionality. This example is for Vanilla JS.

```js
// using JavaScript for a simplified example

chatElementRef.webModel = {
  introMessage: {
    initialHtml: `<button class="start">Start</button> <button class="files">Files</button> <input type="file" class="input" hidden multiple />`,
    downloadClass: 'start',
    uploadClass: 'files',
    fileInputClass: 'input',
  },
};

chatElementRef.htmlClassUtilities = {upload: {styles: {default: {marginLeft: '4px'}}}};
```

--------------------------------

### Vision Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Ollama.mdx

This example demonstrates how to enable image uploads and camera access for vision-capable models in Deep Chat.

```APIDOC
## DeepChatBrowser with Vision Capabilities

### Description
Allows users to upload images or use their camera for visual understanding with compatible AI models.

### Method
Component Configuration

### Endpoint
N/A (Client-side component)

### Parameters
#### Component Props
- **images** (boolean) - Required - Set to `true` to enable image uploads.
- **camera** (boolean) - Required - Set to `true` to enable camera access.
- **directConnection** (object) - Required - Configuration for connecting to an AI model. Example: `{"ollama": {"model": "llava"}}`.
- **textInput** (object) - Optional - Styles for the text input area. Example: `{"styles": {"container": {"width": "77%"}}}`.
- **style** (string) - Optional - CSS styles for the component. Example: `"border-radius: 8px"`.

### Request Example
```html
<deep-chat
  directConnection='{
    "ollama": {
      "model": "llava"
    }
  }'
  images="true"
  camera="true"
  style="border-radius: 8px"
  textInput='{"styles": {"container": {"width": "77%"}}}'
></deep-chat>
```

### Response
N/A (Client-side component, responses are handled by the AI model)
```

--------------------------------

### Apply Container Styles with `chatStyle` (Full Example)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/styles/styles.mdx

This example shows applying container styles using the `chatStyle` property with a JSON string, including a `demo` property. Tailor to your framework.

```html
<deep-chat chatStyle='{"backgroundColor": "#f7f7f7", "borderRadius": "8px"}' demo="true"></deep-chat>
```

--------------------------------

### Configure Red Theme in Deep Chat (Vanilla JS)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/examples/design.mdx

This Vanilla JS example shows how to apply a red theme using HTML attributes. Remember to update 'path-to-icon.png' to your avatar's correct path. This setup is suitable for direct HTML integration.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  messageStyles='{"default": {"user": {"bubble": {"backgroundColor": "#ff2020"}}}}'
  avatars='{"ai": {"src": "path-to-icon.png"}}'
  submitButtonStyles='{
    "submit": {
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)"
          }
        }
      }
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "border": "1px solid #ffd9d9",
        "backgroundColor": "#fffcfc"
      }
    },
    "placeholder": {"text": "Insert your question here..."}
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: red;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

--------------------------------

### Basic Claude Connection Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Claude.mdx

Demonstrates how to establish a basic connection to Claude with a placeholder key, max tokens, and a system prompt.

```APIDOC
## Basic Claude Connection Example

### Description
This example shows a basic configuration for connecting to Claude using the `deep-chat` component, including a placeholder API key, maximum token limit, and a system prompt.

### Request Example (HTML)
```html
<deep-chat
  directConnection='{
    "claude": {
      "key": "placeholder key",
      "max_tokens": 1000,
      "system_prompt": "You are a helpful assistant."
    }
  }'
></deep-chat>
```

### Request Example (Vanilla JS)
```html
<deep-chat
  directConnection='{
    "claude": {
      "key": "placeholder key",
      "max_tokens": 1000,
      "system_prompt": "You are a helpful assistant."
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

### Note
Use [`stream`](/docs/connect#Stream) to stream the AI responses.
```

--------------------------------

### Vision Example with Deep Chat

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Claude.mdx

This example demonstrates how to enable image uploads and camera access in the Deep Chat interface for visual prompts.

```APIDOC
## Deep Chat Vision Configuration

### Description
Enables image uploads and camera access for visual prompts.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
#### HTML Attributes
- **directConnection** (object) - Required - Configuration for direct connection, including API keys. Example: `{"claude": {"key": "placeholder key"}}`
- **images** (boolean) - Optional - Enables image upload functionality. Set to `true`.
- **camera** (boolean) - Optional - Enables camera access for image capture. Set to `true`.
- **textInput** (object) - Optional - Styles for the text input container. Example: `{"styles": {"container": {"width": "77%"}}}`
- **style** (string) - Optional - CSS styles for the component. Example: `"border-radius: 8px"`

### Request Example
```html
<deep-chat
  directConnection='{
    "claude": {
      "key": "placeholder key"
    }
  }'
  images="true"
  camera="true"
  textInput='{"styles": {"container": {"width": "77%"}}}'
  style="border-radius: 8px"
></deep-chat>
```

### Response
N/A (Component Configuration)

### Error Handling
- **maxMessages**: When sending images, it is advised to set `maxMessages` to 1 to reduce data and costs.
```

--------------------------------

### Run Flask Server

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/python/flask/README.md

Start the Flask application. This command assumes you are in the 'src' directory.

```bash
python app.py
```

--------------------------------

### Install Flask Dependencies

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/example-servers/python/flask/README.md

Install the required Python packages for the Flask server. Ensure you are in the 'src' directory.

```bash
pip install flask flask-cors load_dotenv
```

--------------------------------

### Install Deep Chat with AI

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/README.md

Use the llms.txt file as a reference for installing and configuring Deep Chat with your code assistant.

```text
"Use https://github.com/OvidijusParsiunas/deep-chat/blob/main/llms.txt to add a chat component to my website."
```

--------------------------------

### Full Speech to Text Configuration Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/speech.mdx

This example shows a complete configuration for the Deep Chat component with speech-to-text enabled, including intro message, styling, and demo mode. It uses the Web Speech API for transcription.

```html
<deep-chat
  speechToText='{
    "webSpeech": true,
    "translations": {"hello": "goodbye", "Hello": "Goodbye"},
    "commands": {"resume": "resume", "settings": {"commandMode": "hello"}},
    "button": {"position": "outside-start"}
  }'
  introMessage='{"text": "Click the microphone to start transcribing your speech."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

--------------------------------

### Audio Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenRouter.mdx

Upload audio files alongside text prompts for speech understanding. Requires a model with audio capabilities.

```APIDOC
## Audio Example

### Description
Upload audio files alongside your text prompts for speech understanding. You must use a [model with audio capabilities](https://openrouter.ai/models?fmt=cards&input_modalities=audio).

### Request Body
```json
{
  "audio": true,
  "directConnection": {
    "openRouter": {
      "key": "placeholder key",
      "model": "openai/gpt-4o-audio-preview"
    }
  }
}
```

### Request Example (HTML)
```html
<deep-chat
  directConnection='{
    "openRouter": {
      "key": "placeholder key",
      "model": "openai/gpt-4o-audio-preview"
    }
  }'
  audio="true"
></deep-chat>
```
```

--------------------------------

### Handle Speech-to-Speech Session Start and Stop with Functions

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Use this method to define callback functions for when the speech-to-speech conversion session starts or stops. Ensure the `realtime` option is enabled for direct connections.

```javascript
chatElementRef.directConnection.openAI.realtime.events = {
  started: () => console.log('Session started'),
  stopped: () => console.log('Session stopped'),
};
```

--------------------------------

### Vision Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Gemini.mdx

Upload images alongside your text prompts for visual understanding. The `images` and `camera` props enable this functionality.

```APIDOC
## DeepChatBrowser with Vision

### Description
Enables image uploads and camera access for visual understanding in prompts.

### Component
DeepChatBrowser

### Props
- **images** (boolean) - Required - Set to `true` to enable image uploads.
- **camera** (boolean) - Required - Set to `true` to enable camera access.
- **directConnection** (object) - Required - Configuration for direct connection, including Gemini API key.
  - **gemini** (object)
    - **key** (string) - Required - Your Gemini API key.
- **textInput** (object) - Optional - Styles for the text input container.
  - **styles** (object)
    - **container** (object)
      - **width** (string) - Optional - Width of the text input container.

### Request Example
```html
<deep-chat
  directConnection='{
    "gemini": {
      "key": "placeholder key",
    }
  }'
  images="true"
  camera="true"
  style="border-radius: 8px"
  textInput='{"styles": {"container": {"width": "77%"}}}'
></deep-chat>
```

### Note
When sending images, it is advised to set `maxMessages` to 1 to send less data and reduce costs.
```

--------------------------------

### Vision Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenRouter.mdx

Upload images alongside text prompts for visual understanding. Requires a model with vision capabilities.

```APIDOC
## Vision Example

### Description
Upload images alongside your text prompts for visual understanding. You must use a [model with vision capabilities](https://openrouter.ai/models?fmt=cards&input_modalities=image).

### Request Body
```json
{
  "images": true,
  "camera": true,
  "directConnection": {
    "openRouter": {
      "key": "placeholder key",
      "model": "openai/gpt-4o"
    }
  },
  "textInput": {
    "styles": {
      "container": {
        "width": "77%"
      }
    }
  }
}
```

### Request Example (HTML)
```html
<deep-chat
  directConnection='{
    "openRouter": {
      "key": "placeholder key",
      "model": "openai/gpt-4o"
    }
  }'
  images="true"
  camera="true"
></deep-chat>
```

### Note
When sending images, it is advised to set `maxMessages` to 1 to send less data and reduce costs.
```

--------------------------------

### Connect to Open WebUI with Full Configuration

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenWebUI.mdx

This example shows a more comprehensive connection to Open WebUI, including a placeholder key, system prompt, and model. The `style` attribute is applied for visual customization.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openWebUI": {
      "key": "placeholder key",
      "model": "llama3.2:latest"
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Basic Deep Chat Integration

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/examples/Layout/fullScreen.mdx

This snippet shows a basic integration of the Deep Chat component with predefined history and connection settings. It's suitable for getting started quickly.

```html
<deep-chat
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

--------------------------------

### Stream Handler for Real-time Updates

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/connect.mdx

This example uses a custom handler to manage streaming responses from a server. It includes setup for opening, receiving messages, and handling errors/closing. Ensure 'fetchEventSource' is available.

```js
chatElementRef.connect = {
  stream: true,
  handler: (body, signals) => {
    try {
      // this is PSEUDO CODE for creating a stream
      fetchEventSource('custom-url', {
        async onopen(response) {
          if (response.ok) {
            signals.onOpen(); // stops the loading bubble
          } else {
            signals.onResponse({error: 'error'}); // displays an error message
          }
        },
        onmessage(message) {
          signals.onResponse({text: message}); // adds text into the message bubble
        },
        onerror(message) {
          signals.onResponse({error: message}); // displays an error message
        },
        onclose() {
          signals.onClose(); // The stop button will be changed back to submit button
        },
      });
      // triggered when the user clicks the stop button
      signals.stopClicked.listener = () => {
        // logic to stop your stream, such as creating an abortController
      };
    } catch (e) {
      signals.onResponse({error: 'error'}); // displays an error message
    }
  },
};
```

--------------------------------

### Handle Speech-to-Speech Session Start and Stop with Event Listeners

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

This example demonstrates how to use standard `addEventListener` to capture 'sts-session-started' and 'sts-session-stopped' events. This approach is compatible with Vanilla JS and can be adapted for various frameworks.

```javascript
// This example is for Vanilla JS and should be tailored to your framework (see Examples)

chatElementRef.addEventListener('sts-session-started', () => {
  console.log('Session started');
});

chatElementRef.addEventListener('sts-session-stopped', () => {
  console.log('Session stopped');
});
```

--------------------------------

### Deep Chat Component with OpenAI Realtime Buttons Configuration (HTML)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Example of configuring OpenAI realtime buttons directly within the deep-chat HTML element using JSON stringification. This is useful for declarative setup in HTML.

```html
<deep-chat
  directConnection='{
    "openAI": {
      "realtime": {
        "buttons": {
          "container": {"backgroundColor": "#f7f7f7"},
          "microphone": {
            "default": {

```

--------------------------------

### Full Deep Chat Component with Remarkable Config

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/messages/styles.mdx

This example demonstrates a full Deep Chat component setup with remarkable configured for HTML and typographer. It also includes sample message history and styling, suitable for Vanilla JS applications.

```html
<deep-chat
  remarkable='{"html": true, "typographer": true}'
  history='[
    {"text": "Text containing <button>html</button>", "role": "user"},
    {"text": "Typographic text: (c)", "role": "user"}
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

--------------------------------

### Full Deep Chat Component with Error Message Configuration in HTML

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/messages/messages.mdx

This example shows a complete Deep Chat component setup in HTML, including custom error message overrides, inline styling, and demo mode with error display enabled.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  errorMessages='{
    "overrides": {
      "default": "Default error :(",
      "service": "Target service error!",
      "speechToText": "Speech to text microphone error!"
    }
  }'
  style="border-radius: 8px"
  demo='{"displayErrors": {"default": true, "service": true, "speechToText": true}}'
></deep-chat>
```

--------------------------------

### Configure OpenAI Direct Connection with Button Styles

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

This example shows how to set up a direct connection to OpenAI and customize the appearance of the microphone button. It includes SVG content for the button icon and specific filter styles for its default state.

```html
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "realtime": {
        "buttons": {
          "container": {"backgroundColor": "#f7f7f7"},
          "microphone": {
            "default": {
              "svg": {"content": "<svg xmlns=\"http://www.w3.org/2000/svg" width=\"800px" height=\"800px" viewBox=\"0 0 24 24" fill=\"none\">
<path d=\"M3 16.5C2.59 16.5 2.25 16.16 2.25 15.75V8.25C2.25 7.84 2.59 7.5 3 7.5C3.41 7.5 3.75 7.84 3.75 8.25V15.75C3.75 16.16 3.41 16.5 3 16.5Z" fill=\"#292D32"/>
<path d=\"M7.5 19C7.09 19 6.75 18.66 6.75 18.25V5.75C6.75 5.34 7.09 5 7.5 5C7.91 5 8.25 5.34 8.25 5.75V18.25C8.25 18.66 7.91 19 7.5 19Z" fill=\"#292D32"/>
<path d=\"M12 21.5C11.59 21.5 11.25 21.16 11.25 20.75V3.25C11.25 2.84 11.59 2.5 12 2.5C12.41 2.5 12.75 2.84 12.75 3.25V20.75C12.75 21.16 12.41 21.5 12 21.5Z" fill=\"#292D32"/>
<path d=\"M16.5 19C16.09 19 15.75 18.66 15.75 18.25V5.75C15.75 5.34 16.09 5 16.5 5C16.91 5 17.25 5.34 17.25 5.75V18.25C17.25 18.66 16.91 19 16.5 19Z" fill=\"#292D32"/>
<path d=\"M21 16.5C20.59 16.5 20.25 16.16 20.25 15.75V8.25C20.25 7.84 20.59 7.5 21 7.5C21.41 7.5 21.75 7.84 21.75 8.25V15.75C21.75 16.16 21.41 16.5 21 16.5Z" fill=\"#292D32"/>
</svg>"}
            }},
          "toggle": {
            "default": {
              "svg": {
                "styles": {
                  "default": {"filter": "brightness(0) saturate(100%) invert(58%) sepia(77%) saturate(282%) hue-rotate(172deg) brightness(91%) contrast(93%)" }
                }}}}}"}}}}' 
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Build and Serve Locally

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/README.md

Commands to automatically build and serve the project for local development. Use 'npm run build' followed by 'npm run serve' for production builds.

```bash
# automatically build and serve:
$ npm run start
```

```bash
# build and serve for production:
$ npm run build
$ npm run serve
```

--------------------------------

### Configure Groq Direct Connection with Function Calling (JavaScript)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Groq.mdx

Set up the direct connection for Groq, defining tools and a function handler. Ensure you replace 'placeholder-key' with your actual Groq API key.

```javascript
chatElementRef.directConnection = {
  groq: {
    chat: {
      tools: [
        {
          type: 'function',
          function: {
            name: 'get_current_weather',
            description: 'Get the current weather in a given location',
            parameters: {
              type: 'object',
              properties: {
                location: {
                  type: 'string',
                  description: 'The city and state, e.g. San Francisco, CA',
                },
                unit: {type: 'string', enum: ['celsius', 'fahrenheit']},
              },
              required: ['location'],
            },
          },
        },
      ],
      function_handler: (functionsDetails) => {
        return functionsDetails.map((functionDetails) => {
          return {
            response: getCurrentWeather(functionDetails.arguments),
          };
        });
      },
    },
    key: 'placeholder-key',
  },
};
```

```javascript
function getCurrentWeather(location) {
  location = location.toLowerCase();
  if (location.includes('tokyo')) {
    return JSON.stringify({location, temperature: '10', unit: 'celsius'});
  } else if (location.includes('san francisco')) {
    return JSON.stringify({location, temperature: '72', unit: 'fahrenheit'});
  } else {
    return JSON.stringify({location, temperature: '22', unit: 'celsius'});
  }
}
```

--------------------------------

### Customize Introductory Message with JavaScript

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/webModel.mdx

Configure the introductory web model message using JavaScript, defining custom HTML for buttons and input elements, and assigning specific classes for download, upload, and file input functionalities. This example is for Vanilla JS.

```js
// using JavaScript for a simplified example

chatElementRef.webModel = {
  introMessage: {
    initialHtml: `<button class="start">Start</button> <button class="files">Files</button> <input type="file" class="input" hidden multiple />`,
    downloadClass: 'start',
    uploadClass: 'files',
    fileInputClass: 'input',
  },
};
```

--------------------------------

### Connect to Ollama with Custom Prompt and Options

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Ollama.mdx

Configure Ollama connection with a specific system prompt and temperature option. Ensure Ollama is running locally.

```html
<deep-chat
  directConnection='{
    "ollama": {
      "system_prompt": "You are a helpful assistant.",
      "options": {"temperature": 0.7}
    }
  }'
></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "ollama": {
      "system_prompt": "You are a helpful assistant.",
      "options": {"temperature": 0.7}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Install Deep Chat with npm

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/README.md

Install the Deep Chat component using npm. This is the standard package for most web projects.

```bash
npm install deep-chat
```

--------------------------------

### Install Deep Chat for React

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/README.md

Install the Deep Chat React package if you are using React in your project. This package provides React-specific bindings.

```bash
npm install deep-chat-react
```

--------------------------------

### Connect to Groq Chat API with System Prompt and Temperature (Full Code)

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/Groq.mdx

This is a full code example for integrating with the Groq Chat API using Deep Chat. It includes the directConnection configuration with a system prompt and temperature, along with styling for the component. Remember to replace 'placeholder key' with your actual API key.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "groq": {
      "key": "placeholder key",
      "chat": {"system_prompt": "You are a helpful assistant.", "temperature": 0.7}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Connect to Open WebUI with Basic Configuration

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenWebUI.mdx

Use this snippet to establish a connection to Open WebUI with a specified model. Ensure the model name matches one available in your Open WebUI instance.

```html
<deep-chat
  directConnection='{
    "openWebUI": {
      "key": "placeholder key",
      "model": "llama3.2:latest"
    }
  }'
></deep-chat>
```

--------------------------------

### Deep Chat Status Bubble Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/connect.mdx

This example shows how to configure Deep Chat to display status messages from the server, useful for indicating progress or state changes.

```text
Messages from the server:
1: {text: "Downloading...", overwrite: true}
2: {text: "Loading...", overwrite: true}
3: {text: "Processing...", overwrite: true}
4: {text: "Ready...", overwrite: true}
```

```html
Component configuration:
<deep-chat connect='{"url": "ws://customapi.com", "websocket": true}'></deep-chat>

Messages from the server:
1: {text: "Downloading...", overwrite: true}
2: {text: "Loading...", overwrite: true}
3: {text: "Processing...", overwrite: true}
4: {text: "Ready...", overwrite: true}
```

--------------------------------

### Configure OpenAI Completions

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAICompletions.mdx

Use this to connect to OpenAI's legacy Completions API. You can set the `key` for authentication and configure `completions` properties like `max_tokens` and `system_prompt`.

```html
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "completions": {"max_tokens": 2000, "system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>
```

```html
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "completions": {"max_tokens": 2000, "system_prompt": "Assist me with anything you can"}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

--------------------------------

### Configure Direct Connection to OpenAI

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/llms.txt

Example of configuring a direct connection to OpenAI using the `directConnection` attribute. API keys should not be exposed in client code for production environments.

```html
<deep-chat directConnection='{"openAI": {"key": "sk-...", "chat": {"model": "gpt-4"}}}'></deep-chat>
```

--------------------------------

### Simple Usage Example

Source: https://github.com/ovidijusparsiunas/deep-chat/blob/main/website/docs/docs/messages/messages.mdx

Demonstrates how to enable the hidden messages indicator with a simple boolean value.

```APIDOC
## `hiddenMessages` (Simple Usage)

### Description
Enables the default hidden messages indicator by setting the `hiddenMessages` property to `true`.

### Method
Not Applicable (Configuration Property)

### Endpoint
Not Applicable (Component Property)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **`hiddenMessages`** (boolean) - Required/Optional - Set to `true` to enable the default indicator.

### Request Example
```html
<deep-chat hiddenMessages="true"></deep-chat>
```

### Response
#### Success Response (200)
Not Applicable (Configuration Property)

#### Response Example
Not Applicable (Configuration Property)
```