ChatCraft week 9: Free Model Provider!

This week I got a PR merged which established a free new provider for new users to try out! So now, even if you don't have any Open Router or Open AI api keys in your name, you can try ChatCraft out with our free model provider!

Simply go to https://chatcraft.org and select Free AI Models from the Provider dropdown.

The responses from the free model won't be as good as Open AI's chatgpt or gpt4 models but you can try out ChatCraft and see what it's capable of! For example, editing prompts, saving or sharing chats, adding functions and more.

---

Coding

Add FreeModelProvider and more provider refactoring #498

kliu57 posted on Mar 14, 2024

Added new provider (free provider for new users to try) Further providers refactoring

Closes #401

Code changes:

• Moved validateApiKey, queryModels, createClient out of ais.ts and into ChatCraftProvider.ts
• Moved usingOfficialOpenAI, usingOfficialOpenRouter out of ai.ts and into providers/index.ts
• Added new free provider providers/DefaultProvider/FreeModelProvider.ts
• Configured ModelAvatar.tsx for DefaultProvider so logo will display with the green bg

Potential future follow up items:

• Make FreeModelProvider the default provider for new users (this will make the Instructions page obsolete so we need to design a new way to instruct new users about ChatCraft)
• Query the first available free provider in the list of providers instead of hardcoding (currently not sure how since requires making defaultModelForProvider() async and affecting alot of other files)

View on GitHub

The free model provider endpoint was provided by Taras (see issue). I created a new provider class called FreeModelProvider which has the provider url. I also overloaded the parent class' queryModels function to fetch the available models. Lastly, I made the validateApiKey function always return true since this model does not require a key.

  async queryModels(key: string) {
    const res = await fetch(`${FREEMODELPROVIDER_API_URL}/models`, {
      method: "GET",
    });

    if (!res.ok) {
      throw new Error(`${res.status} ${await res.text()}`);
    }

    try {
      const result = await res.json();
      return result.data.map((model: { id: string }) => model.id) as string[];
    } catch (err: any) {
      throw new Error(`error querying models API: ${err.message}`);
    }
  }

The result of my queryModels function:

I also had to make modifications to other project files. For example, I had to make it so that when the user selects the free provider, instead of waiting for them to enter an api key, I would submit a mock key automatically which would be automatically validated. That means the moment they select the free provider they are taken to the next page where they can start using ChatCraft! See code here.

I also made many small code adjustments after getting feedback from Dave and Taras, and also debugged an issue where the logo was not appearing.

I'm very happy that this code is not in production, and the refactoring of provider code that I have been working on the last few weeks have finally paid off. Moving forward expect to see even more new providers on ChatCraft!

---

Running Ruby on ChatCraft

I did functionality testing for my teammate Yumei's PR this week. This week she managed to allow ChatCraft to run Ruby code on the browser! Check out her PR! Also, see other PR's from this week's ChatCraft release v.1.5.0!