ChatCraft week 1: Installation and meeting the team
Tags: opensource, chatcraft, github, chatgpt
Published: 2024-01-12 22:38:22

---
series: Collaborating on ChatCraft
---

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 tarasglek/chatcraft.org %}

---
# Setting Up ChatCraft

This is not my first time working with ChatCraft (See [past blog](https://dev.to/katiel/contributing-to-a-javascript-project-6n)), 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](https://pnpm.io/installation)

3) Restart Powershell and run `pnpm install`

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

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93p29c1812vc91xk9pgh.png)

To fix this, I ran:

```
pnpm add --save-dev @babel/core @babel/cli @babel/preset-env
pnpm add --save-dev @babel/runtime
```

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

5) Visit `localhost:5173`

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

6) Enter an OpenRouter API key and click Save

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

7) Ask ChatCraft a question

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

---

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45hll2nbvst7mfsb5te7.png)

---
# Get access to OpenAI API key using sops

1) Create a new [SSH key](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)

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

2) In administrator level Powershell, run:

```
Get-Service -Name ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent
```

3) In regular Powershell, run:

```
ssh-add c:\Users\katie\.ssh\id_ed25519
```

4) Add new SSH key to GitHub account

In Git Bash, copy contents of ssh key to clipboard:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tolzucz89zrb5d1wnn51.png)

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

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

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](https://go.dev/doc/install)

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
```

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](https://chakra-ui.com/), a component library used to build React applications.

[MermaidJS](https://swimm.io/learn/mermaid-js/mermaid-js-a-complete-guide), a JavaScript library used to make diagrams and flowcharts.