Surfer VSCODE Extension banner

Surfer VSCODE Extension

17 devlogs
14h 20m 21s

hey there! I’m making an vscode extension that will allow users to talk to groq ai through the chat pane and assign the ai model tasks to do by entering it in the task pannel

This project uses AI

I used claude and github for debugging and minor code gen.

Demo Repository

Loading README...

abtheinnovator

Shipped this project!

Hours: 3.83
Cookies: 🍪 52
Multiplier: 13.48 cookies/hr

So I mostly worked on the agent. i gave it a web search and a ask_user tool. i also added suggestion buttons. I made the orchestration agent actually work. I added a quick project create menu. You can do this by pressing cntrl + shift+ p and search create project. To register your groq api key either wait for the prompt to come or press cntrl + shift+ p and search for update groq api key

abtheinnovator

I worked on the website by adding this section and adjusted the prompts a bit and added a ask user tol.

Attachment
0
abtheinnovator

I added more features to the orchestration agent so now it can anaylize evrything better, I also added a asset agent that is not used. I’ll share a project made completely by the ai.

Attachment
0
abtheinnovator

I added create project commands! So now you can easily create projects by press ctrl + shift + p and select create project!.

0
abtheinnovator

Shipped this project!

Hours: 10.51
Cookies: 🍪 210
Multiplier: 20.03 cookies/hr

Surfer

Surfer is a VS Code extension that helps developers build apps faster by automating repetitive tasks. Its built on top of the vercel ai sdk and groq. It adds to panels to your IDE: The chat panel and the task panel. The chat panel is a chat interface that allows you to chat with the AI. The task panel is a task interface that allows you to create and manage tasks. The chat panel like its sounds is a simple coding chatbot while the task panel is run by a head orchestration agent and 3 sub agents. The head has to determine what agents need to be called. the three agents are: the planner agent, the coder agent and the reviewer agent. The planner agent is responsible for planning the tasks. The coder agent is responsible for coding the tasks. The reviewer agent is responsible for reviewing the code generated. The reviewer is called in particularly long or big tasks.

Tech Stack

  • Vercel AI SDK
  • Groq
  • Tailwind CSS
  • TypeScript
  • VSCode Extension API

How to use:

  • First go to https://surfer-web-five.vercel.app
  • Then click on the “Try now” link
  • This will open the open-vsx registry page for the extension
  • Click on the “download” button
  • After the download is done go to your extensions panel in VS Code(or and editor which uses open vsx) and click on the three dots and click on “Install from VSIX…”
  • After it is installed you will see two more badges in the primary panel.
  • Move one of them to the secondary sidebar for easy use and you are done!

Video of how to install

https://surfer-web-five.vercel.app/demo

abtheinnovator

I added a guide video page, changed min version from 1.110.0 to 1.106.0. I also updated the readme.

Attachment
0
abtheinnovator

i fixed progress tracking so it actually shows done for tasks after its done. Now I just need to fix the prompts.

Attachment
0
abtheinnovator

I added animations to the landing page and added the product page. I also got to know how well my agent system is work cause I used it for some tasks. It definetly works and is fast. But the model is not the best for code

0
abtheinnovator

I updated the package.json, updated the website by adding a prciing page and switched to the space mono funt and submitted the extension for review!

Attachment
0
abtheinnovator

The agent can now make normal webpages! I made it able to detect the current framework and the language.

0
abtheinnovator

I worked on the task agents! I got the head agent to work btu no lock with the lower agents yet:< Will keep you updated. For the agents I am using groq plus vercel ai sdk.

Attachment
0
abtheinnovator

I added code formatting and chat huistory. So now groq has the content of your full chat

Attachment
0
abtheinnovator

I made the chat interface work. Im gonna add the feature to reference files now :>

Attachment
0
abtheinnovator

I created a function to return responses from grok! The sidebar has something wrong with it tho. As soon as I loaded tailwind as soon as i enter something the input field disappears. 😭

Attachment
0