Skip to content

Commit

Permalink
fix: update README (#310)
Browse files Browse the repository at this point in the history
* update README

* update README
  • Loading branch information
paulclindo authored Jun 6, 2024
1 parent 0fdbc46 commit 2833146
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 40 deletions.
99 changes: 59 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
<h1 align="center">
<img src="assets/icon.png"/><br/>
<img width="36" height="36" src="assets/icon.png"/><br/>
Shinkai apps
</h1>
<p align="center">Shinkai apps unlock the full capabilities/automation of first-class LLM (AI) support in the web browser. It enables creating multiple agents, each connected to either local or 3rd-party LLMs (ex. OpenAI GPT), which have permissioned (meaning secure) access to act in every webpage you visit.</p><br/>
<p align="center">Shinkai apps unlock the full capabilities/automation of first-class LLM (AI) support in the web browser. It enables creating multiple agents, each connected to either local or 3rd-party LLMs (ex. OpenAI GPT), which have permissioned (meaning secure) access to act in every webpage you visit.
<br/>
<br/>
There is a companion repo called Shinkai Node, that allows you to set up the node anywhere as the central unit of the Shinkai Network, handling tasks such as agent management, job processing, and secure communications.
You can find it <a href="https://github.com/dcSpark/shinkai-node">here</a>.</p><br/>

## Projects

### Apps
* shinkai-visor: Shinkai Visor is a chrome extension to interact with shinkai-node.
* shinkai-app: Shinkai App is a mobile app to interact with shinkai-node.
* shinkai-desktop: Shinkai Desktop is a desktop app to interact with shinkai-node.

- shinkai-visor: Shinkai Visor is a chrome extension to interact with shinkai-node.
- shinkai-app: Shinkai App is a mobile app to interact with shinkai-node.
- shinkai-desktop: Shinkai Desktop is a desktop app to interact with shinkai-node.

### Libs

* shinkai-message-ts: Typescript library that implements the features and networking layer to enable systems to interact with shinkai-nodes.
* shinkai-node-state: Typescript library which using @tanstack/react-query enables apps to interact with shinkai-node managing the state, caching and evictions.
* shinkai-ui: React UI library to build shinkai apps.
- shinkai-message-ts: Typescript library that implements the features and networking layer to enable systems to interact with shinkai-nodes.
- shinkai-node-state: Typescript library which using @tanstack/react-query enables apps to interact with shinkai-node managing the state, caching and evictions.
- shinkai-ui: React UI library to build shinkai apps.

## Getting started

Expand All @@ -38,77 +43,91 @@ $ npx nx serve {project-name}
```

### Project specific configurations
* shinkai-visor: As this is a Chrome Extension, after build, developers needs to load it in chrome:
* 1. Open Chrome.
* 2. Navigate to `chrome://extensions`.
* 3. Enable _Developer mode_.
* 4. Click _Load unpacked_.
* 5. Select the `./dist/apps/shinkai-visor` folder which contains the output of the building process using commands like `npx nx serve shinkai-visor`.

* shinkai-desktop: For development and building purposes

- shinkai-visor: As this is a Chrome Extension, after build, developers needs to load it in chrome:

1. Open Chrome.
2. Navigate to `chrome://extensions`.
3. Enable _Developer mode_.
4. Click _Load unpacked_.
5. Select the `./dist/apps/shinkai-visor` folder which contains the output of the building process using commands like `npx nx serve shinkai-visor`.

- shinkai-desktop: For development and building purposes
- Run as a Desktop App using Vite:
Run `npx nx serve:tauri shinkai-desktop` and it will automatically launch the Shinkai Desktop application.
- Run as a Web App:
Run `npx nx serve shinkai-desktop` and open a browser and navigate to `http://localhost:1420`.
Run `npx nx serve shinkai-desktop` and open a browser and navigate to `http://localhost:1420`.

### Useful Commands

Every command, if it's needed, build projects and it's dependencies according to the project dependency tree inferred from imports between them.

* Run a single task
- Run a single task

Command: `npx nx [target] [project-name]`

Params:
* target: build | serve | lint | test | e2e

- target: build | serve | lint | test | e2e

IE:
* `npx nx build shinkai-visor`
* `npx nx lint shinkai-message-ts`
* `npx nx e2e shinkai-visor`
* `npx nx serve shinkai-app`

* Run many tasks
- `npx nx build shinkai-visor`
- `npx nx lint shinkai-message-ts`
- `npx nx e2e shinkai-visor`
- `npx nx serve shinkai-app`

- Run many tasks

Command: `npx nx run-many --target=[target]`

Params:
* target: build | serve | lint | test | e2e

- target: build | serve | lint | test | e2e

IE:
* `npx nx run-many --target=build`
* `npx nx run-many --target=lint`
* `npx nx run-many --target=test`
* `npx nx run-many --target=e2e`
* `npx nx run-many --target=serve`

* Run on affected projects
- `npx nx run-many --target=build`
- `npx nx run-many --target=lint`
- `npx nx run-many --target=test`
- `npx nx run-many --target=e2e`
- `npx nx run-many --target=serve`

- Run on affected projects

Command: `npx nx affected --target=[target]`

Params:
* target: build | serve | lint | test | e2e

- target: build | serve | lint | test | e2e

IE:
* `npx nx affected --target=build`

- `npx nx affected --target=build`

> When you build a project, NX builds a cache (to make it faster), if you want to skip it just add the parameter `--skip-nx-cache` to the previous commands.
## Dev conventions

### Monorepo

To orchestrate all the tasks, dependencies and hierarchy between different projects, this repository uses [NX](https://nx.dev/) as a monorepo tooling.

### Third party dependencies

All projects share the same base of dependencies defined `./package.json` file found in the root of the repository. Nested package json files are used just to override or extends base attributes.

### UI Libraries

To build the UI there are 3 core libraries:
* [radix](https://www.radix-ui.com/) to have base unstyled components.
* [shadcn](https://ui.shadcn.com/) to obtain ready to use components.
* [tailwindcss](https://tailwindui.com/) to implement css customizations, structures, layouts and helpers.

- [radix](https://www.radix-ui.com/) to have base unstyled components.
- [shadcn](https://ui.shadcn.com/) to obtain ready to use components.
- [tailwindcss](https://tailwindui.com/) to implement css customizations, structures, layouts and helpers.

### State management

To implement state management there are two different libraries:
* [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction): To implement UI State
* [react-query](https://tanstack.com/query/v4): To implement data state

- [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction): To implement UI State
- [react-query](https://tanstack.com/query/v4): To implement data state
Binary file modified assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2833146

Please sign in to comment.