https://github.com/asadm/codemirror-copilot

CodeMirror extension to add GPT autocompletion like GitHub's Copilot.

https://github.com/asadm/codemirror-copilot

Science Score: 13.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • CITATION.cff file
  • codemeta.json file
    Found codemeta.json file
  • .zenodo.json file
  • DOI references
  • Academic publication links
  • Committers with academic emails
  • Institutional organization owner
  • JOSS paper metadata
  • Scientific vocabulary similarity
    Low similarity (8.5%) to scientific vocabulary
Last synced: 11 months ago · JSON representation

Repository

CodeMirror extension to add GPT autocompletion like GitHub's Copilot.

Basic Info
Statistics
  • Stars: 149
  • Watchers: 3
  • Forks: 14
  • Open Issues: 3
  • Releases: 3
Created over 2 years ago · Last pushed about 2 years ago
Metadata Files
Readme License

README.md

codemirror-copilot

npm version

This CodeMirror extension lets you use GPT to autocomplete code in CodeMirror. It let's you call your API with current code (prefix and suffix from current cursor position) and let your API return the code to autocomplete.

Screenshot

Demo

https://copilot.asadmemon.com

Installation

bash npm install codemirror-copilot --save

Usage

```javascript import CodeMirror from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { inlineCopilot } from "codemirror-copilot";

function CodeEditor() { return ( <CodeMirror value="" height="300px" extensions={[ javascript({ jsx: true }),

    // Implement a function that returns a promise that resolves to the prediction
    inlineCopilot(async (prefix, suffix) => {
      const res = await fetch("/api/autocomplete", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ prefix, suffix, language: "javascript" }),
      });

      const { prediction } = await res.json();
      return prediction;
    }),
  ]}
/>

); } ```

You also need to implement an API that returns the prediction. For above code, here is an example API in Next.js that uses OpenAI 's gpt-3.5-turbo-1106 model:

```javascript import OpenAI from "openai";

const openai = new OpenAI({ apiKey: process.env.OPENAIAPIKEY, });

async function completion( prefix, suffix, model = "gpt-3.5-turbo-1106", language, ) { const chatCompletion = await openai.chat.completions.create({ messages: [ { role: "system", content: You are a ${ language ? language + " " : "" }programmer that replaces <FILL_ME> part with the right code. Only output the code that replaces <FILL_ME> part. Do not add any explanation or markdown., }, { role: "user", content: ${prefix}<FILL_ME>${suffix} }, ], model, });

return chatCompletion.choices[0].message.content; }

export default async function handler(req, res) { const { prefix, suffix, model, language } = req.body; const prediction = await completion(prefix, suffix, model, language); console.log(prediction); res.status(200).json({ prediction }); } ```

API

inlineCopilot(apiCallingFn: (prefix: string, suffix: string) => Promise<string>, delay: number = 1000)

Provides extension for CodeMirror that renders the hints UI + Tab completion based on the prediction returned by the API.

The delay parameter is the time in milliseconds to wait before calling the apiCallingFn after the user stops typing. Default value is 1000.

The extension also implements local caching of predictions to avoid unnecessary API calls.

clearLocalCache()

Clears the local cache of predictions.

Local Development

In one terminal, build the library itself by running:

bash cd packages/codemirror-copilot npm install npm run dev

In another terminal, run the demo website:

bash cd website npm install npm run dev

Acknowledgements

This code is based on codemirror-extension-inline-suggestion by Shan Aminzadeh.

License

MIT © Asad Memon

Owner

  • Name: Asad Memon
  • Login: asadm
  • Kind: user
  • Location: San Francisco Bay Area

GitHub Events

Total
  • Watch event: 58
  • Fork event: 6
Last Year
  • Watch event: 58
  • Fork event: 6

Committers

Last synced: about 1 year ago

All Time
  • Total Commits: 27
  • Total Committers: 2
  • Avg Commits per committer: 13.5
  • Development Distribution Score (DDS): 0.481
Past Year
  • Commits: 0
  • Committers: 0
  • Avg Commits per committer: 0.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
Asad Memon a****k@g****m 14
Tom MacWright t****m@m****m 13
Committer Domains (Top 20 + Academic)

Issues and Pull Requests

Last synced: 11 months ago

All Time
  • Total issues: 4
  • Total pull requests: 14
  • Average time to close issues: 7 days
  • Average time to close pull requests: 31 minutes
  • Total issue authors: 3
  • Total pull request authors: 3
  • Average comments per issue: 0.75
  • Average comments per pull request: 1.29
  • Merged pull requests: 12
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 1
  • Average time to close issues: N/A
  • Average time to close pull requests: 1 minute
  • Issue authors: 0
  • Pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 2.0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
Top Authors
Issue Authors
  • tmcw (2)
  • nandorojo (1)
  • jianglibo (1)
Pull Request Authors
  • tmcw (11)
  • asadm (4)
  • schkolne (2)
Top Labels
Issue Labels
Pull Request Labels

Packages

  • Total packages: 2
  • Total downloads:
    • npm 8,581 last-month
  • Total dependent packages: 0
    (may contain duplicates)
  • Total dependent repositories: 0
    (may contain duplicates)
  • Total versions: 10
  • Total maintainers: 5
npmjs.org: @mightymeld/codemirror-copilot

This CodeMirror extension lets you use GPT to autocomplete code in CodeMirror.

  • Versions: 3
  • Dependent Packages: 0
  • Dependent Repositories: 0
  • Downloads: 8 Last month
Rankings
Downloads: 11.8%
Average: 25.6%
Dependent repos count: 26.5%
Dependent packages count: 38.6%
Last synced: 11 months ago
npmjs.org: codemirror-copilot

This CodeMirror extension lets you use GPT to autocomplete code in CodeMirror.

  • Versions: 7
  • Dependent Packages: 0
  • Dependent Repositories: 0
  • Downloads: 8,573 Last month
Rankings
Dependent repos count: 36.3%
Average: 44.2%
Dependent packages count: 52.1%
Maintainers (2)
Last synced: 11 months ago

Dependencies

packages/codemirror-copilot/package-lock.json npm
  • 238 dependencies
packages/codemirror-copilot/package.json npm
  • @typescript-eslint/eslint-plugin ^5.48.1 development
  • @typescript-eslint/parser ^5.48.1 development
  • eslint ^8.31.0 development
  • eslint-config-prettier ^8.6.0 development
  • eslint-plugin-prettier ^4.2.1 development
  • nodemon ^3.0.1 development
  • prettier 2.8.2 development
  • typescript ^4.9.4 development
  • vite ^4.0.0 development
  • vite-plugin-dts ^1.7.1 development
website/package-lock.json npm
  • 217 dependencies
website/package.json npm
  • autoprefixer ^10.0.1 development
  • postcss ^8 development
  • tailwindcss ^3.3.0 development
  • @codemirror/lang-javascript ^6.2.1
  • @radix-ui/react-icons ^1.3.0
  • @radix-ui/react-select ^2.0.0
  • @uiw/codemirror-theme-dracula ^4.21.21
  • @uiw/codemirror-theme-solarized ^4.21.21
  • @uiw/codemirror-theme-sublime ^4.21.21
  • @uiw/react-codemirror ^4.21.21
  • class-variance-authority ^0.7.0
  • clsx ^2.0.0
  • lucide-react ^0.294.0
  • next 14.0.3
  • openai ^4.20.1
  • react ^18
  • react-dom ^18
  • tailwind-merge ^2.1.0
  • tailwindcss-animate ^1.0.7