vscode posts - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    img: "img",
    h2: "h2",
    strong: "strong",
    a: "a"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides."
    }), "\n", _jsxs(_components.p, {
      children: ["With that goal in mind, Sora provides two ways to activate OpenAI: by typing ", _jsx(_components.code, {
        children: "@OpenAI"
      }), " (formally ", _jsx(_components.code, {
        children: "@ChatGPT"
      }), ") or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-tsx",
        children: "/**\n * Write tests for [my-file](./my-file.ts] using\n * [other-test](../something/other-file.test.ts) as an example\n */\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-06-06-sora/sora-preview.gif",
        alt: "Sora Preview"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["This extension leverages the OpenAI API to send any referenced files and a starting prompt to the ", _jsx(_components.code, {
        children: "gpt-3.5-turbo"
      }), " chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files."]
    }), "\n", _jsx(_components.p, {
      children: "Once the response comes back, the extension parses it and appends it to the original file."
    }), "\n", _jsx(_components.h2, {
      children: _jsx(_components.strong, {
        children: "Installation and Usage"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You can install the extension by going to ", _jsx(_components.a, {
        href: "https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat",
        children: "the VSCode Marketplace"
      }), ", or searching for “Sora” in Visual Studio Code extensions."]
    }), "\n", _jsxs(_components.p, {
      children: ["Once installed, you will need to enter your own OpenAI API key. You can get your key by following ", _jsx(_components.a, {
        href: "https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key",
        children: "these instructions"
      }), ". Then just enter ", _jsx(_components.code, {
        children: "Sora: Set API Key"
      }), " into the Visual Studio Code command prompt."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-06-06-sora/sora-set-api-key.png",
        alt: "Sora Set API Key"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You can review the code ", _jsx(_components.a, {
        href: "https://github.com/CapsuleCat/sora-by-capsule-cat",
        children: "on Github"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: _jsx(_components.strong, {
        children: "Conclusion"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["It was fun building my first extension. Please feel free to reach out on our ", _jsx(_components.a, {
        href: "https://github.com/CapsuleCat/sora-by-capsule-cat",
        children: "Github"
      }), " for feedback or questions."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides.</p>
<p>With that goal in mind, Sora provides two ways to activate OpenAI: by typing <code>@OpenAI</code> (formally <code>@ChatGPT</code>) or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-tsx">/**
 * Write tests for [my-file](./my-file.ts] using
 * [other-test](../something/other-file.test.ts) as an example
 */
</code></pre></div>
<p>Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you.</p>
<p><img alt="Sora Preview" src="/media/2023-06-06-sora/sora-preview.gif" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>This extension leverages the OpenAI API to send any referenced files and a starting prompt to the <code>gpt-3.5-turbo</code> chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files.</p>
<p>Once the response comes back, the extension parses it and appends it to the original file.</p>
<h2><strong>Installation and Usage</strong></h2>
<p>You can install the extension by going to <a href="https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat">the VSCode Marketplace</a>, or searching for “Sora” in Visual Studio Code extensions.</p>
<p>Once installed, you will need to enter your own OpenAI API key. You can get your key by following <a href="https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key">these instructions</a>. Then just enter <code>Sora: Set API Key</code> into the Visual Studio Code command prompt.</p>
<p><img alt="Sora Set API Key" src="/media/2023-06-06-sora/sora-set-api-key.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>You can review the code <a href="https://github.com/CapsuleCat/sora-by-capsule-cat">on Github</a>.</p>
<h2><strong>Conclusion</strong></h2>
<p>It was fun building my first extension. Please feel free to reach out on our <a href="https://github.com/CapsuleCat/sora-by-capsule-cat">Github</a> for feedback or questions.</p>

Github Copilot and other AI tools are hitting the scene. I decided to create my own Visual Studio Code extension, which is designed to use OpenAI’s APIs to bring some additional ChatGPT functionality into the code editor. The goal with Sora was to enable a developer to thoughtfully write a comment about the code they would like the AI to write, and then commit to it – rather than the real-time typeahead that Github Copilot provides.

With that goal in mind, Sora provides two ways to activate OpenAI: by typing `@OpenAI` (formally `@ChatGPT`) or clicking “Send to OpenAI” when hovering over a comment. The other improvement is that Sora will read any relative link references to files in your project. A great way to use this is to have OpenAI write code in the style that already exists in your project, for example:

```tsx
/**
 * Write tests for [my-file](./my-file.ts] using
 * [other-test](../something/other-file.test.ts) as an example
 */
```

Using this extension lets users write specifications as comments, and have ChatGPT write the entire file for you.

![Sora Preview](/media/2023-06-06-sora/sora-preview.gif)

This extension leverages the OpenAI API to send any referenced files and a starting prompt to the `gpt-3.5-turbo` chat completion endpoint. The prompt mainly sets the context for creating working code using a given language and reference files.

Once the response comes back, the extension parses it and appends it to the original file.

## **Installation and Usage**

You can install the extension by going to [the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=CapsuleCat.sora-by-capsule-cat), or searching for “Sora” in Visual Studio Code extensions.

Once installed, you will need to enter your own OpenAI API key. You can get your key by following [these instructions](https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key). Then just enter `Sora: Set API Key` into the Visual Studio Code command prompt.

![Sora Set API Key](/media/2023-06-06-sora/sora-set-api-key.png)

You can review the code [on Github](https://github.com/CapsuleCat/sora-by-capsule-cat).

## **Conclusion**

It was fun building my first extension. Please feel free to reach out on our [Github](https://github.com/CapsuleCat/sora-by-capsule-cat) for feedback or questions.


Sora - OpenAI Visual Studio Code Extension