monacopilot 0.18.3 → 0.18.4
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 +77 -122
- 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,117 @@
|
|
|
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: '/api/complete',
|
|
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 `/api/complete` endpoint (e.g. using Express.js)
|
|
51
|
+
// to handle completion requests from the editor
|
|
52
|
+
|
|
93
53
|
import {Copilot} from 'monacopilot';
|
|
94
54
|
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
const copilot = new Copilot(process.env.GROQ_API_KEY, {
|
|
98
|
-
provider: 'groq',
|
|
99
|
-
model: 'llama-3-70b',
|
|
55
|
+
const copilot = new Copilot(OPENAI_API_KEY, {
|
|
56
|
+
provider: 'openai', // or 'anthropic', 'google', etc.
|
|
100
57
|
});
|
|
101
58
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const {completion, error, raw} = await copilot.complete({
|
|
106
|
-
body: req.body,
|
|
107
|
-
});
|
|
59
|
+
// Handle completion requests
|
|
60
|
+
app.post('/api/complete', async (req, res) => {
|
|
61
|
+
const {completion, error, raw} = await copilot.complete({body: req.body});
|
|
108
62
|
|
|
109
|
-
//
|
|
110
|
-
// `raw` can be undefined if an error occurred, which happens when `error` is present
|
|
63
|
+
// Optional: Use raw response for analytics or token counting
|
|
111
64
|
if (raw) {
|
|
112
65
|
calculateCost(raw.usage.input_tokens);
|
|
113
66
|
}
|
|
114
67
|
|
|
115
|
-
// Handle errors
|
|
68
|
+
// Handle any errors gracefully
|
|
116
69
|
if (error) {
|
|
117
|
-
|
|
118
|
-
res.status(500).json({completion: null, error});
|
|
70
|
+
return res.status(500).json({completion: null, error});
|
|
119
71
|
}
|
|
120
72
|
|
|
121
|
-
res.
|
|
73
|
+
res.json({completion});
|
|
122
74
|
});
|
|
123
|
-
|
|
124
|
-
app.listen(port);
|
|
125
75
|
```
|
|
126
76
|
|
|
127
|
-
|
|
77
|
+
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
78
|
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
"completion": "Generated completion text"
|
|
132
|
-
}
|
|
133
|
-
```
|
|
79
|
+
That's it! Your Monaco Editor now has AI-powered completions! 🎉
|
|
134
80
|
|
|
135
|
-
|
|
81
|
+
### Examples
|
|
136
82
|
|
|
137
|
-
|
|
138
|
-
{
|
|
139
|
-
"completion": null,
|
|
140
|
-
"error": "Error message"
|
|
141
|
-
}
|
|
142
|
-
```
|
|
83
|
+
Here are some examples of how to integrate Monacopilot into your project:
|
|
143
84
|
|
|
144
|
-
|
|
85
|
+
- Next.js
|
|
86
|
+
- [App Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/app)
|
|
87
|
+
- [Pages Router](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/nextjs/pages)
|
|
88
|
+
- [Remix](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/remix)
|
|
89
|
+
- [Vue](https://github.com/arshad-yaseen/monacopilot/tree/main/examples/vue)
|
|
145
90
|
|
|
146
|
-
|
|
91
|
+
### See it in action
|
|
147
92
|
|
|
148
|
-
|
|
93
|
+
[Inline Completions Demo Video](https://github.com/user-attachments/assets/f2ec4ae1-f658-4002-af9c-c6b1bbad70d9)
|
|
149
94
|
|
|
150
|
-
|
|
95
|
+
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
96
|
|
|
152
|
-
|
|
97
|
+
---
|
|
153
98
|
|
|
154
|
-
|
|
155
|
-
import * as monaco from 'monaco-editor';
|
|
156
|
-
import {registerCompletion} from 'monacopilot';
|
|
99
|
+
The above is all you need to get started with Monacopilot. Read the rest of the documentation for more advanced features.
|
|
157
100
|
|
|
158
|
-
|
|
159
|
-
language: 'javascript',
|
|
160
|
-
});
|
|
101
|
+
Expand the table of contents below to navigate to your desired section.
|
|
161
102
|
|
|
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.
|
|
103
|
+
<details>
|
|
104
|
+
<summary>Table of Contents</summary>
|
|
176
105
|
|
|
177
|
-
|
|
106
|
+
- [Register Completion Options](#register-completion-options)
|
|
107
|
+
- [Trigger Mode](#trigger-mode)
|
|
108
|
+
- [Manually Trigger Completions](#manually-trigger-completions)
|
|
109
|
+
- [Trigger Completions with a Keyboard Shortcut](#trigger-completions-with-a-keyboard-shortcut)
|
|
110
|
+
- [Trigger Completions with an Editor Action](#trigger-completions-with-an-editor-action)
|
|
111
|
+
- [Multi-File Context](#multi-file-context)
|
|
112
|
+
- [Filename](#filename)
|
|
113
|
+
- [Completions for Specific Technologies](#completions-for-specific-technologies)
|
|
114
|
+
- [Max Context Lines](#max-context-lines)
|
|
115
|
+
- [Caching Completions](#caching-completions)
|
|
116
|
+
- [Handling Errors](#handling-errors)
|
|
117
|
+
- [Custom Request Handler](#custom-request-handler)
|
|
118
|
+
- [Request Handler Example](#request-handler-example)
|
|
119
|
+
- [Completion Event Handlers](#completion-event-handlers)
|
|
120
|
+
- [onCompletionShown](#oncompletionshown)
|
|
121
|
+
- [onCompletionAccepted](#oncompletionaccepted)
|
|
122
|
+
- [onCompletionRejected](#oncompletionrejected)
|
|
123
|
+
- [Copilot Options](#copilot-options)
|
|
124
|
+
- [Changing the Provider and Model](#changing-the-provider-and-model)
|
|
125
|
+
- [Custom Model](#custom-model)
|
|
126
|
+
- [Completion Request Options](#completion-request-options)
|
|
127
|
+
- [Custom Headers for LLM Requests](#custom-headers-for-llm-requests)
|
|
128
|
+
- [Custom Prompt](#custom-prompt)
|
|
129
|
+
- [Cross-Language API Handler Implementation](#cross-language-api-handler-implementation)
|
|
130
|
+
- [Security](#security)
|
|
131
|
+
- [Contributing](#contributing)
|
|
132
|
+
</details>
|
|
178
133
|
|
|
179
134
|
## Register Completion Options
|
|
180
135
|
|