Skip to main content

Getting Started with VLCode | New Coders

Welcome to VLCode! This guide will help you get set up and start using VLCode to build your first project.

What You'll Need​

Before you begin, make sure you have the following:

  • VS Code: A free, powerful code editor.

  • Development Tools: Essential software for coding (Homebrew, Node.js, Git, etc.).

  • VLCode Projects Folder: A dedicated folder for all your VLCode projects.

    • On macOS: Create a folder named "VLCode" in your Documents folder
      • Path: /Users/[your-username]/Documents/VLCode
    • On Windows: Create a folder named "VLCode" in your Documents folder
      • Path: C:\Users\[your-username]\Documents\VLCode
    • Inside this VLCode folder, create separate folders for each project
      • Example: Documents/VLCode/workout-app for a workout tracking app
      • Example: Documents/VLCode/portfolio-website for your portfolio

  • VLCode Extension in VS Code: The VLCode extension installed in VS Code.

  • Here's a tutorial on everything you need to get started.

Step-by-Step Setup​

Follow these steps to get VLCode up and running smoothly:

  1. Open VS Code: Launch the VS Code application. If VS Code shows "Running extensions might...", click "Allow".

  2. Open Your VLCode Folder: In VS Code, open the VLCode folder you created in Documents.

  3. Navigate to Extensions: Click on the Extensions icon in the Activity Bar on the side of VS Code.

  4. Search for 'VLCode': In the Extensions search bar, type "VLCode".

  5. Install the Extension: Click the "Install" button next to the VLCode extension.

  6. Open VLCode: Once installed, you can open VLCode in a few ways:

    • Click the VLCode icon in the Activity Bar.
    • Use the command palette (CMD/CTRL + Shift + P) and type "VLCode: Open In New Tab" to open VLCode as a tab in your editor. This is recommended for a better view.
    • Troubleshooting: If you don't see the VLCode icon, try restarting VS Code.
    • What You'll See: You should see the VLCode chat window appear in your VS Code editor.

gettingStartedVsCodevlcode

Setting up OpenRouter API Key​

Now that you have VLCode installed, you'll need to set up your OpenRouter API key to use VLCode's full capabilities.

  1. Get your OpenRouter API Key:
  2. Input Your OpenRouter API Key:
    • Navigate to the settings button in the VLCode extension.
    • Input your OpenRouter API key.
    • Select your preferred API model.
      • Recommended Models for Coding:
        • anthropic/claude-3.5-sonnet: Most used for coding tasks.
        • google/gemini-2.0-flash-exp:free: A free option for coding.
        • deepseek/deepseek-chat: SUPER CHEAP, almost as good as 3.5 sonnet
      • OpenRouter Model Rankings

Your First Interaction with VLCode​

Now you're ready to start building with VLCode. Let's create your first project folder and build something! Copy and paste the following prompt into the VLCode chat window:

Hey VLCode! Could you help me create a new project folder called "hello-world" in my VLCode directory and make a simple webpage that says "Hello World" in big blue text?

What You'll See: VLCode will help you create the project folder and set up your first webpage.

Tips for Working with VLCode​

  • Ask Questions: If you're unsure about something, don't hesitate to ask VLCode!
  • Use Screenshots: VLCode can understand images, so feel free to use screenshots to show him what you're working on.
  • Copy and Paste Errors: If you encounter errors, copy and paste the error messages into VLCode's chat. This will help him understand the issue and provide a solution.
  • Speak Plainly: VLCode is designed to understand plain, non-technical language. Feel free to describe your ideas in your own words, and VLCode will translate them into code.

FAQs​

  • What is the Terminal? The terminal is a text-based interface for interacting with your computer. It allows you to run commands to perform various tasks, such as installing packages, running scripts, and managing files. VLCode uses the terminal to execute commands and interact with your development environment.
  • How Does the Codebase Work? (This section will be expanded based on common questions from new coders)

Still Struggling?​

Feel free to contact me, and I'll help you get started with VLCode.

Valkyr Labs | support@valkyrlabs.com