deiucanta / chatpad

Not just another ChatGPT user-interface!

Chatpad AI

Premium quality UI for ChatGPT

Web App & Desktop App

Recently, there has been a surge of UIs for ChatGPT, making it the new "to-do app" that everyone wants to try their hand at. Chatpad sets itself apart with a broader vision - to become the ultimate interface for ChatGPT users.

⚡️ Free and open source

This app is provided for free and the source code is available on GitHub.

🔒 Privacy focused

No tracking, no cookies, no bullshit. All your data is stored locally.

✨ Best experience

Crafted with love and care to provide the best experience possible.

---

Self-host using Docker

docker run --name chatpad -d -p 8080:80 ghcr.io/deiucanta/chatpad:latest

Self-host using Docker with custom config

docker run --name chatpad -d -v `pwd`/config.json:/usr/share/nginx/html/config.json -p 8080:80 ghcr.io/deiucanta/chatpad:latest

One click Deployments

Give Feedback

If you have any feature requests or bug reports, go to feedback.chatpad.ai.

Contribute

This is a React.js application. Clone the project, run npm i and npm start and you're good to go.

Credits

• ToDesktop - A simple way to make your web app into a beautiful desktop app
• DexieJS - A Minimalistic Wrapper for IndexedDB
• Mantine - A fully featured React component library

chatpad's Issues

Option to configure API key for instance

For my use-case I'd like to host chatpad in a private space for several users who will have access.
Current implementation is great for privacy and shared deployments for different users, but it's a bit hard to explain non-technical users how to insert their key and configure model for usage.

It would be great if there would be an option to configure an API key which will be used for all users.
For the docker deployment(hoping #8 is getting merged soon :) ) it would be great to have option to define an env variable which will be used for this.

Since this is a static front-end applications I can suggest 2 options to implement this atm:

• to use some bash scripting for docker container startup and embed key value in some special placeholder.
  This option would require to define some variable in code and set a unique value which could be replaced when container will start. While I've used similar approach in the past, and it worked, but it seems to be very hacky way for this.
• to write a key into some file and read it with regular HTTP request served by nginx. Application than can just request key and use it.

Option 2 seems to be less secure than option one, but both options will have a key in plaintext when just browsing source. For my use-case it is safe to have key in plaintext without any authentication since it will only be reachable inside my network, so there is no risk of leaking key to public.

I will be happy to help with scripting/docker setup if this will be implemented and any help will be needed.

Improve the docker workflow

Add semantic versioning, automatic latest tag, etc

Streaming support

Amazing work getting a quality GPT client that's open source and privacy focused.

It would be great to see the tokens streaming. Especially for slower models such as GPT-4.

Keep up the great work!

Context limitation

The context limitation for each New Chat is limited under ~4800... I assume this shouldn't be as in openai website the context can continue without a limit.

Feature request: Code highlight

It would be very good to add code highlighting as it happens in chatGPT.

I changed the code using the same libraries you used and the result was this:

To allow this just import the library import { Prisma } from '@mantine/prism';
and changed the code, as below:

                code: ({ node, inline, className, children, ...props }) =>
                  inline ? (
                    <Code {...props} children={children} />
                  ) : (
                    <Box sx={{ position: "relative" }}>
                      {className ? (
                        <Prism
                          language={
                            className.replace("language-", "") as Language
                          }
                        >
                          {getCode(children)}
                        </Prism>
                      ) : (
                        <Code block {...props} children={children} />
                      )}

Show error and allow retries for requests that fail with 429

Currently, when a request fails with 429, nothing is shown to the user and it just looks like the AI is infinitely typing. This was very confusing for me the first time I encountered the error.

I also suggest adding some sort of ability to retry failed requests.

Feature request - Stop generate and edit funtion

Need to button to stop generate and edit the prompt

Ring a bell when a response is sent back

Hello,

I was wondering if you could have a setting to have chatpad ring a bell or otherwise make a noise whenever a response is sent back. With some of the API's, the responses are slow enough that I lose focus waiting. I'd like a notification of some sort, and not just a system one.

Chatpad is great though! Very glad I don't have to build something like this myself.

Loses API Key?

After a few prompts, the app claims to no longer have an API key, and the setting to input one no longer accepts input and is disfigured.
This persists after clearing cache, restarting the app and reinstalling.

Strangely enough, this is only true for the one broken chat. I can start new chats as normal.

api.openai.com still used when custom is in settings

Whenever OpenAI Type is set to "Custom (e.g. Azure OpenAI)", Auth Key is selected, and the Base and Version are provided with API Key from Azure, the app still tries to use api.openai.com to do the chatcompletion. In doing so, it fails because API key is invalid.

support

support

Add the website URL

You can do this in project settings.

Feature request: Ability to fully customize the system role

It looks like the system role is either constructed from the personality drop down for regular chats, or hard coded to You are ChatGPT, a large language model trained by OpenAI for prompt-based chats. It would be nice if there were also some way to specify a fully custom system role for a chat session. Maybe when creating a prompt the user could specify whether that prompt should be sent as a user role or the system role.

gpt-4 model error

when choosing got-4 in settings i get "The model: gpt-4 does not exist"

:rocket: Remove the "Download Desktop App" button from Chatpad desktop

This is a issue to be closed later ontop of the PR

All unrecognized errors show up as API key issues

chatpad/src/routes/ChatRoute.tsx

Lines 163 to 178 in 0f7e2d4

	} catch (error: any) {
	if (error.toJSON().message === "Network Error") {
	notifications.show({
	title: "Error",
	color: "red",
	message: "No internet connection.",
	});
	} else {
	notifications.show({
	title: "Error",
	color: "red",
	message:
	"You OpenAI API Key is not active or has expired. Please set a new API Key",
	});
	}
	} finally {

As written here, all errors in sending chats will appear as API key issues, except for network errors.
For example, if the sentence is too long, it is known that code: "context_length_exceeded" will be returned, so it can be determined.
The message will return the current number of tokens, so telling the user to reduce it will make the app more user-friendly.

I can create a PR if needed, but it may take some time.

.htapasswd option

Hi,
I am trying to secure access to my chatpad.ai application running inside docker on my vps.

simply adding the following to my nginx website.conf:

    auth_basic "Administrator’s Area";
    auth_basic_user_file /etc/nginx/.htpasswd;

After this change, when I try to visit my application and after confirming credentials, the application is not loaded and in the console, there are these errors:

`
Object { _e: Error, name: "DatabaseClosedError", message: "InvalidStateError A mutation operation was attempted on a database that did not allow mutations.\n InvalidStateError: A mutation operation was attempted on a database that did not allow mutations.", inner: {…}, stack: "" } index.020772d9.js:31:72520

Object { _e: Error, name: "DatabaseClosedError", message: "InvalidStateError A mutation operation was attempted on a database that did not allow mutations.\n InvalidStateError: A mutation operation was attempted on a database that did not allow mutations.", inner: {…}, stack: "" } index.020772d9.js:31:72520

Object { _e: Error, name: "DatabaseClosedError", message: "InvalidStateError A mutation operation was attempted on a database that did not allow mutations.\n InvalidStateError: A mutation operation was attempted on a database that did not allow mutations.", inner: {…}, stack: "" }
`

Is there any option to secure the app under username/password protection so it can not be visited by everyone?

Thanks for the advice.

vercel部署报错

Error: The file "/vercel/path0/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project.

00:36:20.831 | Learn More: https://err.sh/vercel/vercel/now-next-routes-manifest
00:36:20.960 | NEXT_NO_ROUTES_MANIFEST: The file "/vercel/path0/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project.

Feature request: Save chat's history inside the server storage

Hello!

I have a suggestion for a new feature to add to the web app version.

It would be really helpful if the user's chat history could be saved locally, directly inside the server (maybe inside a SQLite db). This would allow for the sharing of past chats across multiple devices, making it more convenient and accessible.

Thank you and kind regards.

Add deploy buttons

• using Easypanel
• using Netlify
• using Vercel

Improper counting of words for messages typed in Slavic languages (Ukrainian, Belarusian, Russian, etc.)

It appears that the front-end is not properly counting the number of words in the text that is in Slavic languages based on Cyrillic alphabet, and is only counting the number of words in the part of the text that is in Latin characters.

Netlify Support?

A little out of touch with react.js at the moment, is there an easy way to get this running via netlify? If so you would be able to add a deploy to netlify button, would allow people to fork, modify, and deploy to netlify with a custom domain in minutes.

Calculate cost for different models

What is the word count used for?

If I understand it correctly, all that matters (to the API usage and cost) is the token count. I'm not sure what the word count is for? Also when the model returns non-English content the regexp would break.

Request: EasyPanel receipt

Would be Great :)

add support ARM64 for the docker container

It would be really useful for everyone who likes self-hosted services.
I checked, now it supports only linux/amd64
Please add possibility to use your soft for ARM64
thank you in advance!

User Login

Would be nice to have a login option to secure the webinterface.

Add support markdown

Support for Azure OpenAI Service

Hi!

Azure has their OpenAI Service which implements an API that is a bit different. Would be cool to have support for that as well!

plugins integration suggestion

hej @deiucanta love your chatpad project!👏
How about integrating getitAI's open Plugin Store for easy plugin installs? (https://www.getit.ai/gpt-plugins) Let's chat for 15 mins: https://calendly.com/d/z4j-cb5-h2y/getitai-devs

in safari on iOS the message input field jumps up and down when typing

see video:

RPReplay_Final1680248802.mp4

Optimize workflow

The build should happen outside of Dockerfile since it takes a lot of time to build for ARM using QEMU

message input field loses focus

Hi!

I'm using the web app and whenever I send a message the message input field loses focus and I need to set the focus to the message input box again.

Is there something I can do to fix that?

Cheers

Kamil

Feature Request / Idea : Multi User Support

Hello, I was thinking that a multi user support system could potentially be great for the system. LDAP or OpenID/oAuth2 support could be really for SMB usage, with some type of log output.

:rocket: Write the ElectronJS app to provide more customizability

Still built on top of react, just a few changes. You'll be able to build for web, mac, windows, and linux!

Easily swap between GPT-3.5 and GPT-4

Just came across Chatpad and it's amazing, thank you so much for creating this 😄

I would love to have a feature like ChatGPT Plus in which I can toggle between GPT3.5 and GPT4 easily.

Most of the time I'd be using (and should default to) GPT-3.5 due to the speed and cost, but sometimes, I need larger context windows so I save my complicated queries/prompts for GPT-4.

Link to Easypanel install gives 404

I was excited to see a quick like to the amazing Easypanel. It gave a 404. I'm very sad now.

The one-click deployment to Netlify doesn't work, fails on Build

Here is the build log, something to do with NextJS plugins.

8:59:21 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
8:57:44 PM: build-image version: 1ae4e4d7d5e3544ab1eb7f270391cdbb47c1e1e5 (focal)
8:57:44 PM: buildbot version: 1ae4e4d7d5e3544ab1eb7f270391cdbb47c1e1e5
8:57:44 PM: Fetching cached dependencies
8:57:45 PM: Failed to fetch cache, continuing with build
8:57:45 PM: Starting to prepare the repo for build
8:57:45 PM: No cached dependencies found. Cloning fresh repo
8:57:45 PM: git clone --filter=blob:none https://github.com/deiucanta/chatpad
8:57:45 PM: Preparing Git Reference refs/heads/main
8:57:47 PM: Starting to install dependencies
8:57:47 PM: Python version set to 3.8
8:57:47 PM: Attempting Ruby version 2.7.2, read from environment
8:57:48 PM: Using Ruby version 2.7.2
8:57:48 PM: Started restoring cached go cache
8:57:48 PM: Finished restoring cached go cache
8:57:48 PM: go version go1.19.10 linux/amd64
8:57:49 PM: Using PHP version 8.0
8:57:50 PM: v18.16.1 is already installed.
8:57:50 PM: Now using node v18.16.1 (npm v9.5.1)
8:57:50 PM: Enabling Node.js Corepack
8:57:50 PM: Started restoring cached build plugins
8:57:50 PM: Finished restoring cached build plugins
8:57:50 PM: Started restoring cached corepack dependencies
8:57:50 PM: Finished restoring cached corepack dependencies
8:57:50 PM: Started restoring cached yarn cache
8:57:50 PM: Finished restoring cached yarn cache
8:57:50 PM: No yarn workspaces detected
8:57:50 PM: Started restoring cached node modules
8:57:50 PM: Finished restoring cached node modules
8:57:51 PM: Installing npm packages using Yarn version 1.22.19
8:57:51 PM: yarn install v1.22.19
8:57:51 PM: warning package.json: dependencies has dependency @types/react with range 18.0.28 that collides with a dependency in devDependencies of the same name with version ^18.0.28
8:57:51 PM: warning package.json: dependencies has dependency @types/react-dom with range 18.0.11 that collides with a dependency in devDependencies of the same name with version ^18.0.11
8:57:51 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
8:57:51 PM: warning chatpad: dependencies has dependency @types/react with range 18.0.28 that collides with a dependency in devDependencies of the same name with version ^18.0.28
8:57:51 PM: warning chatpad: dependencies has dependency @types/react-dom with range 18.0.11 that collides with a dependency in devDependencies of the same name with version ^18.0.11
8:57:51 PM: [1/4] Resolving packages...
8:57:51 PM: [2/4] Fetching packages...
8:58:10 PM: [3/4] Linking dependencies...
8:58:19 PM: [4/4] Building fresh packages...
8:58:19 PM: Done in 28.35s.
8:58:19 PM: npm packages installed using Yarn
8:58:20 PM: Install dependencies script success
8:58:20 PM: Starting build script
8:58:21 PM: Detected 2 framework(s)
8:58:21 PM: next at version 13.2.4
8:58:21 PM: parcel at version 2.8.3
8:58:21 PM: Section completed: initializing
8:58:22 PM: ​
8:58:22 PM: Netlify Build
8:58:22 PM: ────────────────────────────────────────────────────────────────
8:58:22 PM: ​
8:58:22 PM: ❯ Version
8:58:22 PM: @netlify/build 29.15.3
8:58:22 PM: ​
8:58:22 PM: ❯ Flags
8:58:22 PM: baseRelDir: true
8:58:22 PM: buildId: 64a8b4837ed34f2c122eafe3
8:58:22 PM: deployId: 64a8b4837ed34f2c122eafe5
8:58:22 PM: ​
8:58:22 PM: ❯ Current directory
8:58:22 PM: /opt/build/repo
8:58:22 PM: ​
8:58:22 PM: ❯ Config file
8:58:22 PM: No config file was defined: using default values.
8:58:22 PM: ​
8:58:22 PM: ❯ Context
8:58:22 PM: production
8:58:22 PM: ​
8:58:22 PM: ❯ Installing plugins
8:58:22 PM: - @netlify/[email protected]
8:58:32 PM: ​
8:58:32 PM: ❯ Using Next.js Runtime - v4.39.0
8:58:33 PM: ​
8:58:33 PM: @netlify/plugin-nextjs (onPreBuild event)
8:58:33 PM: ────────────────────────────────────────────────────────────────
8:58:33 PM: ​
8:58:33 PM: No Next.js cache to restore.
8:58:33 PM: Netlify configuration property build.environment.NEXT_PRIVATE_TARGET value changed.
8:58:33 PM: ​
8:58:33 PM: (@netlify/plugin-nextjs onPreBuild completed in 13ms)
8:58:33 PM: ​
8:58:33 PM: Build command from Netlify app
8:58:33 PM: ────────────────────────────────────────────────────────────────
8:58:33 PM: ​
8:58:33 PM: $ yarn build
8:58:34 PM: yarn run v1.22.19
8:58:34 PM: warning package.json: dependencies has dependency @types/react with range 18.0.28 that collides with a dependency in devDependencies of the same name with version ^18.0.28
8:58:34 PM: warning package.json: dependencies has dependency @types/react-dom with range 18.0.11 that collides with a dependency in devDependencies of the same name with version ^18.0.11
8:58:34 PM: $ parcel build
8:58:34 PM: Building...
8:58:38 PM: Bundling...
8:58:38 PM: Packaging & Optimizing...
8:59:16 PM: ✨ Built in 41.90s
8:59:16 PM: dist/index.html 778 B 449ms
8:59:16 PM: dist/favicon.e776fd66.png 6.04 KB 231ms
8:59:16 PM: dist/index.9754b565.js ⚠️ 2.31 MB 37.23s
8:59:16 PM: dist/index.80919bb6.css 416 B 239ms
8:59:16 PM: dist/index.c8fe9a3b.js ⚠️ 2.31 MB 37.17s
8:59:16 PM: Done in 42.64s.
8:59:16 PM: ​
8:59:16 PM: (build.command completed in 42.8s)
8:59:16 PM: ​
8:59:16 PM: @netlify/plugin-nextjs (onBuild event)
8:59:16 PM: ────────────────────────────────────────────────────────────────
8:59:16 PM: ​
8:59:16 PM: ​
8:59:16 PM: Plugin @netlify/plugin-nextjs failed
8:59:16 PM: ────────────────────────────────────────────────────────────────
8:59:16 PM: ​
8:59:16 PM: Error message
8:59:16 PM: Error: The directory /opt/build/repo/.next does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory.
8:59:16 PM: In most cases it should be set to .next, unless you have chosen a custom distDir in your Next config.
8:59:16 PM: If you are using next export then you should set the environment variable NETLIFY_NEXT_PLUGIN_SKIP to true.
8:59:16 PM: ​
8:59:16 PM: Plugin details
8:59:16 PM: Package: @netlify/plugin-nextjs
8:59:16 PM: Version: 4.39.0
8:59:16 PM: Repository: git+https://github.com/netlify/next-runtime.git
8:59:16 PM: npm link: https://www.npmjs.com/package/@netlify/plugin-nextjs
8:59:16 PM: Report issues: https://github.com/netlify/next-runtime/issues
8:59:16 PM: ​
8:59:16 PM: Error location
8:59:16 PM: In onBuild event in @netlify/plugin-nextjs from Netlify app
8:59:16 PM: ​
8:59:16 PM: Resolved config
8:59:16 PM: build:
8:59:16 PM: command: yarn build
8:59:16 PM: commandOrigin: ui
8:59:16 PM: environment:
8:59:16 PM: - NEXT_PRIVATE_TARGET
8:59:16 PM: publish: /opt/build/repo/.next
8:59:16 PM: publishOrigin: ui
8:59:16 PM: plugins:
8:59:16 PM: - inputs: {}
8:59:16 PM: origin: ui
8:59:16 PM: package: '@netlify/plugin-nextjs'
8:59:17 PM: Caching artifacts
8:59:17 PM: Started saving node modules
8:59:17 PM: Finished saving node modules
8:59:17 PM: Started saving build plugins
8:59:17 PM: Finished saving build plugins
8:59:17 PM: Started saving corepack cache
8:59:17 PM: Finished saving corepack cache
8:59:17 PM: Started saving yarn cache
8:59:20 PM: Finished saving yarn cache
8:59:20 PM: Started saving pip cache
8:59:20 PM: Finished saving pip cache
8:59:20 PM: Started saving emacs cask dependencies
8:59:20 PM: Finished saving emacs cask dependencies
8:59:20 PM: Started saving maven dependencies
8:59:20 PM: Finished saving maven dependencies
8:59:20 PM: Started saving boot dependencies
8:59:20 PM: Finished saving boot dependencies
8:59:20 PM: Started saving rust rustup cache
8:59:20 PM: Finished saving rust rustup cache
8:59:20 PM: Started saving go dependencies
8:59:20 PM: Finished saving go dependencies
8:59:21 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
8:59:21 PM: Failing build: Failed to build site
8:59:22 PM: Finished processing build request in 1m37.436s

Missing send button when using a keyboard attached tablet

While trying to use the chatpad on my tablet with a keyboard attached, if I press enter to attempt to send a message, it actually does an enter and drops down a line. I also tried shift+enter and found the same results. There is no available send button to use instead.

Feature Request - Write to DB instead of browser storage

CUrrently only saves prompts and previous chats into the browser storage. It would be great to save the chats and prompts into a DB within Docker so they are remembered when accessing the Docker app across different devices.

Seems it only can deployed via docker

Seems it only supports docker deployment, am I correct?

I tried Vercel and Netlify. Both report errors and failed to build.

Netlify error:
Error: The directory "/opt/build/repo/.next" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory.

Vercel error:
Error: The file "/vercel/path0/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project.

In addition, Cloudflare Pages also report errors.

blank page on opening chatpad

Just installed chatpad on umbrel, unfortunatly after installing when I open app I just get a blank screen, no option to insert chatgpt private key

I am using windows with brave browser, I have also tried android with tor browser, with same outcome

Any advice?

Add support GPT-4 model

Error when installing container

OS: Ubuntu 22.04.02

1. Install command:
   sudo docker run --name chatpad -d -v pwd/config.json:/usr/share/nginx/html/config.json -p 8080:80 ghcr.io/deiucanta/chatpad:latest

2. Error log:
   docker: Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: error during container init: error mounting "/root/config.json" to rootfs at "/usr/share/nginx/html/config.json": mount /root/config.json:/usr/share/nginx/html/config.json (via /proc/self/fd/6), flags: 0x5000: not a directory: unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type.
   

The chat on the phone is very narrow

At the moment, the chat on the phone is very narrow

I suggest to move icon and buttons to the top of the message to remove empty space on sides

:whale2: Dockerize Chatpad to provide easy web based deployment

This is a base issue for a future PR

NEW Features Request

1- Feature Request: a feature that allows me to disable the "Enter" key as a way of sending inputs to make sure that I don't accidentally send unfinished messages.
2- Feature Request: a function that enables me to chat and interact with local PDF/Doc files.
3- Feature Request: a function or plugin that allows me to chat with websites directly.
SALAH

Copy button on code blocks doesn't work

The copy button on code blocks generated doesn't function. Using Firefox 114.0.2

Token limitation.

Been playing with the app and had a bigger conversation about book writing. At some point, it just stopped working, and when I tried to request a different prompt, I got the following error

I am aware this in an API limitation, but it doesn't give you any chance to change what is being sent, or even inform you to start a new chat.

I ran on chatgpt the same type of conversation, and there the assistant simply "forgets" what is said at the start, and generates responses that deviate from what you asked at the start.

Any change we also have this here?

Write element for model selection and implement in influxDB