docs(examples): hello world, prompt #84

rajbos · 2024-09-13T19:33:17Z

See the conversation in #83

Adding examples folder with easy to start projects (see README in that folder)
Example 1: hello world
Example 2: handle the user prompt by sending it to the Copilot API and returning the result

gr2m

early feedback, I haven't looked at the handle prompt example yet.

I would suggest we remove 1- prefixes, the names should stay on their own

gr2m · 2024-09-13T19:39:52Z

examples/1-hello-world/package.json

+  },
+  "scripts": {
+    "start": "node index.js",
+    "watch": "node --watch index.js"


does node support a --watch flag now?

woah today I learned, thanks!
https://nodejs.org/api/cli.html#--watch

Copilot told me it was available!

examples/1-hello-world/package.json

gr2m · 2024-09-13T19:44:44Z

examples/1-hello-world/package-lock.json

not sure if we should commit lock files for the examples, they might just create a lot of noise

Fair point, I'll remove them

examples/1-hello-world/index.js

gr2m · 2024-09-13T19:47:50Z

examples/1-hello-world/index.js

+} from "@copilot-extensions/preview-sdk";
+
+const server = createServer((request, ressponse) => {
+  console.log(`Received [${request.method}]`);


I think we should log out both the method and the URL

Suggested change

console.log(`Received [${request.method}]`);

console.log(`Received ${request.method} ${request.url}`);

I see you removed the brackets as well. It's a preference of mine to be able to differentiate between fixed text and variable text, and makes it really easy to see when a value is empty.

we can leave in the brackets if you prefer. But values cannot be empty in this context

rajbos · 2024-09-13T19:54:05Z

early feedback, I haven't looked at the handle prompt example yet.

I would suggest we remove 1- prefixes, the names should stay on their own

I was aiming for having a very logical way of knowing where to start and gradually add more complex examples. Numbering them helps so that you do not need to search in the README.

Co-authored-by: Gregor Martynus <[email protected]>

gr2m · 2024-09-13T20:02:27Z

package.json

@@ -21,6 +21,7 @@
  "license": "MIT",
  "description": "JavaScript SDK for Copilot Extensions",
  "dependencies": {
+    "@copilot-extensions/preview-sdk": "^4.0.3",


did you add this dependency on itself intentionally? If yes, why?

No, probably ran an npm install command at the wrong folder. Removed it!

rajbos

Resolved feedback comments in the code

examples/1-hello-world/index.js

rajbos · 2024-09-13T20:12:43Z

examples/1-hello-world/index.js

+} from "@copilot-extensions/preview-sdk";
+
+const server = createServer((request, ressponse) => {
+  console.log(`Received [${request.method}]`);


rajbos · 2024-09-13T20:15:08Z

package.json

@@ -21,6 +21,7 @@
  "license": "MIT",
  "description": "JavaScript SDK for Copilot Extensions",
  "dependencies": {
+    "@copilot-extensions/preview-sdk": "^4.0.3",


No, probably ran an npm install command at the wrong folder. Removed it!

rajbos · 2024-09-13T20:15:53Z

examples/1-hello-world/package-lock.json

gr2m

sorry for all the comments. If you prefer, we can merge it as is and do a follow up pull request to discuss further, or leave out the 2nd example folder and do it in a separate pull request

.gitignore

examples/2-handle-prompt/index.js

gr2m · 2024-09-13T20:22:24Z

examples/2-handle-prompt/index.js

@@ -0,0 +1,100 @@
+import http from 'http';
+import { Octokit } from "@octokit/rest";


Do not use @octokit/rest, use octokit instead. I know Copilot likes to recommend @octokit/rest because it's been around longer, but it's a legacy SDK. octokit is the official all-batteries-included SDK for GitHub's API now

examples/2-handle-prompt/index.js

gr2m · 2024-09-13T20:23:33Z

examples/2-handle-prompt/index.js

+
+// Define the handler function
+const handler = async (request, response) => {
+    if (request.method === 'POST') {


I would reverse condition and do an early return to avoid indentation

Suggested change

if (request.method === 'POST') {

if (request.method !== 'POST') {

gr2m · 2024-09-13T20:25:05Z

examples/2-handle-prompt/index.js

+                // header to indicate the state
+                response.writeHead(200, { 'Content-Type': 'application/json' });


I don't think this is needed. The content is not valid JSON code anyway

gr2m · 2024-09-13T20:26:28Z

examples/2-handle-prompt/index.js

+                // parse the incoming body as that has the information we need to handle the request / user prompt
+                const payload = parseRequestBody(body);


I think I would create a separate method to read the body text instead of moving all the core logic into the request.on('end', async () => { handler. And in this example, we should verify the payload using https://github.com/copilot-extensions/preview-sdk.js/?tab=readme-ov-file#async-verifyrequestbykeyidrawbody-signature-keyid-requestoptions

gr2m · 2024-09-13T20:26:48Z

examples/2-handle-prompt/index.js

+                // add new lines to mark the difference between the fixed text and the dynamic text
+                response.write("\n\n");


the new lines are included in textEvent

Suggested change

// add new lines to mark the difference between the fixed text and the dynamic text

response.write("\n\n");

gr2m · 2024-09-13T20:28:42Z

examples/2-handle-prompt/index.js

+                // add a first system prompt for the payload.messages to add instructions
+                payload.messages.unshift({ role: "system", content: "You are a helpful assistant that talks like a pirate." });	


WE are doing this system message unshifting inside prompt already

https://github.com/copilot-extensions/preview-sdk.js/blob/b7063d6f46af712f3ea884e409a5cb8dbe505a70/lib/prompt.js#L15C9-L25

Suggested change

// add a first system prompt for the payload.messages to add instructions

payload.messages.unshift({ role: "system", content: "You are a helpful assistant that talks like a pirate." });

gr2m · 2024-09-13T20:29:28Z

examples/2-handle-prompt/index.js

+                const payload_message = payload.messages[payload.messages.length - 1];
+                const result = await prompt(payload_message.content, {
+                    messages: payload.messages, // we are giving the prompt the existing messages in this chat conversation
+                    model: "gpt-4",


setting model is optional, we default it to gp-4o right now

preview-sdk.js/lib/prompt.js

Line 4 in b7063d6

const DEFAULT_MODEL = "gpt-4o";

Co-authored-by: Gregor Martynus <[email protected]>

rajbos · 2024-09-14T11:50:05Z

@gr2m , I've addressed most of the feedback but moving the body parsing logic out of the on_end event. Please go over the comments and close them if the feedback has been handled adequately 😄.

gr2m

Let me know if you had a chance to test the apps once you applied all the remaining requested changes. If not I can do that too

examples/2-handle-prompt/index.js

gr2m · 2024-09-14T19:44:24Z

examples/2-handle-prompt/index.js

+            // the prompt to forward to the Copilot API is the last message in the payload
+            const payload_message = payload.messages[payload.messages.length - 1];
+            const result = await prompt(payload_message.content, {
+                system: "you talk like a pirate", // extra instructions for the prompt, the "you are a helpful assistant" is already set in the SDK


The "you are a helpful assistant" is just the default. If you want it to be part of your system prompt then you have to include it in your custom onew

Suggested change

system: "you talk like a pirate", // extra instructions for the prompt, the "you are a helpful assistant" is already set in the SDK

system: "You are a helpful assistant. You talk like a pirate",

gr2m · 2024-09-14T19:44:59Z

examples/2-handle-prompt/index.js

+            // write the prompt response back to Copilot
+            // note that this is only send when the entire response from the Copilot API is ready
+            response.write(createTextEvent(result.message.content));


there is a prompt.stream API but we can do a separate example for that if you like?

gr2m · 2024-09-14T19:45:55Z

examples/2-handle-prompt/package.json

+  },
+  "dependencies": {
+    "@copilot-extensions/preview-sdk": "latest",
+    "@octokit": "latest"


Don't use latest for external dependencies.

Suggested change

"@octokit": "latest"

"octokit": "^4.0.2"

gr2m · 2024-09-17T15:20:42Z

We have a live stream today that I think might draw some interest, I think it would be great to finish this up by then:
https://nickyt.live/#2024-09-17-gregor-martynus%2c%20staff%20software%20engineer%20at%20github

I'll address my remarks to get the PR merged, we can do follow up PRs aftewards

…`createServer`

gr2m

Thank you for getting an examples/ folder started, this will be tremendously helpful. I should have started out with that 🙏🏼

github-actions · 2024-09-18T03:56:58Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

rajbos and others added 8 commits September 9, 2024 22:23

Fixing typos

fc01ac5

Merge remote-tracking branch 'upstream/main'

01315e3

More typos

97db5cc

Added hello-world

54c7182

Adding handle prompt example

b3cec6a

Adding handle prompt example

6b0300c

Merge branch 'main' into example

0d5663a

Trying to fix the note rendering

fbb3721

gr2m reviewed Sep 13, 2024

View reviewed changes

rajbos added 2 commits September 13, 2024 19:51

Fix note

514fa22

Fix note

5d36cb4

rajbos and others added 5 commits September 13, 2024 21:55

Update examples/1-hello-world/index.js

76493da

Co-authored-by: Gregor Martynus <[email protected]>

Update examples/1-hello-world/package.json

82fef70

Co-authored-by: Gregor Martynus <[email protected]>

Update examples/1-hello-world/package.json

e5f95f3

Co-authored-by: Gregor Martynus <[email protected]>

Update examples/1-hello-world/package.json

a91d03b

Co-authored-by: Gregor Martynus <[email protected]>

update file to match the other example

67160bc

gr2m reviewed Sep 13, 2024

View reviewed changes

rajbos added 5 commits September 13, 2024 20:09

Adding showing the user handle

7799456

Stop tracking lock files

a86354c

Stop tracking lock files

373f42a

Display url as well

7e058b9

Remove unwanted change

01f1a0e

rajbos commented Sep 13, 2024

View reviewed changes

gr2m reviewed Sep 13, 2024

View reviewed changes

rajbos and others added 5 commits September 13, 2024 22:39

Update .gitignore

037f7ab

Co-authored-by: Gregor Martynus <[email protected]>

Update examples/2-handle-prompt/index.js

a577333

Co-authored-by: Gregor Martynus <[email protected]>

Update examples/2-handle-prompt/index.js

6bc910d

Co-authored-by: Gregor Martynus <[email protected]>

Handling review comments

0fcccbf

Adding payload verification

d10e4ed

Removed unneeded code

45ead22

Merge branch 'main' into example

7057fd2

gr2m requested changes Sep 14, 2024

View reviewed changes

gr2m self-assigned this Sep 17, 2024

gr2m added 9 commits September 17, 2024 08:30

remove number prefixes of examples folders

cc0ad34

style: prettier

55a290b

return after early response

7aba451

use actual body

f46d975

simplify code by using an async getBody() method, and use imported …

1db7290

…`createServer`

remove unnecessary new lines

4f59a32

more prompt example fixes based on testing

dd6093a

moar fixes

5c4aadf

simplify examples/README.md

6a0551d

gr2m marked this pull request as ready for review September 17, 2024 16:08

gr2m changed the title ~~Adding example projects to help users get started~~ docs(examples): hello world, prompt Sep 17, 2024

gr2m approved these changes Sep 17, 2024

View reviewed changes

gr2m merged commit f61a49d into copilot-extensions:main Sep 17, 2024
3 checks passed

github-actions bot added the released label Sep 18, 2024

	console.log(`Received [${request.method}]`);
	console.log(`Received ${request.method} ${request.url}`);

		@@ -0,0 +1,100 @@
		import http from 'http';
		import { Octokit } from "@octokit/rest";

	if (request.method === 'POST') {
	if (request.method !== 'POST') {

		// header to indicate the state
		response.writeHead(200, { 'Content-Type': 'application/json' });

		// parse the incoming body as that has the information we need to handle the request / user prompt
		const payload = parseRequestBody(body);

		// add new lines to mark the difference between the fixed text and the dynamic text
		response.write("\n\n");

		// add a first system prompt for the payload.messages to add instructions
		payload.messages.unshift({ role: "system", content: "You are a helpful assistant that talks like a pirate." });

	system: "you talk like a pirate", // extra instructions for the prompt, the "you are a helpful assistant" is already set in the SDK
	system: "You are a helpful assistant. You talk like a pirate",

docs(examples): hello world, prompt #84

docs(examples): hello world, prompt #84

Conversation

rajbos commented Sep 13, 2024

gr2m left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajbos commented Sep 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajbos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gr2m left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajbos commented Sep 14, 2024

gr2m left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gr2m commented Sep 17, 2024

gr2m left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 18, 2024