Copy, Paste, Edit & Deploy

LexiStream - A simple code snippet for rendering markdown in real-time built for OpenAi GPT

Hello there! Thank you for stopping by. I’m thrilled to share this project with you and I’m eager to make it better with your help. Whether you’re here to use the project, report a bug, or contribute, your input is highly appreciated.

This guide introduces LexiStream, a library designed to streamline the creation of a chatbot interface that interacts seamlessly with OpenAI's GPT API. Ideal for developers looking to integrate advanced conversational capabilities without being tied to a specific backend architecture.

Features

• Real-time streaming of chat responses.
• Customizable UI components.
• Easy integration with any web application.
• No complex build tools required.

Github-intro.mp4

Table of contents

• Installation & Usage
• Configuration Options
• Methods
• Styling
• Language Syntax Highlighting
• Future Roadmap
• License

Installation & Usage

Note

Here example projects: Flask LexiStream Implementation Example

Important

Your backend needs to support Server-Sent Events (SSE) to stream data to the client effectively. Replace every newline character ('\n') with ' <br> ' since '\n' does not behave as expected in SSE; it seems to disappear. Additionally, you should conclude your streaming with 'data: finish_reason: stop\n\n' to ensure the client side recognizes that the stream has ended. Without this specific message, LexiStream will continue to wait for more data and won't close the stream.

Short Tutorial

Video.Tutorial.mp4

Include the LexiStream.js script in your project:(You can download from release page & also you can use find in src folder)

<script type='module' src="path/to/LexiMark.js"></script>
<script src="path/to/LexiStream.js"></script>

Setup your HTML:

<div id="chat-box">
    <input type="text" id="input-box" placeholder="Type your message here...">
    <button id="start-button">Start</button>
    <button id="stop-button" disabled>Stop</button>
</div>

Initialize LexiStream in your JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
    const config = {
        box: '#chat-box',
        sendContent: '#input-box',
        start: '#start-button',
        stop: '#stop-button',
        sendRequest: '/send',
        listen: '/stream'
    };

    const chatInterface = new LexiStream(config);
});

Configuration Options

• box: Selector for the chat box container.
• sendContent: Selector for the input box.
• start: Selector for the start button.
• stop: Selector for the stop button.
• sendRequest: URL for sending messages.
• listen: URL for receiving streamed messages.

Methods

• startStream(): Starts the message stream.
• stopStream(): Stops the message stream.
• sendMessage(message): Sends a message to the server.

Styling

You can use custom tag or class names to style the chat interface. The default tags are div for user messages and lexi-mark for server messages. You can customize these tags in the LexiStream configuration object.

const config = {
  customInputTag: 'input',
  customOutputTag: 'output',
  customErrorTag: 'error',
  customLoadingTag: 'loading'
};

const chatInterface = new LexiStream(config);

See advanced usage for more customization options. Link

Language Syntax Highlighting

LexiStream uses the LexiMark library for rendering markdown text and syntax highlighting. You can customize the syntax highlighting theme by including the desired PrismJS theme in your project. The default theme is prism-twilight.css. Read LexiMark documentation for more details. LexiMark

Future Roadmap ::

• Task 1: Make a full example with a backend.
• Task 2: Add a bar for the user to select the model, TTS, and STT etc.

Advance

LexiStream is highly customizable and can be configured to fit your specific needs. LexiStream

Contributors

Community & contact

• Github Discussion. Best for: sharing feedback and asking questions.
• GitHub Issues.
• Twitter.

License

No license restrictions, but attribution is appreciated.