Merge pull request #113 from arshad-yaseen/playground

Playground

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
     ci:
         strategy:
             matrix:
-                os: [ubuntu-latest, macos-latest, windows-latest]
+                os: [ubuntu-latest, macos-latest]
                 node-version: [20.x]
         runs-on: ${{ matrix.os }}
         steps:
@@ -27,7 +27,7 @@ jobs:
                   version: latest
 
             - name: Install dependencies
-              run: pnpm install --no-frozen-lockfile
+              run: pnpm install
 
             - name: Run validation
               run: pnpm validate

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
                   node-version: lts/*
                   registry-url: https://registry.npmjs.org/
             - uses: pnpm/action-setup@v4
-            - run: pnpm install --no-frozen-lockfile
+            - run: pnpm install
             - run: pnpm build
             - run: npx changelogithub
               continue-on-error: true

CONTRIBUTING.md

@@ -7,7 +7,7 @@ Thank you for your interest in contributing to Monacopilot! We're thrilled to ha
 - [Project Structure](#project-structure)
 - [Development Setup](#development-setup)
 - [Development Workflow](#development-workflow)
-- [Testing](#testing)
+- [Testing Changes](#testing-changes)
 - [Documentation](#documentation)
 - [Commit Guidelines](#commit-guidelines)
 - [Pull Request Process](#pull-request-process)
@@ -21,6 +21,7 @@ packages/
   ├── core/           # Core functionality and provider implementations
   └── monacopilot/    # Main Monaco Editor integration package
 docs/                 # Documentation website
+playground/           # NextJS app for testing changes in real-time
 ```
 
 ## Development Setup
@@ -38,11 +39,6 @@ docs/                 # Documentation website
     pnpm install
     ```
 
-3. **Build**
-    ```bash
-    pnpm build
-    ```
-
 ## Development Workflow
 
 1. **Start Development Mode**
@@ -52,12 +48,14 @@ docs/                 # Documentation website
     pnpm dev:core
 
     # For monacopilot package
-    pnpm dev
+    pnpm dev:monacopilot
 
     # For documentation
     pnpm dev:docs
     ```
 
+    Note: The development mode includes automatic rebuilding on code changes, so you don't need to run `pnpm build` manually after each change.
+
 2. **Code Formatting**
    Before committing your changes, run:
 
@@ -77,22 +75,20 @@ docs/                 # Documentation website
     pnpm lint
     ```
 
-5. **Testing**
-   Run all tests, only push if tests pass:
-    ```bash
-    pnpm test
-    ```
+## Testing Changes
 
-## Testing
+We provide a playground environment to test your changes in real-time:
 
-We use Vitest for testing. Run tests with:
+- The `playground/` directory contains a NextJS app that automatically reflects changes made to the packages
+- When you run `pnpm dev:monacopilot` or `pnpm dev:core`, your changes will be immediately visible in the playground
+- Use this playground to verify your changes and test functionality before submitting a PR
+
+To run tests:
 
 ```bash
 pnpm test
 ```
 
-When adding new features, please include corresponding tests in the appropriate `tests` directory.
-
 ## Documentation
 
 The documentation is built using VitePress and is located in the `docs` directory.
@@ -136,14 +132,15 @@ feat(core): add support for DeepSeek provider
 1. Fork the repository
 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
 3. Make your changes
-4. Run all checks:
+4. Test your changes using the playground
+5. Run all checks:
     ```bash
     pnpm validate
     pnpm test
     ```
-5. Commit your changes following our commit guidelines
-6. Push to your fork
-7. Open a Pull Request
+6. Commit your changes following our commit guidelines
+7. Push to your fork
+8. Open a Pull Request
 
 ## Need Help?
 

docs/examples/nextjs.md

@@ -40,7 +40,7 @@ import {NextRequest, NextResponse} from 'next/server';
 
 import {CompletionCopilot, type CompletionRequestBody} from 'monacopilot';
 
-const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY!, {
+const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY, {
     provider: 'openai',
     model: 'gpt-4o',
 });
@@ -65,7 +65,7 @@ import {NextApiRequest, NextApiResponse} from 'next';
 
 import {CompletionCopilot} from 'monacopilot';
 
-const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY!, {
+const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY, {
     provider: 'openai',
     model: 'gpt-4o',
 });

docs/examples/remix.md

@@ -36,7 +36,7 @@ Create a route handler for completions in `app/routes/code-completion.tsx`:
 import {json, type ActionFunctionArgs} from '@remix-run/node';
 import {CompletionCopilot, type CompletionRequestBody} from 'monacopilot';
 
-const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY!, {
+const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY, {
     provider: 'openai',
     model: 'gpt-4o',
 });

package.json

@@ -1,18 +1,19 @@
 {
     "version": "0.19.11",
     "scripts": {
-        "build": "pnpm -r build",
+        "build": "pnpm -r --filter '!playground' build",
         "dev:core": "pnpm -C packages/core dev",
-        "dev": "pnpm -C packages/monacopilot dev",
-        "publish:ci": "pnpm -r --filter '!docs' publish --access public --no-git-checks",
-        "release": "bumpp",
-        "test": "vitest run",
+        "dev:monacopilot": "pnpm -C packages/monacopilot dev",
         "dev:docs": "pnpm -C docs dev",
+        "dev:playground": "pnpm -C playground dev",
         "build:docs": "pnpm -C docs build",
+        "test": "vitest run",
         "tsc": "tsc --noEmit",
         "lint": "eslint . --ext .ts,.tsx --fix",
         "validate": "pnpm build && pnpm tsc && pnpm lint",
         "format": "prettier --write .",
+        "release": "bumpp",
+        "publish:ci": "pnpm -r --filter '!docs' --filter '!playground' publish --access public --no-git-checks",
         "prepare": "husky"
     },
     "devDependencies": {

packages/core/src/copilot.ts

@@ -26,9 +26,9 @@ export abstract class Copilot<Meta> {
     protected provider: Provider | undefined;
     protected model: Model | CustomCopilotModel;
 
-    constructor(apiKey: string, options: CopilotOptions) {
+    constructor(apiKey: string | undefined, options: CopilotOptions) {
         validate.params(apiKey, options);
-        this.apiKey = apiKey;
+        this.apiKey = apiKey ?? '';
         this.provider = options.provider;
         this.model = options.model;
         validate.inputs(this.model, this.provider);

packages/core/src/validator.ts

@@ -3,7 +3,10 @@ import type {CopilotOptions, CustomCopilotModel} from './types/copilot';
 import type {Model, Provider} from './types/llm';
 import {joinWithAnd} from './utils/text';
 
-const _validateParams = (apiKey: string, options: CopilotOptions): void => {
+const _validateParams = (
+    apiKey: string | undefined,
+    options: CopilotOptions,
+): void => {
     if (!apiKey) {
         throw new Error('Please provide an API key.');
     }

playground/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

playground/README.md

@@ -0,0 +1,3 @@
+# Monacopilot Playground
+
+A Next.js playground for testing Monacopilot in real-time.

playground/app/api/code-completion/route.ts

@@ -0,0 +1,25 @@
+import {NextRequest, NextResponse} from 'next/server';
+
+import {CompletionCopilot} from 'monacopilot';
+
+const copilot = new CompletionCopilot(process.env.OPENAI_API_KEY, {
+    provider: 'openai',
+    model: 'gpt-4o-mini',
+});
+
+export async function POST(req: NextRequest) {
+    const body = await req.json();
+
+    const {completion, error} = await copilot.complete({
+        body,
+    });
+
+    if (error) {
+        return NextResponse.json(
+            {completion: null, error: error},
+            {status: 500},
+        );
+    }
+
+    return NextResponse.json({completion}, {status: 200});
+}

playground/app/globals.css

@@ -0,0 +1,88 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.monaco-editor,
+.monaco-editor .monaco-editor-background,
+.monaco-editor .margin,
+.monaco-editor .monaco-workbench {
+    background-color: transparent !important;
+    outline: none !important;
+}
+
+.monaco-editor .overflow-guard {
+    background-color: var(--background) !important;
+}
+
+.monaco-editor .overflow-guard .scroll-decoration {
+    display: none !important;
+}