Update docs

arshad-yaseen · Aug 4, 2024 · 658c913 · 658c913
1 parent 39bf982
commit 658c913
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 143 deletions.
diff --git a/docs/components/features.tsx b/docs/components/features.tsx
@@ -34,7 +34,7 @@ const Features = () => {
           Features
         </h2>
       </div>
-      <div className="w-full absolute top-[10rem] h-44 bg-background blur-2xl" />
+      <div className="w-full absolute top-[10rem] h-44 bg-background dark:bg-neutral-900 blur-2xl" />
       <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 container relative -mt-16">
         {FEATURES.map((feature, index) => (
           <Card key={index} className="rounded-xl h-full">

diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
@@ -11,6 +11,8 @@ import { MagicWandIcon } from "@radix-ui/react-icons";
 
 ### Installation
 
+First, install Monacopilot using your preferred package manager.
+
 <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
   <Tabs.Tab title="npm">
     ```bash
@@ -34,59 +36,9 @@ import { MagicWandIcon } from "@radix-ui/react-icons";
   </Tabs.Tab>
 </Tabs>
 
-### Components
-
-Monacopilot provides two main components: `Copilot` and `registerCopilot`.
-
-#### Copilot
-
-`Copilot` is a class for setting up the API endpoint to complete the code. This API endpoint is provided to the `registerCopilot` function.
-
-```javascript
-const express = require('express');
-const { Copilot } = require('monacopilot');
-
-const app = express();
-const copilot = new Copilot(process.env.GROQ_API_KEY); // Obtain API key from Groq console
-
-app.use(express.json());
-
-app.post('/copilot', async (req, res) => {
-  try {
-    const completion = await copilot.complete(req.body);
-    res.json(completion);
-  } catch (error) {
-    res.status(500).json({ error: error.message });
-  }
-});
-
-app.listen(3000, () => console.log('Server running on port 3000'));
-```
-
-#### RegisterCopilot
-
-`registerCopilot` is a function to register AI auto-completion in Monaco Editor.
-
-```javascript
-import { registerCopilot } from 'monacopilot';
-import * as monaco from 'monaco-editor-core';
-
-const editor = monaco.editor.create(document.getElementById('container'), {
-  value: 'const a = 1;',
-  language: 'javascript',
-});
-
-registerCopilot(monaco, editor, {
-  endpoint: 'https://api.myapp.com/copilot',
-  language: 'javascript',
-});
-```
-
-The above code registers AI auto-completion in the Monaco Editor. Using Monacopilot in frameworks and libraries you love is easy and straightforward.
-
 ### Guides
 
-Here's how you can use Monacopilot in your favorite libraries and frameworks.
+Find step-by-step instructions to integrate Monacopilot into your projects.
 
 import { Cards } from 'nextra/components'
 

diff --git a/docs/pages/docs/nextjs.mdx b/docs/pages/docs/nextjs.mdx
@@ -2,18 +2,17 @@
 title: Next.js
 ---
 
-import { Tabs, Callout, Card } from 'nextra/components';
+import { Tabs, Callout, Card, Steps } from 'nextra/components';
 import { Link1Icon } from '@radix-ui/react-icons';
 
 # Next.js
 
 This guide walks you through integrating AI auto-completion into your Next.js project.
 
-Start by obtaining an API key from the [Groq console](https://console.groq.com/keys).
+<Steps>
+###  Setting Up the API Key
 
-### Setting Up the API Key
-
-Once you have your API key, define it as an environment variable in your project:
+Start by obtaining an API key from the [Groq console](https://console.groq.com/keys). Once you have your API key, define it as an environment variable in your project:
 
 ```bash filename=".env.local"
 GROQ_API_KEY=your-api-key
@@ -54,97 +53,126 @@ Set up an API handler to manage auto-completion requests.
   </Tabs.Tab>
 </Tabs>
 
-### Integrating Copilot with the Editor
+Monacopilot use this API endpoint to fetch completions for the editor.
+
+### Install Monaco Editor
 
-Install a wrapper for the Monaco Editor. In this example, we'll use `@monaco-editor/react`.
+Install a React-compatible Monaco editor package such as `@monaco-editor/react`.
+
+<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
+  <Tabs.Tab title="npm">
+    ```bash
+    npm install @monaco-editor/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab title="pnpm">
+    ```bash
+    pnpm install @monaco-editor/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab title="yarn">
+    ```bash
+    yarn add @monaco-editor/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab title="bun">
+    ```bash
+    bun add @monaco-editor/react
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+### Register Copilot with the Monaco Editor
+
+Next, register Copilot with the Monaco editor.
 
 <Tabs items={["Method 1", "Method 2"]}>
   <Tabs.Tab title="Method 1">
-```tsx
-'use client';
-
-import {useEffect, useState} from 'react';
-
-import MonacoEditor from '@monaco-editor/react';
-import {
-  registerCopilot,
-  type Monaco,
-  type StandaloneCodeEditor,
-} from 'monacopilot';
-
-const LANGUAGE = 'javascript';
-
-export default function CodeEditor() {
-  const [editor, setEditor] = useState<StandaloneCodeEditor | null>(null);
-  const [monaco, setMonaco] = useState<Monaco | null>(null);
-
-  useEffect(() => {
-    if (!monaco || !editor) return;
-
-    const copilot = registerCopilot(
-      monaco,
-      editor,
-      {
-        endpoint: '/api/copilot',
-        language: LANGUAGE,
-      },
-    );
-
-    return () => {
-      copilot.deregister();
-    };
-  }, [monaco, editor]);
-
-  return (
-    <MonacoEditor
-      language={LANGUAGE}
-      onMount={(editor, monaco) => {
-        setEditor(editor);
-        setMonaco(monaco);
-      }}
-    />
-  );
-}
-```
+    ```tsx
+    'use client';
+
+    import {useEffect, useState} from 'react';
+
+    import MonacoEditor from '@monaco-editor/react';
+    import {
+      registerCopilot,
+      type Monaco,
+      type StandaloneCodeEditor,
+    } from 'monacopilot';
+
+    const LANGUAGE = 'javascript';
+
+    export default function CodeEditor() {
+      const [editor, setEditor] = useState<StandaloneCodeEditor | null>(null);
+      const [monaco, setMonaco] = useState<Monaco | null>(null);
+
+      useEffect(() => {
+        if (!monaco || !editor) return;
+
+        const copilot = registerCopilot(
+          monaco,
+          editor,
+          {
+            endpoint: '/api/copilot',
+            language: LANGUAGE,
+          },
+        );
+
+        return () => {
+          copilot.deregister();
+        };
+      }, [monaco, editor]);
+
+      return (
+        <MonacoEditor
+          language={LANGUAGE}
+          onMount={(editor, monaco) => {
+            setEditor(editor);
+            setMonaco(monaco);
+          }}
+        />
+      );
+    }
+    ```
   </Tabs.Tab>
   <Tabs.Tab title="Method 2">
-```tsx
-'use client';
-
-import {useCallback, useEffect, useRef} from 'react';
-
-import MonacoEditor from '@monaco-editor/react';
-import {
-  registerCopilot,
-  type CopilotRegistration,
-  type Monaco,
-  type StandaloneCodeEditor,
-} from 'monacopilot';
-
-const LANGUAGE = 'javascript';
-
-export default function CodeEditor() {
-  const copilotRef = useRef<CopilotRegistration | null>(null);
-
-  const onEditorMount = useCallback(
-    (editor: StandaloneCodeEditor, monaco: Monaco) => {
-      copilotRef.current = registerCopilot(monaco, editor, {
-        endpoint: '/api/copilot',
-        language: LANGUAGE,
-      });
-    },
-    [],
-  );
-
-  useEffect(() => {
-    return () => {
-      copilotRef.current?.deregister();
-    };
-  }, []);
-
-  return <MonacoEditor language={LANGUAGE} onMount={onEditorMount} />;
-}
-```
+    ```tsx
+    'use client';
+
+    import {useCallback, useEffect, useRef} from 'react';
+
+    import MonacoEditor from '@monaco-editor/react';
+    import {
+      registerCopilot,
+      type CopilotRegistration,
+      type Monaco,
+      type StandaloneCodeEditor,
+    } from 'monacopilot';
+
+    const LANGUAGE = 'javascript';
+
+    export default function CodeEditor() {
+      const copilotRef = useRef<CopilotRegistration | null>(null);
+
+      const onEditorMount = useCallback(
+        (editor: StandaloneCodeEditor, monaco: Monaco) => {
+          copilotRef.current = registerCopilot(monaco, editor, {
+            endpoint: '/api/copilot',
+            language: LANGUAGE,
+          });
+        },
+        [],
+      );
+
+      useEffect(() => {
+        return () => {
+          copilotRef.current?.deregister();
+        };
+      }, []);
+
+      return <MonacoEditor language={LANGUAGE} onMount={onEditorMount} />;
+    }
+    ```
   </Tabs.Tab>
 </Tabs>
 
@@ -158,6 +186,8 @@ Provide the `endpoint` with the path to the API handler.
 
 For more advanced customization, refer to the [Copilot Options](/docs/copilot-options) guide.
 
+</Steps>
+
 ---
 
-You have now successfully configured AI auto-completion in your Next.js project. Start coding in the editor to experience the auto-completion functionality.
+You have now successfully integrated Monacopilot into your Next.js project. Start coding in your editor to experience AI auto-completion in action!