monacopilot 0.18.3 → 0.18.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -126
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
[](https://github.com/arshad-yaseen/monacopilot/blob/main/LICENSE)
|
|
3
3
|
[](https://bundlephobia.com/package/monacopilot)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
5
|
# Monacopilot
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
Add GitHub Copilot-style AI completions to your Monaco Editor in minutes! 🚀
|
|
8
|
+
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
### Features
|
|
12
12
|
|
|
@@ -19,162 +19,118 @@
|
|
|
19
19
|
- 🔌 Custom Model Support
|
|
20
20
|
- 🎮 Manual Trigger Support
|
|
21
21
|
|
|
22
|
-
###
|
|
22
|
+
### Quick Start (3 Simple Steps)
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
### Table of Contents
|
|
27
|
-
|
|
28
|
-
- [Examples](#examples)
|
|
29
|
-
- [Demo](#demo)
|
|
30
|
-
- [Installation](#installation)
|
|
31
|
-
- [Usage](#usage)
|
|
32
|
-
- [API Handler](#api-handler)
|
|
33
|
-
- [Register Completion with the Monaco Editor](#register-completion-with-the-monaco-editor)
|
|
34
|
-
- [Register Completion Options](#register-completion-options)
|
|
35
|
-
- [Trigger Mode](#trigger-mode)
|
|
36
|
-
- [Manually Trigger Completions](#manually-trigger-completions)
|
|
37
|
-
- [Trigger Completions with a Keyboard Shortcut](#trigger-completions-with-a-keyboard-shortcut)
|
|
38
|
-
- [Trigger Completions with an Editor Action](#trigger-completions-with-an-editor-action)
|
|
39
|
-
- [Multi-File Context](#multi-file-context)
|
|
40
|
-
- [Filename](#filename)
|
|
41
|
-
- [Completions for Specific Technologies](#completions-for-specific-technologies)
|
|
42
|
-
- [Max Context Lines](#max-context-lines)
|
|
43
|
-
- [Caching Completions](#caching-completions)
|
|
44
|
-
- [Handling Errors](#handling-errors)
|
|
45
|
-
- [Custom Request Handler](#custom-request-handler)
|
|
46
|
-
- [Request Handler Example](#request-handler-example)
|
|
47
|
-
- [Completion Event Handlers](#completion-event-handlers)
|
|
48
|
-
- [onCompletionShown](#oncompletionshown)
|
|
49
|
-
- [onCompletionAccepted](#oncompletionaccepted)
|
|
50
|
-
- [onCompletionRejected](#oncompletionrejected)
|
|
51
|
-
- [Copilot Options](#copilot-options)
|
|
52
|
-
- [Changing the Provider and Model](#changing-the-provider-and-model)
|
|
53
|
-
- [Custom Model](#custom-model)
|
|
54
|
-
- [Completion Request Options](#completion-request-options)
|
|
55
|
-
- [Custom Headers for LLM Requests](#custom-headers-for-llm-requests)
|
|
56
|
-
- [Custom Prompt](#custom-prompt)
|
|
57
|
-
- [Cross-Language API Handler Implementation](#cross-language-api-handler-implementation)
|
|
58
|
-
- [Security](#security)
|
|
59
|
-
- [Contributing](#contributing)
|
|
60
|
-
|
|
61
|
-
### Examples
|
|
62
|
-
|
|
63
|
-
Here are some examples of how to integrate Monacopilot into your project:
|
|
64
|
-
|
|
65
|
-
- Next.js
|
|
66
|
-
- [App Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/app)
|
|
67
|
-
- [Pages Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/pages)
|
|
68
|
-
- [Remix](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/remix)
|
|
69
|
-
- [Vue](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/vue)
|
|
70
|
-
|
|
71
|
-
### Demo
|
|
72
|
-
|
|
73
|
-
[Inline Completions Demo Video](https://github.com/user-attachments/assets/f2ec4ae1-f658-4002-af9c-c6b1bbad70d9)
|
|
74
|
-
|
|
75
|
-
In the demo, we are using the `onTyping` trigger mode with the Groq model, which is why you see such quick and fast completions. Groq provides very fast response times.
|
|
76
|
-
|
|
77
|
-
### Installation
|
|
78
|
-
|
|
79
|
-
To install Monacopilot, run:
|
|
24
|
+
1. **Install the package**
|
|
80
25
|
|
|
81
26
|
```bash
|
|
82
27
|
npm install monacopilot
|
|
83
28
|
```
|
|
84
29
|
|
|
85
|
-
|
|
30
|
+
2. **Register the AI completion to your editor**
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
// In your frontend code
|
|
34
|
+
import * as monaco from 'monaco-editor';
|
|
35
|
+
import {registerCompletion} from 'monacopilot';
|
|
36
|
+
|
|
37
|
+
const editor = monaco.editor.create(document.getElementById('container'), {
|
|
38
|
+
language: 'javascript',
|
|
39
|
+
});
|
|
86
40
|
|
|
87
|
-
|
|
41
|
+
registerCompletion(monaco, editor, {
|
|
42
|
+
endpoint: 'https://api.example.com/code-completion', // Your API endpoint for handling completion requests
|
|
43
|
+
language: 'javascript',
|
|
44
|
+
});
|
|
45
|
+
```
|
|
88
46
|
|
|
89
|
-
|
|
47
|
+
3. **Create your completion API handler**
|
|
90
48
|
|
|
91
49
|
```javascript
|
|
92
|
-
|
|
50
|
+
// Create an API handler for the endpoint (e.g. /code-completion) you provided in the `registerCompletion` function
|
|
51
|
+
// to handle completion requests from the editor
|
|
52
|
+
|
|
93
53
|
import {Copilot} from 'monacopilot';
|
|
94
54
|
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
provider: 'groq',
|
|
99
|
-
model: 'llama-3-70b',
|
|
55
|
+
const copilot = new Copilot(OPENAI_API_KEY, {
|
|
56
|
+
provider: 'openai', // or 'anthropic', 'google', etc.,
|
|
57
|
+
model: 'gpt-4o', // or 'claude-3-5-haiku', 'gpt-4o-mini', etc.
|
|
100
58
|
});
|
|
101
59
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const {completion, error, raw} = await copilot.complete({
|
|
106
|
-
body: req.body,
|
|
107
|
-
});
|
|
60
|
+
// Handle completion requests
|
|
61
|
+
app.post('/code-completion', async (req, res) => {
|
|
62
|
+
const {completion, error, raw} = await copilot.complete({body: req.body});
|
|
108
63
|
|
|
109
|
-
//
|
|
110
|
-
// `raw` can be undefined if an error occurred, which happens when `error` is present
|
|
64
|
+
// Optional: Use raw response for analytics or token counting
|
|
111
65
|
if (raw) {
|
|
112
66
|
calculateCost(raw.usage.input_tokens);
|
|
113
67
|
}
|
|
114
68
|
|
|
115
|
-
// Handle errors
|
|
69
|
+
// Handle any errors gracefully
|
|
116
70
|
if (error) {
|
|
117
|
-
|
|
118
|
-
res.status(500).json({completion: null, error});
|
|
71
|
+
return res.status(500).json({completion: null, error});
|
|
119
72
|
}
|
|
120
73
|
|
|
121
|
-
res.
|
|
74
|
+
res.json({completion});
|
|
122
75
|
});
|
|
123
|
-
|
|
124
|
-
app.listen(port);
|
|
125
76
|
```
|
|
126
77
|
|
|
127
|
-
|
|
78
|
+
You can use any backend framework or programming language for your API handler, as long as the endpoint is accessible from the browser. For non-JavaScript implementations, see [Cross-Language API Handler Implementation](#cross-language-api-handler-implementation).
|
|
128
79
|
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
"completion": "Generated completion text"
|
|
132
|
-
}
|
|
133
|
-
```
|
|
80
|
+
That's it! Your Monaco Editor now has AI-powered completions! 🎉
|
|
134
81
|
|
|
135
|
-
|
|
82
|
+
### Examples
|
|
136
83
|
|
|
137
|
-
|
|
138
|
-
{
|
|
139
|
-
"completion": null,
|
|
140
|
-
"error": "Error message"
|
|
141
|
-
}
|
|
142
|
-
```
|
|
84
|
+
Here are some examples of how to integrate Monacopilot into your project:
|
|
143
85
|
|
|
144
|
-
|
|
86
|
+
- Next.js
|
|
87
|
+
- [App Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/app)
|
|
88
|
+
- [Pages Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/pages)
|
|
89
|
+
- [Remix](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/remix)
|
|
90
|
+
- [Vue](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/vue)
|
|
145
91
|
|
|
146
|
-
|
|
92
|
+
### See it in action
|
|
147
93
|
|
|
148
|
-
|
|
94
|
+
[Inline Completions Demo Video](https://github.com/user-attachments/assets/f2ec4ae1-f658-4002-af9c-c6b1bbad70d9)
|
|
149
95
|
|
|
150
|
-
|
|
96
|
+
In the demo, we are using the `onTyping` trigger mode with the Groq model, which is why you see such quick and fast completions. Groq provides very fast response times.
|
|
151
97
|
|
|
152
|
-
|
|
98
|
+
---
|
|
153
99
|
|
|
154
|
-
|
|
155
|
-
import * as monaco from 'monaco-editor';
|
|
156
|
-
import {registerCompletion} from 'monacopilot';
|
|
100
|
+
The above is all you need to get started with Monacopilot. Read the rest of the documentation for more advanced features.
|
|
157
101
|
|
|
158
|
-
|
|
159
|
-
language: 'javascript',
|
|
160
|
-
});
|
|
102
|
+
Expand the table of contents below to navigate to your desired section.
|
|
161
103
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
// - '/api/complete' if you're using the Next.js (API handler) or similar frameworks.
|
|
165
|
-
// - 'https://api.example.com/complete' for a separate API server
|
|
166
|
-
// Ensure this can be accessed from the browser.
|
|
167
|
-
endpoint: 'https://api.example.com/complete',
|
|
168
|
-
// The language of the editor.
|
|
169
|
-
language: 'javascript',
|
|
170
|
-
});
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
> [!NOTE]
|
|
174
|
-
> The `registerCompletion` function returns a `completion` object with a `deregister` method. This method should be used to clean up the completion functionality when it's no longer needed.
|
|
175
|
-
> For example, in a React component, you can call `completion.deregister()` within the `useEffect` cleanup function to ensure proper disposal when the component unmounts.
|
|
104
|
+
<details>
|
|
105
|
+
<summary>Table of Contents</summary>
|
|
176
106
|
|
|
177
|
-
|
|
107
|
+
- [Register Completion Options](#register-completion-options)
|
|
108
|
+
- [Trigger Mode](#trigger-mode)
|
|
109
|
+
- [Manually Trigger Completions](#manually-trigger-completions)
|
|
110
|
+
- [Trigger Completions with a Keyboard Shortcut](#trigger-completions-with-a-keyboard-shortcut)
|
|
111
|
+
- [Trigger Completions with an Editor Action](#trigger-completions-with-an-editor-action)
|
|
112
|
+
- [Multi-File Context](#multi-file-context)
|
|
113
|
+
- [Filename](#filename)
|
|
114
|
+
- [Completions for Specific Technologies](#completions-for-specific-technologies)
|
|
115
|
+
- [Max Context Lines](#max-context-lines)
|
|
116
|
+
- [Caching Completions](#caching-completions)
|
|
117
|
+
- [Handling Errors](#handling-errors)
|
|
118
|
+
- [Custom Request Handler](#custom-request-handler)
|
|
119
|
+
- [Request Handler Example](#request-handler-example)
|
|
120
|
+
- [Completion Event Handlers](#completion-event-handlers)
|
|
121
|
+
- [onCompletionShown](#oncompletionshown)
|
|
122
|
+
- [onCompletionAccepted](#oncompletionaccepted)
|
|
123
|
+
- [onCompletionRejected](#oncompletionrejected)
|
|
124
|
+
- [Copilot Options](#copilot-options)
|
|
125
|
+
- [Changing the Provider and Model](#changing-the-provider-and-model)
|
|
126
|
+
- [Custom Model](#custom-model)
|
|
127
|
+
- [Completion Request Options](#completion-request-options)
|
|
128
|
+
- [Custom Headers for LLM Requests](#custom-headers-for-llm-requests)
|
|
129
|
+
- [Custom Prompt](#custom-prompt)
|
|
130
|
+
- [Cross-Language API Handler Implementation](#cross-language-api-handler-implementation)
|
|
131
|
+
- [Security](#security)
|
|
132
|
+
- [Contributing](#contributing)
|
|
133
|
+
</details>
|
|
178
134
|
|
|
179
135
|
## Register Completion Options
|
|
180
136
|
|
|
@@ -309,7 +265,7 @@ registerCompletion(monaco, editor, {
|
|
|
309
265
|
```
|
|
310
266
|
|
|
311
267
|
> [!NOTE]
|
|
312
|
-
> If you're using `
|
|
268
|
+
> If you're using `groq` as your provider, it's recommended to set `maxContextLines` to `60` or less due to its low rate limits and lack of pay-as-you-go pricing. However, Groq is expected to offer pay-as-you-go pricing in the near future.
|
|
313
269
|
|
|
314
270
|
### Caching Completions
|
|
315
271
|
|
|
@@ -533,9 +489,9 @@ registerCompletion(monaco, editor, {
|
|
|
533
489
|
You can specify a different provider and model by setting the `provider` and `model` parameters in the `Copilot` instance.
|
|
534
490
|
|
|
535
491
|
```javascript
|
|
536
|
-
const copilot = new Copilot(process.env.
|
|
537
|
-
provider: '
|
|
538
|
-
model: '
|
|
492
|
+
const copilot = new Copilot(process.env.ANTHROPIC_API_KEY, {
|
|
493
|
+
provider: 'anthropic',
|
|
494
|
+
model: 'claude-3-5-haiku',
|
|
539
495
|
});
|
|
540
496
|
```
|
|
541
497
|
|