Remix

Learn how to integrate Monacopilot with Remix.

Installation

First, install the required dependencies:

npm

npm install monacopilot @monaco-editor/react

yarn

yarn add monacopilot @monaco-editor/react

pnpm

pnpm add monacopilot @monaco-editor/react

bun

bun add monacopilot @monaco-editor/react

Implementation

API Route

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.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);
};

Editor Component

Create a Editor component in app/components/Editor.tsx:

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} />;
}

Page Component

Create your page component in app/routes/_index.tsx:

import Editor from '~/components/Editor';

export default function Index() {
    return (
        <main className="h-screen w-screen">
            <h1>Monacopilot Remix Example</h1>

            <Editor />
        </main>
    );
}

Environment Variables

Create a .env file in your project root:

MISTRAL_API_KEY=your_mistral_api_key_here

Obtain your Mistral API Key from the Mistral AI Console.

Monacopilot supports multiple AI providers and models. For details on available options and configuration, see the Changing the Provider and Model documentation.

Obtain your Mistral API Key from the Mistral AI Console.

Project Structure

Here's the complete project structure:

your-remix-project/
├── app/
│   ├── components/
│   │   └── Editor.tsx
│   ├── routes/
│   │   ├── _index.tsx
│   │   └── code-completion.tsx
│   └── root.tsx
├── .env
└── package.json

Running the Example

1. Install dependencies:

npm

npm install

yarn

yarn

pnpm

pnpm install

bun

bun install

2. Start the development server:

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun dev

3. Open http://localhost:3000 in your browser.

You should now see a Monaco Editor with AI-powered completions working!

TIP

• Make sure you have set up your environment variables correctly before running the example.
• Remix uses file-based routing, so the /code-completion endpoint is automatically created from the code-completion.tsx route file.