monacopilot 0.18.10 → 0.18.11
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 +213 -215
- package/package.json +64 -64
package/README.md
CHANGED
|
@@ -36,13 +36,13 @@ import * as monaco from 'monaco-editor';
|
|
|
36
36
|
import {registerCompletion} from 'monacopilot';
|
|
37
37
|
|
|
38
38
|
const editor = monaco.editor.create(document.getElementById('container'), {
|
|
39
|
-
|
|
39
|
+
language: 'javascript',
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
registerCompletion(monaco, editor, {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
language: 'javascript',
|
|
44
|
+
// Your API endpoint for handling completion requests
|
|
45
|
+
endpoint: 'https://api.example.com/code-completion',
|
|
46
46
|
});
|
|
47
47
|
```
|
|
48
48
|
|
|
@@ -56,23 +56,23 @@ Example using Express.js:
|
|
|
56
56
|
import {Copilot} from 'monacopilot';
|
|
57
57
|
|
|
58
58
|
const copilot = new Copilot(OPENAI_API_KEY, {
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
provider: 'openai',
|
|
60
|
+
model: 'gpt-4o',
|
|
61
61
|
});
|
|
62
62
|
|
|
63
63
|
app.post('/code-completion', async (req, res) => {
|
|
64
|
-
|
|
64
|
+
const {completion, error, raw} = await copilot.complete({body: req.body});
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
// Optional: Use raw response for analytics or token counting
|
|
67
|
+
if (raw) {
|
|
68
|
+
calculateCost(raw.usage.input_tokens);
|
|
69
|
+
}
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
if (error) {
|
|
72
|
+
return res.status(500).json({completion: null, error});
|
|
73
|
+
}
|
|
74
74
|
|
|
75
|
-
|
|
75
|
+
res.json({completion});
|
|
76
76
|
});
|
|
77
77
|
```
|
|
78
78
|
|
|
@@ -86,8 +86,8 @@ app.post('/code-completion', async (req, res) => {
|
|
|
86
86
|
Here are some examples of how to integrate Monacopilot into your project:
|
|
87
87
|
|
|
88
88
|
- Next.js
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
- [App Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/app)
|
|
90
|
+
- [Pages Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/pages)
|
|
91
91
|
- [Remix](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/remix)
|
|
92
92
|
- [Vue](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/vue)
|
|
93
93
|
|
|
@@ -107,32 +107,32 @@ Expand the table of contents below to navigate to your desired section.
|
|
|
107
107
|
<summary>Table of Contents</summary>
|
|
108
108
|
|
|
109
109
|
- [Register Completion Options](#register-completion-options)
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
110
|
+
- [Trigger Mode](#trigger-mode)
|
|
111
|
+
- [Manually Trigger Completions](#manually-trigger-completions)
|
|
112
|
+
- [Trigger Completions with a Keyboard Shortcut](#trigger-completions-with-a-keyboard-shortcut)
|
|
113
|
+
- [Trigger Completions with an Editor Action](#trigger-completions-with-an-editor-action)
|
|
114
|
+
- [Multi-File Context](#multi-file-context)
|
|
115
|
+
- [Filename](#filename)
|
|
116
|
+
- [Completions for Specific Technologies](#completions-for-specific-technologies)
|
|
117
|
+
- [Max Context Lines](#max-context-lines)
|
|
118
|
+
- [Caching Completions](#caching-completions)
|
|
119
|
+
- [Handling Errors](#handling-errors)
|
|
120
|
+
- [Custom Request Handler](#custom-request-handler)
|
|
121
|
+
- [Request Handler Example](#request-handler-example)
|
|
122
|
+
- [Completion Event Handlers](#completion-event-handlers)
|
|
123
|
+
- [onCompletionShown](#oncompletionshown)
|
|
124
|
+
- [onCompletionAccepted](#oncompletionaccepted)
|
|
125
|
+
- [onCompletionRejected](#oncompletionrejected)
|
|
126
126
|
- [Copilot Options](#copilot-options)
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
- [Changing the Provider and Model](#changing-the-provider-and-model)
|
|
128
|
+
- [Custom Model](#custom-model)
|
|
129
129
|
- [Completion Request Options](#completion-request-options)
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
- [Custom Headers for LLM Requests](#custom-headers-for-llm-requests)
|
|
131
|
+
- [Custom Prompt](#custom-prompt)
|
|
132
132
|
- [Cross-Language API Handler Implementation](#cross-language-api-handler-implementation)
|
|
133
133
|
- [Security](#security)
|
|
134
134
|
- [Contributing](#contributing)
|
|
135
|
-
</details>
|
|
135
|
+
</details>
|
|
136
136
|
|
|
137
137
|
## Register Completion Options
|
|
138
138
|
|
|
@@ -142,7 +142,7 @@ The `trigger` option determines when the completion service provides code comple
|
|
|
142
142
|
|
|
143
143
|
```javascript
|
|
144
144
|
registerCompletion(monaco, editor, {
|
|
145
|
-
|
|
145
|
+
trigger: 'onTyping',
|
|
146
146
|
});
|
|
147
147
|
```
|
|
148
148
|
|
|
@@ -163,7 +163,7 @@ If you prefer not to trigger completions automatically (e.g., on typing or on id
|
|
|
163
163
|
|
|
164
164
|
```javascript
|
|
165
165
|
const completion = registerCompletion(monaco, editor, {
|
|
166
|
-
|
|
166
|
+
trigger: 'onDemand',
|
|
167
167
|
});
|
|
168
168
|
|
|
169
169
|
completion.trigger();
|
|
@@ -177,14 +177,14 @@ You can set up completions to trigger when the `Ctrl+Shift+Space` keyboard short
|
|
|
177
177
|
|
|
178
178
|
```javascript
|
|
179
179
|
const completion = registerCompletion(monaco, editor, {
|
|
180
|
-
|
|
180
|
+
trigger: 'onDemand',
|
|
181
181
|
});
|
|
182
182
|
|
|
183
183
|
editor.addCommand(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
184
|
+
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Space,
|
|
185
|
+
() => {
|
|
186
|
+
completion.trigger();
|
|
187
|
+
},
|
|
188
188
|
);
|
|
189
189
|
```
|
|
190
190
|
|
|
@@ -196,19 +196,19 @@ You can add a custom editor action to trigger completions manually.
|
|
|
196
196
|
|
|
197
197
|
```javascript
|
|
198
198
|
const completion = registerCompletion(monaco, editor, {
|
|
199
|
-
|
|
199
|
+
trigger: 'onDemand',
|
|
200
200
|
});
|
|
201
201
|
|
|
202
202
|
monaco.editor.addEditorAction({
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
203
|
+
id: 'monacopilot.triggerCompletion',
|
|
204
|
+
label: 'Complete Code',
|
|
205
|
+
contextMenuGroupId: 'navigation',
|
|
206
|
+
keybindings: [
|
|
207
|
+
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Space,
|
|
208
|
+
],
|
|
209
|
+
run: () => {
|
|
210
|
+
completion.trigger();
|
|
211
|
+
},
|
|
212
212
|
});
|
|
213
213
|
```
|
|
214
214
|
|
|
@@ -218,13 +218,13 @@ Improve the quality and relevance of Copilot's suggestions by providing addition
|
|
|
218
218
|
|
|
219
219
|
```javascript
|
|
220
220
|
registerCompletion(monaco, editor, {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
221
|
+
relatedFiles: [
|
|
222
|
+
{
|
|
223
|
+
path: './utils.js',
|
|
224
|
+
content:
|
|
225
|
+
'export const reverse = (str) => str.split("").reverse().join("")',
|
|
226
|
+
},
|
|
227
|
+
],
|
|
228
228
|
});
|
|
229
229
|
```
|
|
230
230
|
|
|
@@ -236,7 +236,7 @@ Specify the name of the file being edited to receive more contextually relevant
|
|
|
236
236
|
|
|
237
237
|
```javascript
|
|
238
238
|
registerCompletion(monaco, editor, {
|
|
239
|
-
|
|
239
|
+
filename: 'utils.js', // e.g., "index.js", "utils/objects.js"
|
|
240
240
|
});
|
|
241
241
|
```
|
|
242
242
|
|
|
@@ -248,7 +248,7 @@ Enable completions tailored to specific technologies by using the `technologies`
|
|
|
248
248
|
|
|
249
249
|
```javascript
|
|
250
250
|
registerCompletion(monaco, editor, {
|
|
251
|
-
|
|
251
|
+
technologies: ['react', 'next.js', 'tailwindcss'],
|
|
252
252
|
});
|
|
253
253
|
```
|
|
254
254
|
|
|
@@ -262,7 +262,7 @@ For example, if there's a chance that the code in your editor may exceed `500+ l
|
|
|
262
262
|
|
|
263
263
|
```javascript
|
|
264
264
|
registerCompletion(monaco, editor, {
|
|
265
|
-
|
|
265
|
+
maxContextLines: 80,
|
|
266
266
|
});
|
|
267
267
|
```
|
|
268
268
|
|
|
@@ -275,7 +275,7 @@ Monacopilot caches completions by default. It uses a FIFO (First In First Out) s
|
|
|
275
275
|
|
|
276
276
|
```javascript
|
|
277
277
|
registerCompletion(monaco, editor, {
|
|
278
|
-
|
|
278
|
+
enableCaching: false,
|
|
279
279
|
});
|
|
280
280
|
```
|
|
281
281
|
|
|
@@ -287,9 +287,9 @@ You can provide this callback to handle errors yourself, which will disable the
|
|
|
287
287
|
|
|
288
288
|
```javascript
|
|
289
289
|
registerCompletion(monaco, editor, {
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
290
|
+
onError: error => {
|
|
291
|
+
console.error(error);
|
|
292
|
+
},
|
|
293
293
|
});
|
|
294
294
|
```
|
|
295
295
|
|
|
@@ -299,23 +299,23 @@ The `requestHandler` option in the `registerCompletion` function allows you to h
|
|
|
299
299
|
|
|
300
300
|
```javascript
|
|
301
301
|
registerCompletion(monaco, editor, {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
302
|
+
endpoint: 'https://api.example.com/complete',
|
|
303
|
+
// ... other options
|
|
304
|
+
requestHandler: async ({endpoint, body}) => {
|
|
305
|
+
const response = await fetch(endpoint, {
|
|
306
|
+
method: 'POST',
|
|
307
|
+
headers: {
|
|
308
|
+
'Content-Type': 'application/json',
|
|
309
|
+
},
|
|
310
|
+
body: JSON.stringify(body),
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
const data = await response.json();
|
|
314
|
+
|
|
315
|
+
return {
|
|
316
|
+
completion: data.completion,
|
|
317
|
+
};
|
|
318
|
+
},
|
|
319
319
|
});
|
|
320
320
|
```
|
|
321
321
|
|
|
@@ -331,8 +331,8 @@ The `requestHandler` function takes an object with `endpoint` and `body` as para
|
|
|
331
331
|
>
|
|
332
332
|
> ```javascript
|
|
333
333
|
> const customBody = {
|
|
334
|
-
>
|
|
335
|
-
>
|
|
334
|
+
> ...body,
|
|
335
|
+
> myCustomProperty: 'value',
|
|
336
336
|
> };
|
|
337
337
|
> ```
|
|
338
338
|
|
|
@@ -352,24 +352,24 @@ Client-side implementation:
|
|
|
352
352
|
const selectedModel = 'gpt-4'; // Example of model selected by user via UI (e.g. dropdown, settings panel)
|
|
353
353
|
|
|
354
354
|
registerCompletion(monaco, editor, {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
355
|
+
endpoint: 'https://api.example.com/complete',
|
|
356
|
+
requestHandler: async ({endpoint, body}) => {
|
|
357
|
+
const response = await fetch(endpoint, {
|
|
358
|
+
method: 'POST',
|
|
359
|
+
headers: {
|
|
360
|
+
'Content-Type': 'application/json',
|
|
361
|
+
},
|
|
362
|
+
body: JSON.stringify({
|
|
363
|
+
...body,
|
|
364
|
+
model: selectedModel, // Attach selected model to request body
|
|
365
|
+
}),
|
|
366
|
+
});
|
|
367
|
+
|
|
368
|
+
const data = await response.json();
|
|
369
|
+
return {
|
|
370
|
+
completion: data.completion,
|
|
371
|
+
};
|
|
372
|
+
},
|
|
373
373
|
});
|
|
374
374
|
```
|
|
375
375
|
|
|
@@ -383,52 +383,52 @@ const app = express();
|
|
|
383
383
|
|
|
384
384
|
// Initialize different copilot instances for different models
|
|
385
385
|
const copilotInstances = {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
386
|
+
'gpt-4o': new Copilot(process.env.OPENAI_API_KEY, {
|
|
387
|
+
provider: 'openai',
|
|
388
|
+
model: 'gpt-4o',
|
|
389
|
+
}),
|
|
390
|
+
'sonnet-3.5': new Copilot(process.env.ANTHROPIC_API_KEY, {
|
|
391
|
+
provider: 'anthropic',
|
|
392
|
+
model: 'claude-3-5-sonnet',
|
|
393
|
+
}),
|
|
394
|
+
'llama-3': new Copilot(process.env.GROQ_API_KEY, {
|
|
395
|
+
provider: 'groq',
|
|
396
|
+
model: 'llama-3-70b',
|
|
397
|
+
}),
|
|
398
398
|
};
|
|
399
399
|
|
|
400
400
|
app.post('/complete', async (req, res) => {
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
401
|
+
try {
|
|
402
|
+
// Get the selected model from the request body
|
|
403
|
+
const {model, ...completionBody} = req.body;
|
|
404
|
+
|
|
405
|
+
// Use the appropriate copilot instance based on selected model
|
|
406
|
+
const copilot = copilotInstances[model];
|
|
407
|
+
if (!copilot) {
|
|
408
|
+
return res.status(400).json({
|
|
409
|
+
completion: null,
|
|
410
|
+
error: 'Invalid model selected',
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
413
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
414
|
+
const {completion, error} = await copilot.complete({
|
|
415
|
+
body: completionBody,
|
|
416
|
+
});
|
|
417
417
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
418
|
+
if (error) {
|
|
419
|
+
return res.status(500).json({
|
|
420
|
+
completion: null,
|
|
421
|
+
error,
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
424
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
425
|
+
res.json({completion});
|
|
426
|
+
} catch (err) {
|
|
427
|
+
res.status(500).json({
|
|
428
|
+
completion: null,
|
|
429
|
+
error: err.message,
|
|
430
|
+
});
|
|
431
|
+
}
|
|
432
432
|
});
|
|
433
433
|
|
|
434
434
|
app.listen(3000);
|
|
@@ -446,10 +446,10 @@ This event is triggered when a completion suggestion is shown to the user. You c
|
|
|
446
446
|
|
|
447
447
|
```javascript
|
|
448
448
|
registerCompletion(monaco, editor, {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
449
|
+
// ... other options
|
|
450
|
+
onCompletionShown: (completion, range) => {
|
|
451
|
+
console.log('Completion suggestion:', {completion, range});
|
|
452
|
+
},
|
|
453
453
|
});
|
|
454
454
|
```
|
|
455
455
|
|
|
@@ -464,10 +464,10 @@ Event triggered when a completion suggestion is accepted by the user.
|
|
|
464
464
|
|
|
465
465
|
```javascript
|
|
466
466
|
registerCompletion(monaco, editor, {
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
467
|
+
// ... other options
|
|
468
|
+
onCompletionAccepted: () => {
|
|
469
|
+
console.log('Completion accepted');
|
|
470
|
+
},
|
|
471
471
|
});
|
|
472
472
|
```
|
|
473
473
|
|
|
@@ -477,10 +477,10 @@ Event triggered when a completion suggestion is rejected by the user.
|
|
|
477
477
|
|
|
478
478
|
```javascript
|
|
479
479
|
registerCompletion(monaco, editor, {
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
480
|
+
// ... other options
|
|
481
|
+
onCompletionRejected: () => {
|
|
482
|
+
console.log('Completion rejected');
|
|
483
|
+
},
|
|
484
484
|
});
|
|
485
485
|
```
|
|
486
486
|
|
|
@@ -492,8 +492,8 @@ You can specify a different provider and model by setting the `provider` and `mo
|
|
|
492
492
|
|
|
493
493
|
```javascript
|
|
494
494
|
const copilot = new Copilot(process.env.ANTHROPIC_API_KEY, {
|
|
495
|
-
|
|
496
|
-
|
|
495
|
+
provider: 'anthropic',
|
|
496
|
+
model: 'claude-3-5-haiku',
|
|
497
497
|
});
|
|
498
498
|
```
|
|
499
499
|
|
|
@@ -517,27 +517,27 @@ Please ensure you are using a high-quality model, especially for coding tasks, t
|
|
|
517
517
|
|
|
518
518
|
```javascript
|
|
519
519
|
const copilot = new Copilot(process.env.HUGGINGFACE_API_KEY, {
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
520
|
+
// You don't need to set the provider if you are using a custom model.
|
|
521
|
+
// provider: 'huggingface',
|
|
522
|
+
model: {
|
|
523
|
+
config: (apiKey, prompt) => ({
|
|
524
|
+
endpoint:
|
|
525
|
+
'https://api-inference.huggingface.co/models/openai-community/gpt2',
|
|
526
|
+
headers: {
|
|
527
|
+
Authorization: `Bearer ${apiKey}`,
|
|
528
|
+
'Content-Type': 'application/json',
|
|
529
|
+
},
|
|
530
|
+
body: {
|
|
531
|
+
inputs: prompt.user,
|
|
532
|
+
parameters: {
|
|
533
|
+
max_length: 100,
|
|
534
|
+
num_return_sequences: 1,
|
|
535
|
+
temperature: 0.7,
|
|
536
|
+
},
|
|
537
|
+
},
|
|
538
|
+
}),
|
|
539
|
+
transformResponse: response => ({text: response[0].generated_text}),
|
|
540
|
+
},
|
|
541
541
|
});
|
|
542
542
|
```
|
|
543
543
|
|
|
@@ -568,11 +568,11 @@ You can add custom headers to the provider's completion requests. For example, i
|
|
|
568
568
|
|
|
569
569
|
```javascript
|
|
570
570
|
copilot.complete({
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
571
|
+
options: {
|
|
572
|
+
headers: {
|
|
573
|
+
'X-Custom-Header': 'custom-value',
|
|
574
|
+
},
|
|
574
575
|
},
|
|
575
|
-
},
|
|
576
576
|
});
|
|
577
577
|
```
|
|
578
578
|
|
|
@@ -584,12 +584,12 @@ You can customize the prompt used for generating completions by providing a `cus
|
|
|
584
584
|
|
|
585
585
|
```javascript
|
|
586
586
|
copilot.complete({
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
587
|
+
options: {
|
|
588
|
+
customPrompt: metadata => ({
|
|
589
|
+
system: 'Your custom system prompt here',
|
|
590
|
+
user: 'Your custom user prompt here',
|
|
591
|
+
}),
|
|
592
|
+
},
|
|
593
593
|
});
|
|
594
594
|
```
|
|
595
595
|
|
|
@@ -597,12 +597,11 @@ The `system` and `user` prompts in the `customPrompt` function are optional. If
|
|
|
597
597
|
|
|
598
598
|
```javascript
|
|
599
599
|
copilot.complete({
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
}
|
|
605
|
-
},
|
|
600
|
+
options: {
|
|
601
|
+
customPrompt: metadata => ({
|
|
602
|
+
system: 'You are an AI assistant specialized in writing React components, focusing on creating clean...',
|
|
603
|
+
}),
|
|
604
|
+
},
|
|
606
605
|
});
|
|
607
606
|
```
|
|
608
607
|
|
|
@@ -646,9 +645,8 @@ Here's an example of a custom prompt that focuses on generating React component
|
|
|
646
645
|
|
|
647
646
|
```javascript
|
|
648
647
|
const customPrompt = ({textBeforeCursor, textAfterCursor}) => ({
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
user: `Please complete the following React component:
|
|
648
|
+
system: 'You are an AI assistant specialized in writing React components. Focus on creating clean, reusable, and well-structured components.',
|
|
649
|
+
user: `Please complete the following React component:
|
|
652
650
|
|
|
653
651
|
${textBeforeCursor}
|
|
654
652
|
// Cursor position
|
|
@@ -658,7 +656,7 @@ const customPrompt = ({textBeforeCursor, textAfterCursor}) => ({
|
|
|
658
656
|
});
|
|
659
657
|
|
|
660
658
|
copilot.complete({
|
|
661
|
-
|
|
659
|
+
options: {customPrompt},
|
|
662
660
|
});
|
|
663
661
|
```
|
|
664
662
|
|
|
@@ -674,20 +672,20 @@ While the example in this documentation uses JavaScript/Node.js (which is recomm
|
|
|
674
672
|
4. Send the prompt to your chosen LLM and get the completion.
|
|
675
673
|
5. Return a JSON response with the following structure:
|
|
676
674
|
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
675
|
+
```json
|
|
676
|
+
{
|
|
677
|
+
"completion": "Generated completion text"
|
|
678
|
+
}
|
|
679
|
+
```
|
|
682
680
|
|
|
683
|
-
|
|
681
|
+
Or in case of an error:
|
|
684
682
|
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
683
|
+
```json
|
|
684
|
+
{
|
|
685
|
+
"completion": null,
|
|
686
|
+
"error": "Error message"
|
|
687
|
+
}
|
|
688
|
+
```
|
|
691
689
|
|
|
692
690
|
### Key Considerations
|
|
693
691
|
|
|
@@ -742,8 +740,8 @@ Now, Monacopilot is set up to send completion requests to the `/complete` endpoi
|
|
|
742
740
|
|
|
743
741
|
```javascript
|
|
744
742
|
registerCompletion(monaco, editor, {
|
|
745
|
-
|
|
746
|
-
|
|
743
|
+
endpoint: 'https://my-python-api.com/complete',
|
|
744
|
+
// ... other options
|
|
747
745
|
});
|
|
748
746
|
```
|
|
749
747
|
|
package/package.json
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
2
|
+
"name": "monacopilot",
|
|
3
|
+
"version": "0.18.11",
|
|
4
|
+
"description": "AI auto-completion plugin for Monaco Editor",
|
|
5
|
+
"main": "./build/index.js",
|
|
6
|
+
"module": "./build/index.mjs",
|
|
7
|
+
"types": "./build/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"build"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "tsup src/index.ts",
|
|
13
|
+
"dev": "tsup src/index.ts --watch",
|
|
14
|
+
"test": "vitest run",
|
|
15
|
+
"dev:test-ui": "pnpm -C tests/ui dev",
|
|
16
|
+
"tsc": "tsc --noEmit",
|
|
17
|
+
"lint": "eslint . --ext .ts,.tsx --fix",
|
|
18
|
+
"lint:test-ui": "pnpm -C tests/ui lint",
|
|
19
|
+
"validate": "pnpm build && pnpm format && pnpm tsc && pnpm lint && pnpm lint:test-ui",
|
|
20
|
+
"format": "prettier --write .",
|
|
21
|
+
"release": "release-it",
|
|
22
|
+
"prepare": "husky"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@anthropic-ai/sdk": "^0.27.3",
|
|
26
|
+
"@commitlint/cli": "^19.5.0",
|
|
27
|
+
"@commitlint/config-conventional": "^19.5.0",
|
|
28
|
+
"@google/generative-ai": "^0.21.0",
|
|
29
|
+
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
|
|
30
|
+
"@release-it/conventional-changelog": "^8.0.2",
|
|
31
|
+
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
|
32
|
+
"eslint": "^8.57.0",
|
|
33
|
+
"groq-sdk": "^0.3.2",
|
|
34
|
+
"husky": "^9.1.6",
|
|
35
|
+
"monaco-editor": "^0.52.0",
|
|
36
|
+
"openai": "^4.60.1",
|
|
37
|
+
"prettier": "^3.2.5",
|
|
38
|
+
"release-it": "^17.6.0",
|
|
39
|
+
"tsup": "^8.0.2",
|
|
40
|
+
"typescript": "^5.4.3",
|
|
41
|
+
"vite-tsconfig-paths": "^5.1.4",
|
|
42
|
+
"vitest": "^2.0.5"
|
|
43
|
+
},
|
|
44
|
+
"keywords": [
|
|
45
|
+
"monaco-editor",
|
|
46
|
+
"monaco",
|
|
47
|
+
"ai",
|
|
48
|
+
"auto-completion",
|
|
49
|
+
"code-completion",
|
|
50
|
+
"copilot",
|
|
51
|
+
"github-copilot"
|
|
52
|
+
],
|
|
53
|
+
"repository": {
|
|
54
|
+
"type": "git",
|
|
55
|
+
"url": "git+https://github.com/arshad-yaseen/monacopilot.git"
|
|
56
|
+
},
|
|
57
|
+
"maintainers": [
|
|
58
|
+
{
|
|
59
|
+
"name": "Arshad Yaseen",
|
|
60
|
+
"email": "m@arshadyaseen.com",
|
|
61
|
+
"url": "https://arshadyaseen.com"
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
"license": "MIT",
|
|
65
|
+
"author": "Arshad Yaseen <m@arshadyaseen.com> (https://arshadyaseen.com)"
|
|
66
66
|
}
|