sheet0 · wenfengwang · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/docs/components/counters.module.css b/docs/components/counters.module.css
diff --git a/docs/components/counters.tsx b/docs/components/counters.tsx
diff --git a/docs/components/feature-request/index.tsx b/docs/components/feature-request/index.tsx
@@ -0,0 +1,26 @@
+import { Callout } from 'nextra/components';
+import cn from './style.module.css';
+
+export function FeatureRequest() {
+  return (
+    <Callout type='info'>
+      Didn't find the feature you were looking for? Feel free to submit an{' '}
+      <a
+        className={cn.link}
+        href='https://github.com/npi-ai/npi/issues/new'
+        target='_blank'
+      >
+        issue
+      </a>{' '}
+      or{' '}
+      <a
+        className={cn.link}
+        href='https://github.com/npi-ai/npi/pulls'
+        target='_blank'
+      >
+        PR
+      </a>
+      !
+    </Callout>
+  );
+}
diff --git a/docs/components/feature-request/style.module.css b/docs/components/feature-request/style.module.css
@@ -0,0 +1,3 @@
+.link {
+  text-decoration: underline;
+}
diff --git a/docs/components/todo/index.tsx b/docs/components/todo/index.tsx
@@ -0,0 +1,9 @@
+import { Callout } from 'nextra/components';
+
+export function Todo() {
+  return (
+    <Callout type='warning' emoji='🚧'>
+      This page is under construction.
+    </Callout>
+  );
+}
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -1,6 +1,7 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
-})
+  defaultShowCopyCode: true,
+});
 
-module.exports = withNextra()
+module.exports = withNextra();
diff --git a/docs/package.json b/docs/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "NPi Docs",
+  "name": "@npi-ai/docs",
+  "private": "true",
   "version": "0.0.1",
   "description": "NPi Docs",
   "scripts": {
@@ -18,14 +19,14 @@
   },
   "homepage": "https://github.com/npi-ai/npi",
   "dependencies": {
-    "next": "^13.0.6",
-    "nextra": "latest",
-    "nextra-theme-docs": "latest",
+    "next": "^14.2.2",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "18.11.10",
-    "typescript": "^4.9.3"
+    "typescript": "^5.4.5"
   }
 }
diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx
@@ -0,0 +1,6 @@
+import '../style.css';
+
+export default function MyApp({ Component, pageProps }) {
+  // This default export is required in a new `pages/_app.js` file.
+  return <Component {...pageProps} />;
+}
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -1,6 +1,18 @@
 {
-  "index": "Introduction",
-  "quickstart": "Quickstart",
+  "index": {
+    "type": "page",
+    "title": "Home"
+  },
+
+  "client-guides": {
+    "type": "page",
+    "title": "Client Guides"
+  },
+
+  "contributor-guides": {
+    "type": "page",
+    "title": "Contributor Guides"
+  },
 
   "contact": {
     "title": "Contact ↗",

diff --git a/docs/pages/client-guides/_meta.json b/docs/pages/client-guides/_meta.json
@@ -0,0 +1,11 @@
+{
+  "start": "Get Started",
+
+  "-- Apps": {
+    "type": "separator",
+    "title": "Apps"
+  },
+
+  "api-apps": "",
+  "browser-apps": ""
+}
diff --git a/docs/pages/client-guides/api-apps.mdx b/docs/pages/client-guides/api-apps.mdx
@@ -0,0 +1,9 @@
+import { Todo } from '@components/todo';
+
+<Todo />
+
+# API Apps
+
+API Apps leverage the robust capabilities of API calls to dramatically streamline complex operations, creating a symphony of interconnected services and tools at your fingertips. With the integration of LLMs' advanced function calling feature, our API Apps stand at the frontier of programmatic possibilities, bridging the gap between complex back-end functionalities and user-friendly operations.
+
+The magic behind API Apps lies in their ability to communicate with databases, third-party services, and internal systems through a well-defined set of operations. Whether it's data analytics, cloud services, transaction management, content creation, or any service supported by modern APIs, these applications promise to enhance productivity by automating routine and complex processes.
diff --git a/docs/pages/client-guides/api-apps/_meta.json b/docs/pages/client-guides/api-apps/_meta.json
@@ -0,0 +1,4 @@
+{
+  "gmail": "",
+  "google-calendar": ""
+}
diff --git a/docs/pages/client-guides/api-apps/discord.mdx b/docs/pages/client-guides/api-apps/discord.mdx
@@ -0,0 +1,62 @@
+# Discord
+
+The Discord App facilitates communication with Discord channels by providing features that allow you to send or fetch messages.
+
+import { Callout } from 'nextra/components';
+
+<Callout type='info'>
+  Please note that the Discord App is designed as a supplementary tool for an
+  exisiting chatbot and does not actively listen for new messages. For effective
+  operation, the app requires explicit identification of the target `user_id`,
+  `channel_id`, and/or `message_id` within your instructions.
+</Callout>
+
+## Supported Functionality
+
+- **Direct Messaging**: Initiate a direct message channel with a selected user.
+- **Message Retrieval**: Fetch historic messages from a specified Discord channel.
+- **Message Dispatch**: Send a message to a Discord channel.
+- **Message Response**: Reply to an existing message within a Discord channel.
+- **Reply Monitoring**: Await a response to a specific message in a Discord channel.
+
+import { FeatureRequest } from '@components/feature-request';
+
+<FeatureRequest />
+
+## Usage
+
+```py
+from npiai.app.discord import Discord
+
+discord = Discord(token=...)
+
+discord.chat(...)
+```
+
+## Examples
+
+Below are a few examples demonstrating how to seamlessly communicate in Discord channels with the Discord App:
+
+### Retrieve Messages from a Channel
+
+```py
+discord.chat('Get the last 10 messages from the channel with ID {{channel_id}}')
+```
+
+### Send a Message to a Channel
+
+```py
+discord.chat('Send a greeting message to the channel with ID {{channel_id}}')
+```
+
+### Send a Direct Message to a User and Wait for Their Reply
+
+```py
+discord.chat('Send a direct message to XXX (user id: {{user_id}}) asking if they are doing well, and wait for their reply.')
+```
+
+### Reply to a Message in a Channel
+
+```py
+discord.chat('Reply to the latest message in the channel with ID {{channel_id}}. You can write anything you like.')
+```
diff --git a/docs/pages/client-guides/api-apps/github.mdx b/docs/pages/client-guides/api-apps/github.mdx
@@ -0,0 +1,84 @@
+# GitHub
+
+The GitHub App is crafted to refine your GitHub workflow, offering efficient management of issues and pull requests. It also enriches community engagement, allowing you to easily star or fork favored repositories.
+
+## Supported Functionality
+
+- **Repository Search**: Locate repositories on GitHub.
+- **Repository Engagement**: Star or fork repositories.
+- **Issue Management**:
+  - Fetch exisiting issues.
+  - Open or close issues.
+  - Edit details of existing issues.
+  - Comment on issues.
+- **Pull Request (PR) Management**:
+  - Fetch exisiting PRs.
+  - Create or close PRs.
+  - Update existing PRs.
+  - Comment on PRs.
+
+import { FeatureRequest } from '@components/feature-request';
+
+<FeatureRequest />
+
+## Usage
+
+The following examples show how to leverage the GitHub App to efficiently navigate and manage your repositories, issues, and pull requests:
+
+```py
+from npiai.app.github import GitHub
+
+github = GitHub(token=...)
+
+github.chat(...)
+```
+
+## Examples
+
+### Star and Fork an Repository
+
+```py
+github.chat('Star and fork the repo npi/npi.')
+```
+
+### Search for Issues
+
+```py
+github.chat('Find the issues in the repo npi/npi related to feature request.')
+```
+
+### Create an Issue with a Specific Label
+
+```py
+github.chat('Create a test issue in npi/npi with label "Test" and assign it to @idiotWu')
+```
+
+### Edit an Existing Issue
+
+```py
+github.chat('Find the issue titled "Test" in npi/npi and change the body to "Hello World".')
+```
+
+### Close Issues
+
+```py
+github.chat('Close all issues in npi/npi.')
+```
+
+### Create a Pull Request
+
+```py
+github.chat('Create a pull request in npi/npi from "npi-test" branch to "main" branch with a random title and body')
+```
+
+### Edit an Existing Pull Request
+
+```py
+github.chat('Find the PR titled "Test" in npi/npi and change the body to "Hello World".')
+```
+
+### Close Pull Requests
+
+```py
+github.chat('Close all pull requests in npi/npi.')
+```
diff --git a/docs/pages/client-guides/api-apps/gmail.mdx b/docs/pages/client-guides/api-apps/gmail.mdx
@@ -0,0 +1 @@
+# Gmail
diff --git a/docs/pages/client-guides/api-apps/google-calendar.mdx b/docs/pages/client-guides/api-apps/google-calendar.mdx
@@ -0,0 +1 @@
+# Google Calendar
diff --git a/docs/pages/client-guides/browser-apps.mdx b/docs/pages/client-guides/browser-apps.mdx
@@ -0,0 +1,9 @@
+import { Todo } from '@components/todo';
+
+<Todo />
+
+# Browser Apps
+
+The Browser Apps are the epitome of automation, pushing the boundaries of how we interact with the web. Unlike traditional automation tools, our Browser Apps leverage the unparalleled linguistic capabilities of LLMs, enabling them to understand and perform intricate web-based tasks with human-like precision.
+
+Each Browser App functions like an elite digital assistant, capable of navigating the complex landscape of the internet with simulated keyboard and mouse inputs. From filling out online forms with impeccable precision to managing online accounts, conducting research, or even shopping online, the potential applications are virtually limitless.
diff --git a/docs/pages/client-guides/browser-apps/general-browser-agent.mdx b/docs/pages/client-guides/browser-apps/general-browser-agent.mdx
@@ -0,0 +1,32 @@
+# General Browser Agent
+
+The General Browser Agent (GBA) is a flexible, browser-based automation tool capable of performing a wide range of tasks on various webpages.
+
+import { Callout } from 'nextra/components';
+
+<Callout type='info'>
+  The GBA is designed for general navigation purposes. You may want a
+  fine-grained optimization when targeting a specific website.
+</Callout>
+
+## Usage
+
+Below is a sample code snippet demonstrating how to integrate the GBA into your Python script:
+
+```py
+from npiai.browser_app.general_browser_agent import GeneralBrowserAgent
+
+gba = GeneralBrowserAgent()
+
+gba.chat(...)
+```
+
+## Example
+
+Here's an example of how to instruct the GBA to book a flight using Google Flights:
+
+```py
+gba.chat('Book a one-way flight from ATL to LAX on 4/20 using Google Flights.')
+```
+
+When executing the above command, the GBA will navigate to the Google Flights website and proceed to book the flight according to the specified parameters.