felixbade / assistant

Web UI for ChatGPT API. No back-end, mobile-friendly, continuously user-tested

Assistant – Web UI for ChatGPT API

https://assistant.bloat.app

A mobile-friendly human interface for ChatGPT API. There is no back-end server, so you can easily host your own instance (see details below).

See CHANGELOG.md for what’s new.

🤔 Why API instead of ChatGPT Plus?

• gpt-3.5-turbo: Cheap token-based cost, instead of flat 20$/mo
• gpt-4: Unlimited requests (requires early access)
• No logouts – if OpenAI started revoking API keys weekly, a lot of big SaaS products would get very angry
• Private – OpenAI’s API policy says your prompts won’t be used for developing, unlike in the playground.

🔩 Features

• Very polished, mobile-friendly UI
• PWA support: can be added to the phone’s home screen or installed on your computer as a Chrome app
• Requests go directly from the browser to OpenAI – no backend server
• Settings and API key are stored in localStorage
• Unlimited conversation length by sending only x latest messages to the API (configurable)
• Markdown rendering
  • Bold, italic
  • Embedded links
  • Code keywords
  • Code blocks
  • Tables
  • Images
  • Horizontal lines
• Automatic dark/light theme
• Export the conversation as markdown
• Screenshot the whole conversation even if it doesn't fit the window
• Customize the assistant’s behind-the-scenes system message prompt
• Send follow-up messages even before the previous answer is complete (processed in parallel)
• Change the model with ctrl+M
• Open Assistant with an initial prompt if you want to make integrations into other apps. Example: https://assistant.bloat.app/#q=hello%20there

🚚 In the future

• Search old chats with GPT embeddings (meaning your search words don’t need to be an exact match)
• Speak your messages using the Whisper API

🔧 Hosting your own version

• npm install
• npm run build:prod
• The bundle will go under dist/. Copy those files somewhere so they show up as a web page (for example GitHub Pages or Nginx).

💙 Contributing

The best way to contribute is by adding feature requests and bug reports to the GitHub issues – you don’t need to be a programmer for that. See CONTRIBUTING.md for details.

assistant's Issues

Move Marked and DOMPurify imports to npm

This would allow bundling everything and removing the imports from the HTML head.

Also a floating version number in Marked is a bit sus because we have this.

Search old messages with a LLM

After #12, it would be powerful if old messages could be searched with e.g. GPT embeddings.

Fast questions are incorrectly ordered

What I did: entered two questions really fast before the AI had a chance to respond.

I'm expecting both of my messages to be before the responses (like in a chat if I sent two messages quicker than I got an answer for). This is how it should be.

However, I'm also expecting the assistant's responses to be ordered such that the response to the first question is on the top of the two. This is not the case here. They might be ordered by the time of response arrival, but they should be ordered by the time of request sent.

PWA boilerplate

It should be possible to add the app to tge home screen. While not usable without an internet connection, it would be easier to use without browser UI

Can't scroll compose message view with super long text

If the text is longer than what fits on the screen, it's not possible to scroll up and see the beginning of the message.

Add code formatting support

When the answer contains a code snippet add the proper styling around it for readability and easy copy paste.

Animate the "three dots" loading icon

Animating the loading icon lets the user know that something is currently being actively loaded. Static three icons make the user think that nothing is happening, or that the page is frozen (essentially the same thing).

enter key confilct with chinese typewriting

keyCode == 13
will fix this

    textbox.addEventListener('keydown', (event) => {
        if (event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.shiftKey) {
            event.preventDefault()
            submitMessageForm()
            updateTextareaSize(textbox)
        }
    })

Add prompt history to client

This is quite a big feature, but the prompt + result history could be saved to the client. For example indexedDB. There would need to be a UI to browse old prompts.

Additionally it would be nice to be able to export the history in a hybrid of machine-readable and human readable format. But that’s not strictly needed for this issue.

Improperly escaped messages

https://assistant.bloat.app/#q=how%20to%20style%20%3Cinput%20type%3D%22text%22%3E

What happens:

Expected behavior:

XSS

All user-supplied and AI-supplied content goes through DOMPurify before they are added to the DOM, so this shouldn't be an XSS vector, but this is still not how the app should behave.

Since the script tag is sent to the assistant, it could also make the user feel uneasy whether the script tag ended up to the DOM or not:

https://assistant.bloat.app/#q=%3Cscript%3Ealert()%3C%2Fscript%3E

At the moment the chat API gets the unsanitized text while the UI gets a sanitized one. It is not a security issue (within the scope of this project anyway), since ChatGPT allows unsanitized user input, but it's confusing.

Markdown

&, < and > should be escaped. There's no reason to support any kind of HTML tags in either the user's or the AI's messages – apart from what comes out of the Markdown rendering.

However, Markdown-escaped code renders correctly at the moment, and that shouldn't be broken, since it's important for code examples.

https://assistant.bloat.app/#q=how%20to%20style%20%60%3Cinput%20type%3D%22text%22%3E%60

Now:

Potential fix could break it:

AI content format

The behind-the-scenes conversation with ChatGPT should happen in Markdown (not rendered HTML), but sanitized.

Make chat area maximum width fit 80 monospace characters

Use ChatGPT API

https://platform.openai.com/docs/guides/chat

a button in settings to save full conversation as pdf or jpg would be powerful

Allow for question in url param

Add possibility to parse question directly from URL params,

url?q="hi chatgpt!"

This would make it faster to open a new conversation from ex alfred or other launcher.

Show intro page if API key is not set

• why would someone want to use this instead of ChatGPT (token-based pricing)
• How to get the API key
• Tip for adding to homescreen

Make code easier to copy

The official ChatGPT web UI makes it really easy to copy individual code blocks by having copy buttons for each. Not sure if that's the way to do it, but copying code blocks should be easier.

Add a "copy to clipboard" icon to each answer for faster UX

Add service worker code to be able to install as a Chrome app

This app doesn't work without an internet connection, so service worker is a bit funny solution. However, being able to install the app as a ”native” app on desktop would be powerful for app changing.

Add push to talk

This would add a microphone button to the assistant UI, transcribe the text with Whisper (same API key works for that as well), and then send the text to ChatGPT. I think the original audio doesn't need to be saved, just the transcription is sufficient.

Originally suggested by @smfrue in the transcribe project.

Add deploy script with .env

Make prompt brief configurable

Stream partial completions

https://platform.openai.com/docs/api-reference/chat/create#chat/create-stream

Display API errors in UI, not just console

For example:

• no internet
• incorrect API key
• too long input

Title bar theme color in dark mode shouldn’t be white

It should be possible to specify a darke theme color: https://css-tricks.com/meta-theme-color-and-trickery/

Add typing indicator when waiting for API response

Even non-animated can be cool

Add favicon for better looks on homescreen

https://www.favicon-generator.org

https://yt3.ggpht.com/a/AATXAJzYT1rumwOdi0mza2hb91s3-7nQVtUSVDEBXQ=s900-c-k-c0xffffffff-no-rj-mo

Compose box scollbar is visible outside the rounded corner

Add syntax highlighting to code blocks

Long lines of code render incorrectly

The result seems to contain both pre and code.

Typing indicator dots are escaped

Scrollbars are white in dark mode

Scroll down on new message

Replace stop sequence with ”””

Output should be allowed to be multi line

When message history is long, some is hidden under compose box

max_tokens parameter

You set the max_tokens parameter to what number?

Message box active highlight is too bright in dark mode

Get rid of the white glow.

Follow up questions

Make it possible to ask follow up questions and iteratively form a conversation

GitHub link colors are not accessible in dark mode

Contrast is 3.83, which is less than WCAG minimum 4.5.

Add boilerplate for JS modules

index.js is already 250 lines of code.

Add accumulated cost calculator

Using OpenAI tokenizer? Or if it’s complicated, just number of words.

Add a conversation reset button

Right now the app needs to be force quit every time. Related to #12

Sent links are not visible

Not WCAG compatible :D

Looking at Signal and Telegram, they have solved this issue by making sent links the same color as normal text and adding an underline. iMessage doesn’t display links at all, only the rich preview.

Signal and Telegram also have an underline in the received links. Telegram uses an accent color for the text where as Signal doesn’t.

Change contrast of initial open ai popup

Imo there is not enough contrast for good readability. Check this tool for good contrast ratio.

Add darkmode to settings

Add settings page for API key + prompt customization

Implementing #5 first probably makes sense.

Add favicon

The same icon that's used for app icon + rounded corners and transparent background, or something

Make text input not zooming on focus on mobile safari

It is too small. It would also be useful for the UX for stuff to be bigger in general, both for mobile and desktop usage

Ability to sort prompts via topic

Ability to sort previous prompts via topic

Move question box down (chat style)

Not sure how to do this so that the vertical position perfectly aligns with the keyboard, but it should be possible, since chat.openai.com does it.

Question text box doesn’t show the whole text

Should be <textbox> instead of <input type="text">

Additionally, the textbox should scale automatically and not show the resize handle