aoai-gpt-chat-demo

ChatGPT-like streaming chat bot powered by Azure OpenAI and GPT-4

NOTE: project and documentation in progress

About

This is a simple chat app that streams messages to and from an Azure OpenAI Services instance using a GPT-4 model deployment

Prerequisites

• Node.js >= 20.x (with npm >= v10.x)
• Azure Subscription
  • Azure OpenAI access enabled
  • Azure OpenAI Services deployed along with a GPT-4 model
    • API key for deployed service

Running Locally

1. Clone repo git clone https://github.com/cu-cit-cloud-team/aoai-gpt-chat-demo.git
2. Enter directory cd aoai-gpt-chat-demo
3. Copy .env.local.example to .env.local and fill in values
4. If using locally installed Node.js:
   1. Install dependencies npm install
   2. Run project locally npm run dev
5. If using devcontainer:
   1. Open in devcontainer (dependencies automatically installed)
   2. Run project npm run dev
6. Visit http://localhost:3001 in your browser
7. ctrl+c to stop

Features

• Chat with an Azure OpenAI GPT-4 model
• Chat responses stream in real-time for a ChatGPT-like experience
• Uses textarea for input for multi-line support
  • Focus textarea on page load
  • textarea auto-resizes as you type
  • enter key to submit message
  • shift+enter for new line
• Loading indicator next to chat response until it's finished
• Formats code blocks and other markdown inside of chat messages nicely
• Current chat history is stored in browser's local storage
• View/edit system message for chat session (e.g. "You are a helpful AI assistant")
• View/edit chat session parameters (e.g. temperature, top p, etc)
• Live token count (used/remaining) displayed for message and system message
• Change Azure OpenAI model (GPT-4, GPT-3.5, etc)
• Download current chat history as JSON
• Clear current chat history
  • Keyboard shortcut (cmd+esc) when textarea has focus
• Copy full messages and responses to clipboard
  • Copy individual code snippets (within responses) to clipboard
• Delete individual messages and responses from chat history
• Stop response that's currently streaming in (useful for long responses that aren't necessary)
• Regenerate last response
• Hosted via Azure App Service
  • Built/deployed with GitHub Actions
  • Azure App Service App locked down via AD to just our team
  • Tries to identify user from login session and personalize chat session
• Uses relative time for chat message timestamps
  • Relative time has tooltip with full timestamp
  • Tooltip shows time for same day and full date/time if older than "today"
• Theme changer with several light and dark themes
  • Defaults to light or dark based on system preference
• Responsive layout
• devcontainer for local development

Roadmap

Planned

• no new features currently under development

Potential

• Import chat session from JSON
• Multiple chat sessions
  • Sidebar with scrollable and filterable list of chat sessions
  • Stateful via local storage
  • Delete individual chat sessions
  • Export individual chat sessions to JSON
  • Import chat sessions from JSON

Uses

• React
  • JavaScript framework
• Next.js
  • React framework
• Vercel AI SDK
  • JS Library for AI-powered UIs
• LangChain.js
  • JS Library for interacting with LLMs (e.g. GPT-4)
• Tailwind CSS
  • CSS framework
• daisyUI
  • Component library for Tailwind CSS
• Azure OpenAI Service
  • API and model deployments (GPT-4 and GPT-3.5)
• Azure App Service
  • Application hosting and user authentication
• GitHub Actions/Workflows
  • Build/publish to Azure App Service
  • Build notifications
  • Create GH Release
  • Dependency updates