Askwell - AI Chat App UI Kit HTML Template

Askwell is an AI chat app UI kit in plain HTML, CSS and JavaScript. You get a complete chat screen with streaming answers, a prompt library, a playground, an agent-runs page and a chat widget for any website. It runs in demo mode out of the box, and connects to your own model with two lines of settings. No framework and no build step.

The 9 screens

• Chat with a conversation list, search, rename, pin, delete and export
• New chat screen with suggestion cards
• Prompt library with fill-in variables
• Playground to test a prompt on one model or two side by side
• Agent runs with steps, progress, log and result
• Components, one page with every interface part
• Sign in, with create account and reset password
• Shared conversation, a read-only page
• Chat widget shown on a sample website

Good to know before you buy

• This is an interface kit (front end). It does not include an AI model, an API key, a database or user accounts. You connect your own
• In demo mode the answers are scripted samples, so you can try everything without a server
• The adapters and proxies were tested against a mock server that speaks the OpenAI streaming format. They were not tested against every provider
• Conversations are saved in the browser until you connect your own backend. The guide shows where
• Attached files are passed to your code. Uploading them is up to you
• Dictation uses the speech recognition of the browser (Chrome, Edge, Safari)
• Fonts load from Google Fonts. Everything else is inside the download
• Made for current versions of Chrome, Edge, Firefox and Safari

In the download

• 9 HTML pages
• 1 CSS file and small, commented JavaScript files (no libraries)
• The chat widget as one file, plus its source
• Proxy code for Node and Cloudflare Workers
• Documentation page, README, changelog and license

Features

• Streaming answers that arrive word by word, with Stop, edit and resend, answer again with versions, copy, and thumbs up or down
• Safe Markdown: tables, lists, task lists, quotes, links and code blocks with a copy button and colouring. HTML in answers is escaped and unsafe links are removed
• Message box that grows, takes files (button, drag and drop, paste), has a Search switch, a dictation button and a "/" picker for saved prompts
• Steps and sources: show what the assistant did and link the sources it used
• Adapters: demo (scripted), OpenAI-format streaming, and plain text streaming. Writing your own is one small function
• Proxy server code for Node and for Cloudflare Workers, so your API key stays on the server
• Chat widget in one file: one script tag, styles isolated in a shadow root, works on any site
• Light and dark themes, five accent colours, and an optional serif typeface for answers
• Keyboard friendly: shortcuts, visible focus, menus and dialogs that work without a mouse
• Responsive from a 320 px phone to a wide desktop screen

Requirements

• A current version of Chrome, Edge, Firefox or Safari
• A text editor
• To try it: nothing else. Demo mode works straight from the folder
• To go live: your own AI model or API key, and a small server or Cloudflare Worker to keep the key private (proxy code is included)

Instructions

1. Unzip the download and open index.html in your browser. The kit starts in demo mode with scripted answers
2. Open assets/js/config.js to set the name, the models and the adapter
3. To connect a model, run one of the proxies from the server folder with your API key and point the adapter at it
4. To add the chat widget to a site, include widget/askwell-widget.js with one script tag
5. The full guide is in documentation.html