DEV Community

Katie Liu
Katie Liu

Posted on • Updated on

ChatCraft week 1: Installation and meeting the team

As a part of my Open Source Development course this term, I will be working as a project team member of ChatCraft.org!

ChatCraft.org

ChatCraft is a ChatGPT clone which is geared towards answering questions for developers! It is built with Typescript, JavaScript (Node.js) and Express.js framework as well as React and Vue.js.

GitHub logo tarasglek / chatcraft.org

Developer-oriented ChatGPT clone

ChatCraft.org

Welcome to ChatCraft.org, your open-source web companion for coding with Large Language Models (LLMs). Designed with developers in mind, ChatCraft transforms the way you interact with GPT models, making it effortless to read, write, debug, and enhance your code.

Whether you're exploring new designs or learning about the latest technologies, ChatCraft is your go-to platform. With a user interface inspired by GitHub, and editable Markdown everywhere, you'll feel right at home from the get-go.

ChatCraft UI Example

Features

We think ChatCraft is the best platform for learning, experimenting, and getting creative with code. Here's a few of the reasons why we think you'll agree:

🛠️ You're in Control: Customize all aspects of a chat. Use your own System Prompts, edit, delete, and retry AI messages with models from competing vendors in the same chat.

🌍 Multiple AI Providers: ChatCraft supports both OpenAI and OpenRouter, giving you access to a…


Setting Up ChatCraft

This is not my first time working with ChatCraft (See past blog), but since I reformatted my computer recently, I need to redo the installation procedures.

1) Clone the main repo to my local.

2) Install pnpm

3) Restart Powershell and run pnpm install

Image description

To fix this, I went to the folder .pnpm-store on Windows and changed the permissions to give my user full permissions. I then ran pnpm install again.

4) Run pnpm dev

Image description

To fix this, I ran:

pnpm add --save-dev @babel/core @babel/cli @babel/preset-env
pnpm add --save-dev @babel/runtime
Enter fullscreen mode Exit fullscreen mode

Image description

5) Visit localhost:5173

Image description

6) Enter an OpenRouter API key and click Save

Image description

7) Ask ChatCraft a question

Image description


Team Meetings and Sheriff

As I am part of a project team for ChatCraft this term, I also chose two meetings dates where I will act as the Sheriff. Sheriff is similar to a PM and duties include:

  • Running, documentating the weekly triage meeting
  • Communicating and helping the team resolve issues
  • Filing, monitoring the system and current issues
  • Github - Moving PRs forward, resolving git issues
  • Monitoring and resolving CI issues
  • Doing releases

Team Discord

I have joined a project team discord where we will be communicating to work on ChatCraft! It is a small group of six students and two administrators :)

Image description


Get access to OpenAI API key using sops

1) Create a new SSH key

Image description

2) In administrator level Powershell, run:

Get-Service -Name ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent
Enter fullscreen mode Exit fullscreen mode

3) In regular Powershell, run:

ssh-add c:\Users\katie\.ssh\id_ed25519
Enter fullscreen mode Exit fullscreen mode

4) Add new SSH key to GitHub account

In Git Bash, copy contents of ssh key to clipboard:
Image description

Go to Github Settings > SSH and GPG keys > New SSH Key

Image description

Type a Title and paste the key from clipboard > Add SSH Key

5) Ask for an admin to add me to the YAML doc now that I have an SSH key

6) Install Go

7) Install dependencies for sops and ssh-to-age

go install github.com/getsops/sops/v3/cmd/sops@v3.8.1
go install github.com/Mic92/ssh-to-age/cmd/ssh-to-age@latest
Enter fullscreen mode Exit fullscreen mode

8) Pull the remote branch taras/sops2

9) After the admin adds me to the YAML file, I will pull the latest code for this branch and continue.


Research on ChatCraft technology

There are many new technologies used in ChatCraft that are new to me. I have chosen to do research on the following:

ChakraUI, a component library used to build React applications.

MermaidJS, a JavaScript library used to make diagrams and flowcharts.

Top comments (0)