Docs Improvements

docs/components/editor-demo.tsx

@@ -1,5 +1,5 @@
 import {motion} from 'framer-motion';
-import CopilotEditor, {Theme} from 'monacopilot';
+import MonaCopilot, {Theme} from 'monacopilot';
 import {useTheme} from 'next-themes';
 
 const EDITOR_DEFAULTS = {
@@ -27,7 +27,7 @@ const EditorDemo = () => {
       animate={{opacity: 1, y: 0}}
       transition={{duration: 0.4, delay: 0.6}}
       className="rounded-xl my-8 overflow-hidden bg-background border shadow-md shadow-neutral-50 dark:shadow-neutral-900 md:w-[700px] w-full h-[400px]">
-      <CopilotEditor
+      <MonaCopilot
         endpoint="/api/copilot"
         language={EDITOR_DEFAULTS.language}
         theme={theme}

docs/pages/docs/_meta.json

@@ -1,6 +1,6 @@
 {
   "index": "Getting Started",
-  "guide": "Guide",
+  "copilot": "Copilot",
   "copilot-cost-overview": "Copilot Cost Overview",
   "faq": "FAQ"
 }

docs/pages/docs/copilot/_meta.json

@@ -0,0 +1,5 @@
+{
+  "setup": "Setup",
+  "options": "Options",
+  "external-completion-endpoint": "External Completion Endpoint"
+}

docs/pages/docs/copilot/external-completion-endpoint.mdx

@@ -0,0 +1,81 @@
+---
+title: External Completion Endpoint
+---
+
+import { Tabs, Callout } from "nextra/components";
+
+# External Completion Endpoint
+
+In our previous Copilot Setup guide, we discussed framework-specific API handlers. The completion endpoint can be any server capable of returning a completion.
+
+Below are examples demonstrating how to set up an external endpoint for code completion using Node.js with Express and Hono:
+
+<Tabs items={['Node.js with Express', 'Hono']}>
+  <Tabs.Tab title="Node.js with Express">
+    ```javascript
+    const express = require('express');
+    const { Copilot } = require('monacopilot');
+
+    const app = express();
+    const copilot = new Copilot(process.env.GROQ_API_KEY);
+
+    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'));
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab title="Hono">
+    ```javascript
+    import { Hono } from 'hono';
+    import { env } from 'hono/adapter';
+    import { Copilot } from 'monacopilot';
+
+    const app = new Hono();
+
+    app.post('/copilot', async (c) => {
+      try {
+        const { GROQ_API_KEY } = env(c);
+        const copilot = new Copilot(GROQ_API_KEY);
+        const body = await c.req.json();
+        const completion = await copilot.complete(body);
+        return c.json(completion);
+      } catch (error) {
+        return c.json({ error: error.message }, 500);
+      }
+    });
+
+    export default app;
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+### Using External Endpoint
+
+To utilize an external endpoint with the MonaCopilot editor, use the following configuration:
+
+```jsx
+<MonaCopilot 
+  endpoint="https://api.yourdomain.com/copilot"
+  // ... other props
+/>
+```
+
+### Best Practices
+
+When implementing an external endpoint, consider the following best practices:
+
+1. **Security**: Ensure robust security measures are in place for your endpoint, especially when handling sensitive code or data.
+2. **Performance**: Optimize the latency and throughput of your chosen endpoint solution to maintain fast and responsive code completions.
+
+---
+
+The flexibility in endpoint configuration allows for tailored Copilot integration to meet specific needs and infrastructure requirements.

docs/pages/docs/copilot/options.mdx

@@ -0,0 +1,82 @@
+---
+title: Copilot Options
+---
+
+import { Callout } from 'nextra/components'
+
+# Copilot Options
+
+This guide outlines various configuration options available for customizing the auto completion integration in your editor.
+
+### External Context
+
+Enhance the accuracy and relevance of Copilot's completions by providing additional code context from your workspace.
+
+```jsx
+<MonaCopilot 
+  externalContext={[
+    {
+      path: './utils.js',
+      content: 'export const reverse = (str) => str.split("").reverse().join("")'
+    }
+  ]}
+  // ... other props
+/>
+```
+
+The `externalContext` prop accepts an array, allowing you to include content from multiple files. Each item in the array should contain:
+
+- `path`: The relative path from the current code in the editor
+- `content`: The actual code content of the file
+
+#### Benefits
+
+By providing external context, Copilot can offer more intelligent suggestions. For example, if you start typing `const isPalindrome = `, Copilot may suggest using the `reverse` function from `utils.js` and even help with the correct import statement.
+
+<Callout type="info">
+  Note: Including more external context may slightly increase completion costs.
+</Callout>
+
+### Changing the Default Model
+
+You can specify a different model for completions by setting the `model` parameter in the `Copilot` constructor.
+
+```jsx
+const copilot = new Copilot(process.env.GROQ_API_KEY, { 
+    model: 'falcon' 
+});
+```
+
+The default model is `llama` if not specified.
+
+### Filename
+
+Specify the name of the file being edited to receive more contextually relevant completions.
+
+```jsx
+<MonaCopilot 
+  filename="utils.js"
+  // ... other props
+/>
+```
+
+Examples of filename values:
+- `"index.js"`
+- `"utils/objects.js"`
+
+### Completions for Specific Technologies
+
+Enable completions tailored to specific technologies by using the `technologies` prop.
+
+```jsx 
+<MonaCopilot 
+  technologies={['react', 'next.js', 'tailwindcss']}
+  // ... other props
+/>
+```
+
+This configuration will provide completions relevant to React, Next.js, and Tailwind CSS.
+
+---
+
+By leveraging these options, you can fine-tune Copilot's behavior to better suit your development environment and needs. Experiment with different configurations to find the optimal setup for your project.

docs/pages/docs/copilot/setup.mdx

@@ -0,0 +1,123 @@
+---
+title: Copilot Setup
+---
+
+import { Tabs, Callout, Card } from "nextra/components";
+
+import {
+  Link1Icon,
+} from "@radix-ui/react-icons";
+
+# Copilot Setup
+
+This guide will walk you through the process of integrating AI auto-completion into your project using Copilot.
+
+### Obtaining an API Key
+
+To start, you'll need to obtain an API key from the [Groq console](https://console.groq.com/keys).
+
+<Callout type="info">
+  As of now, Groq has not implemented billing, allowing free usage of their API. Starting in early July, they plan to introduce a pay-as-you-go model. During this free period, you may experience some latency in completions. Once billing is implemented, you can expect instant completions without latency.
+</Callout>
+
+### Setting Up the API Key
+
+Once you have your API key, you need to define it as an environment variable in your project:
+
+<Tabs items={["Next.js", "Gatsby"]}>
+  <Tabs.Tab>
+    ```bash filename=".env.local"
+    GROQ_API_KEY=your-api-key
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash filename=".env.development"
+    GROQ_API_KEY=your-api-key
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+### API Handler
+
+Next, set up an API handler to manage auto-completion requests. The configuration depends on your framework:
+
+<Tabs items={["Next.js (app router)", "Next.js (pages router)", "Gatsby"]}>
+  <Tabs.Tab>
+    ```jsx filename="app/api/copilot/route.ts"
+    import { Copilot } from 'monacopilot';
+
+    const copilot = new Copilot(process.env.GROQ_API_KEY);
+
+    export async function POST(req: Request) {
+      const body = await req.json();
+      const completion = await copilot.complete(body);
+
+      return Response.json(completion, {status: 200})
+    }
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```jsx filename="pages/api/copilot.ts"
+    import { NextApiRequest, NextApiResponse } from 'next';
+    import { Copilot } from 'monacopilot';
+
+    const copilot = new Copilot(process.env.GROQ_API_KEY);
+
+    export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+      const completion = await copilot.complete(req.body);
+
+      res.status(200).json(completion);
+    }
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```jsx filename="src/api/copilot.ts"
+    import { GatsbyFunctionRequest, GatsbyFunctionResponse } from "gatsby";
+    import { Copilot } from 'monacopilot';
+
+    const copilot = new Copilot(process.env.GROQ_API_KEY);
+
+    export default async function handler(req: GatsbyFunctionRequest, res: GatsbyFunctionResponse) {
+      const completion = await copilot.complete(req.body);
+
+      res.status(200).json(completion);
+    }
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+If you prefer to handle code completion requests with your own server instead of using the API handler, you can create an external completion endpoint.
+
+<div className="h-4" />
+
+<Card title="External Completion Endpoint"
+href="/docs/copilot/external-completion-endpoint"
+icon={<Link1Icon />}
+ />
+
+### Integrating Copilot with the Editor
+
+To utilize the MonaCopilot component with AI auto-completion, set the endpoint to the API handler:
+
+```jsx
+import MonaCopilot from "monacopilot";
+
+function App() {
+  return (
+    <MonaCopilot 
+      endpoint="/api/copilot"
+      language="javascript"
+    />
+  );
+}
+```
+
+<Callout type="info">The `language` prop is required to enable auto-completion for the specified language.</Callout>
+
+### Additional Options
+
+For more advanced customization options, refer to the [Copilot Options](/docs/copilot/options) guide.
+
+---
+
+You have now successfully configured AI auto-completion in your project. Start coding in the editor to experience the auto-completion functionality.