ai/chat-demo-frontend

Verified Publisher

By Docker

Updated 3 months ago

Responsive frontend for an AI-driven chat application, powered by Remix and Vite.

Image

2.9K

AI Chat Demo Frontend

This Docker image provides a responsive frontend for an AI-driven chat application, powered by Remix and Vite. It connects to a FastAPI backend and offers a modern, interactive chat interface with real-time streaming responses.

This image is a component of the full AI Chat Application Demo - ai/chat-demo. More information about how to run the whole demo can be found on the ai/chat-demo image.

Features

  • Real-time Chat Interface: Allows users to interact with the AI through a responsive, user-friendly interface.
  • Streaming Messages: Messages appear in real time as they’re generated by the backend.
  • Keyboard Shortcuts: Pressing Enter sends the message (Shift+Enter for a new line).
  • Tailwind CSS: Styled with Tailwind CSS for a modern and responsive design.

Prerequisites

  • Docker: Ensure Docker is installed on your system.
  • Environment Variables:
    • PORT: Port the frontend will run on (default is 3000).
    • HOST: Host for the application (default is "0.0.0.0").
  • Backend and Model Server: Requires both the backend and the model server to be running.

Quick Start

  1. Pull the Frontend Image

    docker pull ai/chat-demo-frontend:latest
    
  2. Ensure Backend and Model Server are Running

    Start the model server, followed by the backend:

    # Run the model server
    docker run -e MODEL=mistral:latest -p 11434:11434 ai/chat-demo-model:latest
    
    # Run the backend server
    docker run -e MODEL_HOST=http://ollama:11434 -p 8000:8000 ai/chat-demo-backend:latest
    
  3. Run the Frontend Container

    Start the frontend container to serve the chat interface on your specified port:

    docker run -p 3000:3000 ai/chat-demo-frontend:latest
    

    The frontend app will be accessible at http://localhost:3000.

Environment Variables

  • PORT: Sets the port for the frontend server (default is 3000).
  • HOST: Sets the host address (default is "0.0.0.0").

Frontend Usage

The frontend provides a chat interface that sends user messages to the backend API and displays the assistant’s responses in real time.

Chat Component

The frontend uses the Chat component for real-time functionality:

  • Collects user input from a form.
  • Sends user messages to the backend using the /api/v1/chat/stream endpoint.
  • Receives and displays the assistant’s responses as they are streamed from the backend.

Key Dependencies

  • @remix-run/react: Enables the use of Remix features in the frontend.
  • tailwindcss: Provides a modern and responsive UI.
  • vite: Used as the build tool for fast development and optimized production builds.

Docker Pull Command

docker pull ai/chat-demo-frontend