OpenAI Codex Tutorial #3 - Code Code Review — Transcript

Full transcript

1. 0:00All right then, my friends. So, we've
2. 0:02seen now how Codex Cloud can run tasks
3. 0:04to make code changes and open pull
4. 0:06requests. Now, I want to show you how
5. 0:08Codex can review its own PR directly on
6. 0:10GitHub. So, the first thing we need to
7. 0:12do is come to the settings link up here
8. 0:14and then head to the code review option.
9. 0:17Once you're there, you're going to see a
10. 0:18list of all the repos on your GitHub
11. 0:20account. And we just need to search for
12. 0:22the repo we want to enable code review
13. 0:24for. In our case, Codeex has been
14. 0:26working on the Yumpair repo. So, we're
15. 0:28going to search for that repo in this
16. 0:30search bar. Now, one thing I have
17. 0:33noticed about the Codeex Cloud UX is
18. 0:35that sometimes it's a little bit laggy,
19. 0:37a little bit slow, and it can take a
20. 0:39long time to try and find a repo. But
21. 0:41once it is showing, you should be able
22. 0:43to hit the little toggle switch to allow
23. 0:45Codeex to review u the work on that
24. 0:48repo. But again, the UX and UI is really
25. 0:51unresponsive and slow. It might just be
26. 0:53at the moment. So, you might need to
27. 0:54refresh the page to see that switch
28. 0:56turned on. Anyway, now we have Codex
29. 0:59review switched on for the project, we
30. 1:01can go back to the Codeex dashboard and
31. 1:03assign another task to Codeex, but this
32. 1:06time once it's completed the task and
33. 1:07opened the PR, we'll have Codex review
34. 1:09its own code as well. So again, I'm
35. 1:12going to make sure that the main branch
36. 1:13is selected for the environment that
37. 1:15we're working in because that's where I
38. 1:17want Codex to branch from. And then I'm
39. 1:19going to paste in the following prompt.
40. 1:22I want some front-end validation for the
41. 1:24add new pair form. Users must add a
42. 1:27description at least 10 characters long
43. 1:29and have at least one tag added. The
44. 1:31other two fields, food A and food B, are
45. 1:33also required. Can you add some
46. 1:35validation and error feedback to the
47. 1:37form based on these conditions when a
48. 1:40user submits? So then we'll hit the code
49. 1:43button to fire off this task, which we
50. 1:45will see after a moment down in the task
51. 1:47list. Again, Codeex is going to spin up
52. 1:49a new container to work on that task in
53. 1:52isolation, and we can keep track of
54. 1:54everything it's doing in real time by
55. 1:56heading to that task and then to the
56. 1:58logs. So, I'm not going to sit here
57. 2:00right now and just keep this recording
58. 2:01while it's working. I'm going to pause
59. 2:03the recording right now. I'm going to
60. 2:04start it back up again when it's done.
61. 2:07All right, so now it's all done and we
62. 2:09can see all the changes it's made. Let's
63. 2:12go ahead and open a PR by clicking on
64. 2:14this button right here. And again, once
65. 2:16it's made that PR, after a few moments,
66. 2:18we can click the button again to view it
67. 2:20on GitHub. Okay, then. So, here it is.
68. 2:23And we can see a summary of the changes
69. 2:25made in the PR description. And now we
70. 2:27can trigger a code review by adding a
71. 2:29comment down here. And that comment
72. 2:31should mention codec. So, at codeex
73. 2:33followed by the word review. And then we
74. 2:37can add that comment. Now once we've
75. 2:38done that, Codeex is automatically going
76. 2:41to look at this PR and all the code
77. 2:43changes suggested within it and provide
78. 2:45a little code review right here on
79. 2:47GitHub. And you can actually see the
80. 2:50little eyes emoji right here, which is
81. 2:51codeex basically acknowledging the
82. 2:54request. Now, it might take a few
83. 2:56moments to complete. So I'm going to
84. 2:57pause the recording right here while it
85. 2:59does its thing. Then I'm going to start
86. 3:01it back up again when it's done.
87. 3:03Okay, so it looks like Codex has
88. 3:05finished its review. So if we scroll
89. 3:07down, we can see it's comment down here.
90. 3:09And if we expand this, it says, "Your
91. 3:11team has set up Codex to review pull
92. 3:12request in the repo. Reviews are
93. 3:14triggered when you open a pull request
94. 3:15for review. Mark a draft as ready or
95. 3:17comment at Codex review, which is what
96. 3:19we did right here. If Codex has
97. 3:21suggestions, it will comment. Otherwise,
98. 3:23it will react with a thumbs up." It also
99. 3:26says that Codex can answer questions or
100. 3:27update the PR. Try commenting at Codex,
101. 3:30fix this CI failure, or Codeex address
102. 3:34that feedback. So, let's see what it
103. 3:36suggests. And if we scroll down here,
104. 3:39you can see that it has one suggestion,
105. 3:42and it's to do with the validation error
106. 3:44after we clear the tags. So, I'm not
107. 3:47going to go through all of this right
108. 3:48now, but what you could do if you wanted
109. 3:50to is you could say at codeex fix the
110. 3:53issue or address that feedback. And in
111. 3:55fact, let's try that. We'll say at
112. 3:57codeex
113. 3:58address this feedback like so. And we'll
114. 4:03comment
115. 4:06Now when we did that, Codex
116. 4:07automatically spun up a new task over
117. 4:09here called address feedback in new pair
118. 4:12form. And if we click on that, you can
119. 4:14see it's now working on that task. And
120. 4:17this is the branch that it's using right
121. 4:20here. Add frontend validation for add
122. 4:22new pair form. And if we go back to
123. 4:24GitHub and scroll up, then we can see
124. 4:28that it's exactly the same branch. So,
125. 4:31it's basically just going to update this
126. 4:33PR right here with the work it does on
127. 4:36this same branch.
128. 4:38So, then after a moment, if we go back
129. 4:40over here, when the task completes, we
130. 4:42can see the changes. We can see what
131. 4:44it's done. And we can also update the
132. 4:46branch by clicking on this button right
133. 4:47here. So, once we've updated the branch,
134. 4:50you can either click this again to open
135. 4:51up a new tab to view the PR. But since
136. 4:53we already have that open, we can just
137. 4:55go over here and refresh. And hopefully
138. 4:57in a second we'll see the updates, which
139. 5:00we do down here. So you can see these
140. 5:02changes that it's now made. And now what
141. 5:04I'd like to do is view these changes
142. 5:07locally. By the way, you can see that
143. 5:08other commit that it made right here. So
144. 5:10this was the change it just made. I'm
145. 5:12going to view these changes locally in
146. 5:14my browser now by grabbing this branch
147. 5:17right here. I'm going to pull that down
148. 5:18into my local repo and then preview in a
149. 5:21browser. All right. Okay, so if we go to
150. 5:23this page to see the form, scroll down
151. 5:26and try to create a pair without adding
152. 5:28any fields. We should see some
153. 5:29validation errors. So we see those
154. 5:32please enter ingredient A. B description
155. 5:34must be at least 10 characters. Add at
156. 5:36least one tag. All right, so let's fill
157. 5:38this in. I'm going to say milk and then
158. 5:40peanut butter. And you can see those
159. 5:43errors have gone away in real time as we
160. 5:45added these. Description must be at
161. 5:47least 10 characters. Just say an awesome
162. 5:50nutty drink. And again, the error went
163. 5:53away. And then let's add one tag. And
164. 5:56that can just be I don't know how to
165. 5:57describe this. Awesome. Like so. Try to
166. 6:00create the pair. And we get no error
167. 6:02feedback because it's all filled in.
168. 6:04Okay. So now I might want to merge this
169. 6:06as normal, which I can quickly do. And
170. 6:09then also we could delete the branch
171. 6:11once that's done as well, just to clean
172. 6:12up a little bit. And then back on
173. 6:14Codeex, we could again archive this task
174. 6:17if we're done with it. So then my
175. 6:19friends, that's how we use the Codex
176. 6:21review tool. First, we enable it on
177. 6:22whatever repo we're working on from the
178. 6:24settings and then we invoke a review by
179. 6:26mentioning Codex followed by the word
180. 6:28review. Next up, we're going to break
181. 6:30away from the Codex cloud service for a
182. 6:32little bit and we're going to look at
183. 6:33the Codex CLI.