docs: add examples and roadmap

Author: wenfengwang

README.md

@@ -53,6 +53,10 @@ Verify the installation by running `npi version`. If you see the output similar
 
 #### Setting Up NPi Server
 
+> [!TIP]
+> Don't have installed Docker? Follow the official [Docker Installation Guide](https://docs.docker.com/get-docker/) to install Docker on your system.
+
+
 Replace `YOUR_OAI_KEY` with your actual OpenAI API Key, then execute:
 
 ```sh
@@ -117,6 +121,12 @@ npi app github "Star, fork, and leave a supportive message in issue #27 of npi-a
 1. [Calendar Negotiator](examples/calendar_negotiator/main.py)
 2. [Twitter Crawler](examples/twitter_crawler/main.py)
 
+More: https://docs.npi.ai/examples
+
+## Roadmap
+
+https://docs.npi.ai/roadmap
+
 ## License
 
 [BSL v1.1](LICENSE).

docs/components/youtube/index.tsx

@@ -0,0 +1,16 @@
+import YouTube from 'react-youtube';
+
+export function YouTubeComponent({videoId}: { videoId: string }) {
+    const opts = {
+        height: '360',
+        width: '640',
+        playerVars: {
+            // https://developers.google.com/youtube/player_parameters
+            autoplay: 0,
+        },
+    };
+    return (
+        <YouTube videoId={videoId} opts={opts} />
+    );
+}
+

docs/package.json

@@ -19,13 +19,14 @@
   },
   "homepage": "https://github.com/npi-ai/npi",
   "dependencies": {
-    "next-plausible": "^3.12.0",
     "jotai": "^2.8.0",
     "next": "^14.2.2",
+    "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-youtube": "^10.1.0"
   },
   "devDependencies": {
     "@types/node": "18.11.10",

docs/pages/_meta.json

@@ -1,6 +1,8 @@
 {
   "index": "Quick Start",
   "overview": "Overview",
+  "examples": "Examples",
+  "roadmap": "Roadmap",
   "api-apps": "",
   "browser-apps": "",
   "cli": "CLI Reference",

docs/pages/api-apps/github.mdx

@@ -1,4 +1,4 @@
-import { Steps, Callout } from 'nextra/components';
+import { Steps } from 'nextra/components';
 import { Tabs } from '@components/tabs';
 import { FeatureRequest } from '@components/feature-request';
 

docs/pages/examples.mdx

@@ -0,0 +1,25 @@
+import { YouTubeComponent } from '@components/youtube';
+import { Todo } from '@components/todo';
+import { FeatureRequest } from '@components/feature-request';
+
+<Todo />
+# NPi AI Show cases
+
+## Calendar Negotiator
+
+<YouTubeComponent videoId={'F_Bh30eMdFo'}></YouTubeComponent>
+
+**Code**: https://github.com/npi-ai/npi/examples/calendar_negotiator/main.py
+
+## X.com collaboration with Discord
+
+<YouTubeComponent videoId={'Cy4dXc7pnvE'}></YouTubeComponent>
+
+**Code**: https://github.com/npi-ai/npi/examples/twitter_crawler/main.py
+
+
+## X.com Crawler
+
+<YouTubeComponent videoId={'saOfO_A7UL0'}></YouTubeComponent>
+
+<FeatureRequest />

docs/pages/index.mdx

@@ -3,7 +3,7 @@ title: NPi AI
 description: Welcome to NPi AI
 ---
 
-import { Cards, Steps, Tabs } from 'nextra/components';
+import { Callout, Steps, Tabs } from 'nextra/components';
 
 ## What is NPi?
 
@@ -58,7 +58,9 @@ NPi (**N**atural-language **P**rogramming **I**nterface), pronounced as **"N π"
     ```
 
 ### Setting Up NPi Server
-
+<Callout type={'info'}>
+    Don't have installed Docker? Follow the official [Docker Installation Guide](https://docs.docker.com/get-docker/) to install Docker on your system.
+</Callout>
 Replace `YOUR_OAI_KEY` with your actual OpenAI API Key, then execute:
 
 <Tabs items={['macOS', 'linux']}>

docs/pages/roadmap.mdx

@@ -0,0 +1,47 @@
+import { Callout } from 'nextra/components';
+import { Todo } from '@components/todo';
+import { FeatureRequest } from '@components/feature-request';
+
+<Todo />
+
+# Roadmap
+
+<Callout type={"info"}>
+
+    We are continuously breaking down these functionalities to give accuracy release date.
+
+    If you have insights on these functionalities, please discuss with us at [Join our Discord](https://discord.gg/4tyWuHpu)
+    or [Create an issue](https://github.com/npi-ai/npi/issues/new).
+
+</Callout>
+
+
+NPi AI will focus on the following functionalities in the next months:
+
+## More Applications
+Covering the most popular applications in the world, including API and UI.
+
+## Easy to use
+
+- Minimize the mental burden of debugging agent.
+- Seeped up onboarding.
+- Friendly Command line tool and SDK(Python and Golang are planned).
+
+## State Management
+- Persistent
+- Reliability
+
+## App Version Control
+
+We know add/change functions and  prompts may affect the behaviors of Apps, so we will introduce this functionality for increasing confidence on you upgrade NPi.
+
+## Authorization Management
+Make your credentials always SAFE!
+
+## Customization
+Easily extends NPi provisioned apps and create new your own apps.
+
+## Testing Coverage
+Add more test cases to NPi, including unit test, integration test, and end-to-end test.
+
+<FeatureRequest />