Claude Code + ECC Tools: The Agent Harness Performance Optimization System — Transcript

Full transcript

1. 0:06Hello guys, welcome to another video. In
2. 0:08today's tutorial, we're going to
3. 0:10introduce you a super awesome project,
4. 0:12which is called ECC tools. ECC stands
5. 0:14for everything clock code. So, this
6. 0:16project
7. 0:18has already got 243k stars. So, this is
8. 0:22almost at the harness and also the
9. 0:25deep sick harness level. So,
10. 0:28which means people really like this
11. 0:29project. So, what this project does, it
12. 0:32is a agent harness performance
13. 0:34optimization system. So, it has skills,
14. 0:37instincts, memory, security, and
15. 0:40research first development for clock
16. 0:42hub. So, it also supports
17. 0:45code acts, open code, and cursor and
18. 0:46beyond.
19. 0:48And
20. 0:49if you look at the reading section, uh
21. 0:51there is a specific summary section
22. 0:53tells you what the ECC does and what it
23. 0:57offers.
24. 0:59So, you can see there's 68 agents to 86
25. 1:02skills,
26. 1:03and there's 94 comments and hooks and
27. 1:06memory,
28. 1:07and also the rules agent shield.
29. 1:10And uh they also provided a
30. 1:13trend while this project started. So,
31. 1:16you can see that started earlier this
32. 1:18year, and it went to 40,000 stars in
33. 1:21just 3 weeks.
34. 1:25In this video, um specifically, we're
35. 1:28going to talk about a very cool
36. 1:30feature that's in the ECC. So, we're not
37. 1:33going to talk about all the skills.
38. 1:34There's too many
39. 1:36uh of them. And you can see there's too
40. 1:37many skills, too many agents. There's a
41. 1:39specific
42. 1:41feature that's very useful, that's very
43. 1:43popular, which we're going to talk
44. 1:44about. And that feature
45. 1:46is called the canvas. So, the canvas UI,
46. 1:51you can see there's a specific section
47. 1:53they're talking about
48. 1:55this feature. So, it's called plan
49. 1:56canvas. We do plans by pointing, not
50. 1:59retyping. So, why this feature is super
51. 2:01useful
52. 2:03is that you can actually generate a
53. 2:06coding plan or product plan, which
54. 2:08allows agent to build a product.
55. 2:11So, usually, if you start a coding
56. 2:13agent, you can ask the agent to plan it.
57. 2:16But, while you want to change it, you
58. 2:17have to talk to the agent again.
59. 2:20The context is the entire context.
60. 2:23And it's very hard for the agent to
61. 2:25actually figure out what you're asking.
62. 2:29And sometimes it's just asking back and
63. 2:31forth
64. 2:32to understand
65. 2:33what the actual plan will be.
66. 2:37In this ACC tools, the plan canvas
67. 2:40is going to solve that problem
68. 2:42in a really efficient way. So, if you
69. 2:44just look at the
70. 2:46video that provided here. So, basically,
71. 2:49what the canvas can do is that you can
72. 2:51actually pointing to a specific part of
73. 2:54the
74. 2:55design document. So, it's very cool. So,
75. 2:57you can actually pointing to a specific
76. 2:59part of the design document and say,
77. 3:04"Please fix this." or "Please update
78. 3:06it." So, I'm going to show you guys
79. 3:07later how this works in a real demo.
80. 3:10But, as you can see from the
81. 3:12demo that I'm putting here,
82. 3:14so it's very useful that you can just
83. 3:17point to a specific part of the canvas
84. 3:21and tell the agent to fix that. And
85. 3:23agent will fix it and refresh the canvas
86. 3:26so you can have a updated plan. The best
87. 3:28part is that the plan is a markdown
88. 3:30file.
89. 3:31So, you can directly copy and paste the
90. 3:33plan to your coding agent to start the
91. 3:35project. So, you do not have to
92. 3:38convert to any format. So, they loaded
93. 3:40everything as a markdown
94. 3:43and you edit the markdown by just
95. 3:44talking to it. So, so very, very cool.
96. 3:47And
97. 3:49so,
98. 3:50let's go to the installation step. So,
99. 3:53if you go to the
100. 3:55Visual Studio uh so you can just install
101. 3:57it or you can go to your terminal to
102. 3:59install it. So, you can just do a plugin
103. 4:01marketplace
104. 4:02at the C repo and do a plugin install
105. 4:05the ACC at ACC. That's it. So, they will
106. 4:08be installed
107. 4:09in the
108. 4:11Cloud Code
109. 4:13plugins. If you use Code X, it's a
110. 4:15different folder, but uh we're going to
111. 4:16only demo on Cloud Code.
112. 4:18So, then you can start to ask the ACC
113. 4:23and plan a project, for example.
114. 4:26We're going to say, "Okay, add a health
115. 4:27check endpoint and get health."
116. 4:30That returns status okay and a simple
117. 4:33unit test. So, let's just try it. So,
118. 4:35this will actually create a markdown
119. 4:37file, which is a design documentation
120. 4:39to create this project. So, let's hit
121. 4:41enter and see how this works.
122. 4:50So, you can see it will start generating
123. 4:52the design document.
124. 4:54And
125. 4:56because we're actually in this
126. 4:59folder, so which is called a play
127. 5:01folder, so it will generate a
128. 5:04plan file inside a dot cloud folder
129. 5:07inside plans.
130. 5:08So,
131. 5:10you can see please
132. 5:13save the plan.
133. 5:23So, then it will ask for permissions,
134. 5:25then you can say yes.
135. 5:55>> Intro to the plan is created. So, that's
136. 5:57where
137. 5:59the file is located. It's in the cloud
138. 6:01and plans. So, if you open it
139. 6:03So, what it will
140. 6:05do is create this design documentation
141. 6:08that you can refer to
142. 6:10once you open the canvas. So, to open
143. 6:12the canvas, you can
144. 6:14do it in two ways. So, first way is to
145. 6:17use the cloud scale. So, it's ECC uh uh
146. 6:21/plan
147. 6:23-canvas. So, this will actually start
148. 6:25the canvas.
149. 6:27It will load all the different design
150. 6:28documentation in the folder that we just
151. 6:32showed. So, or you can just start with
152. 6:35the node
153. 6:37and use the plan.canvas.js.
154. 6:39That's how you do it in cloud code. You
155. 6:42There's other ways to do it such as you
156. 6:44can actually install the
157. 6:47ECC Universal. So, this will actually
158. 6:49install the ECC plan canvas as a binary.
159. 6:52So, but we're not going to demo that in
160. 6:53this video. We're going to show you
161. 6:54directly inside the cloud code. So, in
162. 6:57cloud code, let's just say open the plan
163. 6:59canvas.
164. 7:05You can see there's a skill it's loading
165. 7:07up and
166. 7:10you can see that's going to spin up the
167. 7:14design document which you just created.
168. 7:16So, you can see um you can say yes,
169. 7:18don't ask for that, but I think it will
170. 7:20switch to a JS file because
171. 7:23the binary doesn't exist. So,
172. 7:30So, you can see that actually it's going
173. 7:32to switch to the plan.canvas.js.
174. 7:35Let's say yes.
175. 7:42Okay, and
176. 7:44we're going to say yes.
177. 8:22So you can see the port has been spun up
178. 8:25and then you can start
179. 8:27to load this UI for canvas.
180. 8:31So
181. 8:32let's just refresh the UI.
182. 8:39So you can see that our UI is loaded.
183. 8:50So you can see the document is loaded.
184. 8:51So this is a documentation that we just
185. 8:53generated. You can see that is loaded
186. 8:56into the UI very nicely. So you can you
187. 8:58can see you can actually point it to any
188. 9:00part of the documentation
189. 9:02and ask
190. 9:03the ECC to update
191. 9:06the design document. For example, want
192. 9:08to update this testing so phase two to
193. 9:11testing
194. 9:12then
195. 9:13we can just ask it.
196. 9:16So split phase two into the
197. 9:182A to B and added email rate limit risk.
198. 9:22Please recheck.
199. 9:23So
200. 9:25if you copy and paste
201. 9:28this into for example, into this testing
202. 9:32right? And then you can just click on
203. 9:34it. You can see there's a pop up and
204. 9:37you can paste the
205. 9:39suggestions uh to this
206. 9:42pop-up, and then you can hit Q, so it
207. 9:45will start updating
208. 9:47this section.
209. 9:48All right? So, you can queue it. You can
210. 9:50see the face-to-face testing
211. 9:52is started getting updated.
212. 9:55So, you can say, "Okay."
213. 9:58This probably uh there's a back-end
214. 10:00process that's going to also read it.
215. 10:02All right? Can send to agent.
216. 10:14So, you can see the markdown file has
217. 10:16already been updated as a 2A and 2B.
218. 10:19So, you can see this is saying that uh
219. 10:22it's already been completed. Please
220. 10:24review this.
221. 10:26All right.
222. 10:27So, you can see that how this works. And
223. 10:32So, this is how you actually
224. 10:33use the ECC to tell me why to update a
225. 10:36design document. So, in this case, you
226. 10:38can just copy and paste the entire
227. 10:40document after you finish updating, and
228. 10:43let the agent to work on it. So, I think
229. 10:45this is probably a really nice way
230. 10:48to build a design automation for the
231. 10:51product architecture, and especially
232. 10:54when you uh
233. 10:56and this uh to the agent. So.
234. 11:00That's it. So,
235. 11:03hopefully this is helpful, and uh if you
236. 11:05do like this video,
237. 11:06please subscribe, like, or comment. If
238. 11:08you have any questions,
239. 11:10thank you so much for supporting
240. 11:11channel,
241. 11:12and uh see you
242. 11:14in the next one.