ChatCraft week 11: Add support for custom providers!
Tags: opensource, react, chatcraft, chatgpt
Published: 2024-03-30 08:00:57

---
series: Collaborating on ChatCraft
---

This was a very eventful week, I completed a big feature which is giving the User Settings a makeover and supporting custom providers!

Now users can add their own provider url and key to use with [ChatCraft](https://chatcraft.org), so long as their provider is open ai compatible.

This feature is currently under review so not in production yet, but you can check out a development version [here](https://944d4d98.console-overthinker-dev.pages.dev). Once I have gotten reviews from my team this should be good to enter production.

Here are the before and after screenshots:

### Before

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my42uwggkt1czarc4zwc.png)

### After

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srx7vk9v433vqpla1a8l.png)

### Adding a custom provider

Unfortunately I only have an open ai and open ai key at this time, so I am not able to test with more providers. I will try to acquire some more to use for testing.

Click add button which creates a new row, enter your info and click Save
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8amnn6tcru6nhpnpbitf.png)

The new provider key has been validated and the provider is saved to localStorage and shows up in the table!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riw189ek22qfebsgt220.png)

Set it as the current provider so you can starting using!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ghwm9x1tyayce9iix5b.png)

It talks!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evk3o9qrik3b2vrcyj6s.png)

### [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/530)

Unfortunately there is too much code in this PR for me to talk about without this blog post getting too long. I used a number of state variables to track which provider the use checked the checkbox of, which provider's api key the user is editing, and to track the data of the new provider that is about to get created.

I also tried to make a visually appealing UI and a user friendly experience, which includes validating the api key immediately after editing a key and providing instant feedback if the key is invalid by printing a message under the field. Also a spinner would show if the validation is in progress. I had to utilize the state variable I set up so that I could correctly identify which row the error message would appear under.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k20rems1acnpand8v9ai.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7q5jd7zvyb65ita3961.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa6pxasq7ayvos8ombgr.png)

Looking forward to getting this merged next week so users can test this feature out!

### Hotfixes

I also merged two hotfixes this week. Unfortunately the second was to fix a mistake I made in the first one.

{% github https://github.com/tarasglek/chatcraft.org/pull/537 %}

{% github https://github.com/tarasglek/chatcraft.org/pull/538 %}

### Reviews

I reviewed a teammate's PR which involved allowing users to easily switch between the providers they have keys saved for in their localStorage. Now instead of going to User Settings modal to change providers, users can change it from the models dropdown.

I had a call with my teammate to discuss some changes I needed him to make in his PR once my hotfix was merged, and also some [strange behaviour](https://github.com/tarasglek/chatcraft.org/issues/534) he experience with being unable to get the list of models, however I was not able to help with debugging as I could not find a way to reproduce the issue on my side. He updated me later to say it was related to his network config issues.

Also, since I am familiar with working with providers and the settings saved in localStorage, I was able to review his PR code and ask him to do a bit of [refactoring](https://github.com/tarasglek/chatcraft.org/pull/535/commits/2dd9addbb845d2263cf0b25b7a90d6a658ceba2e).