Monacopilot

To use Monacopilot in a Svelte component, you need to load Monaco via @monaco-editor/loader, initialize the editor, and then use registerCompletion to link the editor to your API endpoint. Ensure you call .deregister() on the completion registration and .dispose() on the editor during the component's destruction to prevent memory leaks.

<script lang="ts">
    import loader from '@monaco-editor/loader';
    import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
    import {registerCompletion, type CompletionRegistration} from 'monacopilot';
    import {onDestroy, onMount} from 'svelte';

    let editor: Monaco.editor.IStandaloneCodeEditor;
    let monaco: typeof Monaco;
    let editorContainer: HTMLElement;
    let completionRegistration: CompletionRegistration | null = null;

    onMount(async () => {
        // Load Monaco Editor using the loader method
        const monacoEditor = await import('monaco-editor');
        loader.config({monaco: monacoEditor.default});
        monaco = await loader.init();

        // Create the editor instance
        editor = monaco.editor.create(editorContainer, {
            value: "console.log('Hello from Monaco!')",
            language: 'javascript',
            theme: 'vs-dark',
        });

        // Register Monacopilot completion provider
        completionRegistration = registerCompletion(monaco, editor, {
            endpoint: '/api/code-completion',
            language: 'javascript',
        });
    });

    onDestroy(() => {
        // Clean up resources
        if (completionRegistration) {
            completionRegistration.deregister();
        }
        if (editor) {
            editor.dispose();
        }
        if (monaco) {
            monaco.editor.getModels().forEach(model => model.dispose());
        }
    });
</script>

<div bind:this="{editorContainer}" style="width: 100%; height: 600px;"></div>

You can implement Monacopilot entirely in the browser without a separate server endpoint by using the requestHandler option within registerCompletion. This bypasses the need for a dedicated backend endpoint by executing the completion logic directly in the client.

Security Warning: This approach exposes your API keys in client-side code. It is not secure for production applications accessible to the public. Use this method only for testing, internal tools, or environments where security is not a concern. For production, use the server-side approach.

To implement this, instantiate CompletionCopilot with your API key and provider configuration, then pass a requestHandler to registerCompletion that calls copilot.complete().

import { registerCompletion, CompletionCopilot } from 'monacopilot';

// Create the copilot instance directly in the browser
const copilot = new CompletionCopilot('YOUR_API_KEY', {
  provider: 'mistral',
  model: 'codestral',
});

registerCompletion(monaco, editor, {
  language: 'javascript',
  // Use requestHandler instead of endpoint
  requestHandler: async ({ body }) => {
    const completion = await copilot.complete({ body });
    return completion;
  },
});

On your server, you need to implement an endpoint that matches the endpoint URL provided in registerCompletion. Use the CompletionCopilot class to process the request body and generate completions.

In this example using Express.js and Mistral AI:

1. Initialize CompletionCopilot with your API key and a configuration object specifying the provider (e.g., 'mistral') and the model (e.g., 'codestral').
2. Create a POST route (e.g., /code-completion).
3. Pass req.body to copilot.complete({body: req.body}).
4. Return the resulting completion as a JSON response.

import 'dotenv/config';

import cors from 'cors';
import express from 'express';
import {CompletionCopilot} from 'monacopilot';

const app = express();
app.use(cors());
app.use(express.json());

const copilot = new CompletionCopilot(process.env.MISTRAL_API_KEY, {
    provider: 'mistral',
    model: 'codestral',
});

app.post('/code-completion', async (req, res) => {
    const completion = await copilot.complete({body: req.body});

    res.json(completion);
});

app.listen(process.env.PORT || 3000);

You need to create a server-side route handler to process completion requests. This handler uses CompletionCopilot to interface with an AI provider (e.g., Mistral) and returns the completion to the client.

1. Initialize CompletionCopilot with your API key and provider configuration.
2. In the Remix action function, parse the CompletionRequestBody from the request.
3. Call copilot.complete({body}) and return the result as JSON.

import {json, type ActionFunctionArgs} from '@remix-run/node';
import {CompletionCopilot, type CompletionRequestBody} from 'monacopilot';

const copilot = new CompletionCopilot(process.env.MISTRAL_API_KEY, {
    provider: 'mistral',
    model: 'codestral',
});

export const action = async ({request}: ActionFunctionArgs) => {
    const body: CompletionRequestBody = await request.json();
    const completion = await copilot.complete({body});

    return json(completion);
};

To enable AI completions in the browser, use the registerCompletion function within the onMount callback of the @monaco-editor/react component.

Key steps:

1. Use useRef to store the CompletionRegistration object.
2. In handleMount, call registerCompletion(monaco, editor, options) where options includes the endpoint (your API route) and the target language.
3. Use a useEffect cleanup function to call deregister() on the registration to prevent memory leaks or stale completions when the component unmounts.

import {useEffect, useRef} from 'react';
import MonacoEditor from '@monaco-editor/react';
import {
    registerCompletion,
    type CompletionRegistration,
    type Monaco,
    type StandaloneCodeEditor,
} from 'monacopilot';

export default function Editor() {
    const completionRef = useRef<CompletionRegistration | null>(null);

    const handleMount = (editor: StandaloneCodeEditor, monaco: Monaco) => {
        completionRef.current = registerCompletion(monaco, editor, {
            endpoint: '/code-completion',
            language: 'javascript',
        });
    };

    useEffect(() => {
        return () => {
            completionRef.current?.deregister();
        };
    }, []);

    return <MonacoEditor language="javascript" onMount={handleMount} />;
}