ChatCraft week 5: Storing multiple providers
Tags: chatcraft, chatgpt, typescript, opensource
Published: 2024-02-09 22:29:41

---
series: Collaborating on ChatCraft
---

#Issue

This week I finally was able to close the [issue](https://github.com/tarasglek/chatcraft.org/issues/345) I was working on which was allowing [ChatCraft](https://chatcraft.org) users to store api keys for multiple providers. [ChatCraft](https://chatcraft.org) currently only supports two providers (OpenAI and OpenRouter) but we may add more providers in the future!

If you are a [ChatCraft](https://chatcraft.org) user, you can now toggle between OpenAI and OpenRouter in User Settings without having to re-enter your API key.

![user settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsi3p2kfa3iik9732309.png)

#PR

This is [PR](https://github.com/tarasglek/chatcraft.org/pull/421) I worked on which resolved the above issue.

This PR builds upon the [PR](https://github.com/tarasglek/chatcraft.org/pull/371) I did last week, which completed the set up necessary for this functionality.

Since all the set up was already completed last week, I did not need to make many code changes to complete this. The main things I did was:

- when switching providers, saving the user's current api key to settings.providers array if it is not already saved
- when switching providers, loading the api key from settings.providers if it is there

This is the event handler function I wrote which will be triggered when the user toggles the provider:

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

![handleProviderChange](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4b25u39b3tgg7xn9kd0.png)

#Reviews of my PR

Before my PR got merged, I had many useful reviews from the repo admin and fellow teammates, which helped me discover issues with my code and ways to refactor the code.

[This review](https://github.com/tarasglek/chatcraft.org/pull/421#discussion_r1483084154) by Dave helped me find an issue with my old code.

Old code:

```
if (newProvider.name in settings.providers) {
  newProvider = settings.providers[newProvider.name];
  ...
}
```

Here I forgot to parse `settings.providers[newProvider.name]` into  a `ChatCraftProvider` object. We are getting this data from localStorage, so it is safer to use my `fromJSON` function to parse it into a `ChatCraftProvider` object.

New code:

```
const newProvider = settings.providers[selectedProvider.name] ? 
  ChatCraftProvider.fromJSON(
    settings.providers[selectedProvider.name]
  ) : 
  selectedProvider;
```

This [review](https://github.com/tarasglek/chatcraft.org/pull/421#discussion_r1483356811) by Amnish helped me refactor my code by moving it into a handler function.

#My Reviews on Teammates' PRs

I reviewed multiple PRs this week and commented on issues I found and suggestions on how the user experience could be improved.

[ChatCraft](https://chatcraft.org) now supports uploading images! See [PR#286](https://github.com/tarasglek/chatcraft.org/pull/286) and try it for yourself by going to [ChatCraft.org](https://chatcraft.org) selecting "Ask gpt-4-vision-preview" and uploading some images. This functionality is extremely useful! ChatCraft is faster than other image parsing web apps at converting images into text, and you could even do something like upload a UI and ask it to code it for you!

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

My reviews on this PR and its associated PRs:

[PR#286 review 1](https://github.com/tarasglek/chatcraft.org/pull/286#pullrequestreview-1867992290)
[PR#286 review 2](https://github.com/tarasglek/chatcraft.org/pull/286#pullrequestreview-1868465556)
[PR#419 review 1](https://github.com/tarasglek/chatcraft.org/pull/419#pullrequestreview-1868664848)
[PR#419 review 2](https://github.com/tarasglek/chatcraft.org/pull/419#issuecomment-1932781337)

I also reviewed [PR#402](https://github.com/tarasglek/chatcraft.org/pull/402) which allows users to download a ChatCraft message as an image!

![download as image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lpf22oazaiq0ypvqzd3.png)

[PR#402 review](https://github.com/tarasglek/chatcraft.org/pull/402#pullrequestreview-1868835705)