Next.js

Learn how to integrate Monacopilot with Next.js using either the App Router or Pages Router.

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

First, create an API route to handle completion requests:

App Router

// app/api/code-completion/route.ts
import {NextRequest, NextResponse} from 'next/server';

import {CompletionCopilot, type CompletionRequestBody} from 'monacopilot';

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

export async function POST(req: NextRequest) {
    const body: CompletionRequestBody = await req.json();
    const completion = await copilot.complete({
        body,
    });

    return NextResponse.json(completion, {status: 200});
}

Pages Router

// pages/api/code-completion.ts
import {NextApiRequest, NextApiResponse} from 'next';

import {CompletionCopilot} from 'monacopilot';

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

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse,
) {
    const completion = await copilot.complete({
        body: req.body,
    });

    res.status(200).json(completion);
}

Editor Component

Create a Editor component (components/Editor.tsx):

'use client';

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: '/api/code-completion',
            language: 'javascript',
        });
    };

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

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

Page Component

Use the Editor component in your page:

App Router

// app/page.tsx
import Editor from '@/components/Editor';

export default function Home() {
    return (
        <main className="h-screen w-screen">
            <h1>Monacopilot Next.js Example</h1>

            <Editor />
        </main>
    );
}

Pages Router

// pages/index.tsx
import Editor from '@/components/Editor';

export default function Home() {
    return (
        <main className="h-screen w-screen">
            <h1>Monacopilot Next.js Example</h1>

            <Editor />
        </main>
    );
}

Environment Variables

Create a .env.local 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.

Project Structure

Here's the complete project structure for both routing approaches:

App Router

your-project/
├── app/
│   ├── api/
│   │   └── code-completion/
│   │       └── route.ts
│   └── page.tsx
├── components/
│   └── Editor.tsx
├── .env.local
└── package.json

Pages Router

your-project/
├── pages/
│   ├── api/
│   │   └── code-completion.ts
│   └── index.tsx
├── components/
│   └── Editor.tsx
├── .env.local
└── 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!