Vertex Documentation - Complete Guide

Getting Started

Welcome to Vertex! This guide will help you get up and running in minutes.

Prerequisites

Visual Studio Code v1.107.0 or higher
An API key from one of the supported providers (optional for Local Ollama)
Internet connection (for cloud-based AI Integration)

Note: If you plan to use Local Ollama, you don't need an API key. Install Ollama from ollama.ai and you're good to go!

Installation

Choose your preferred installation method:

VS Code Extension Under Dev

Install directly from VS Code Marketplace (recommended for automatic updates)

1 Open VS Code

Launch Visual Studio Code on your machine.

2 Open Extensions Marketplace

Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)

3 Search for Vertex

Type "Vertex" in the search box and look for "Vertex - The Visual Learning IDE"

4 Install the Extension

Click the "Install" button and wait for the installation to complete.

5 Configure Your API Key

When you first use an AI feature, Vertex will prompt you to enter your API key. It will be stored securely in VS Code's Secret Storage.

Installation Complete! You should see the Vertex icon in your Activity Bar.

Via GitHub Tags Stable

Install from GitHub releases for stable tagged versions

1 Visit GitHub Releases

Go to the Vertex GitHub Releases page

2 Download Latest Release

Find the latest stable release and download the .vsix file

vertex-x.x.x.vsix

3 Install from VSIX

In VS Code, open the Command Palette (Ctrl+Shift+P) and run:

Extensions: Install from VSIX...

4 Select Downloaded File

Browse to the downloaded .vsix file and select it

5 Reload VS Code

Click "Reload" when prompted to activate the extension

Alternative: Command Line Installation

You can also install via terminal:

code --install-extension vertex-x.x.x.vsix

Installation Complete! The extension is now ready to use.

Your First Lesson

Let's start with a simple coding lesson to experience Vertex's core features.

Step 1: Create or Open a File

Open any JavaScript, Python, or other supported language file. If you don't have one, create a new file:

File → New File → Select Language (e.g., JavaScript)

Step 2: Load a Sample Lesson

Open the Command Palette and run the lesson command:

Ctrl+Shift+P → Vertex: Load Sample Lesson

Step 3: Follow the Ghost Text

You'll see gray ghost text appear in your editor. Start typing to follow along:

✅ Correct characters stay gray
❌ Incorrect characters turn red
🎯 Ghost text shows you what to type next

Step 4: Open Visual Intelligence

See your code relationships in real-time:

Ctrl+Shift+V → Visual Intelligence panel opens

Tip: Watch the visualizer update as you type. You'll see arrows connecting your variables and function calls in real-time!

Configuration

Customize Vertex to match your preferences and workflow.

Accessing Settings

File → Preferences → Settings → Search "Vertex"

Available Settings

AI Provider Settings

vertex.aiProvider string
Global fallback AI provider. Options: Gemini, OpenRouter, Ollama Cloud, Local Model (Ollama)

Default: "Gemini"
vertex.senseiProvider string
Provider for Sensei's motivational feedback

Default: "Gemini"
vertex.codeGenProvider string
Provider for code generation

Default: "Gemini"

Model Settings

vertex.senseiModel string
Model used by Sensei for mentoring

Default: "gemini-2.0-flash"
vertex.codeGenModel string
Model used for code generation

Default: "gemini-2.0-flash"

Ollama Settings

vertex.ollamaEndpoint string
Endpoint URL for local Ollama instance

Default: "http://localhost:11434"

AI Integration Setup

Google Gemini

1 Get Your API Key

Visit Google AI Studio and create an API key.

2 Configure in Vertex

Ctrl+Shift+P → Vertex: Reset Gemini API Key

3 Select Model

Available models:

gemini-2.0-flash - Fastest, great for learning
gemini-2.5-flash - Balanced speed and capability
gemini-2.5-pro - Most capable, best for complex tasks
gemini-1.5-flash-latest - Latest stable version

OpenRouter

OpenRouter gives you access to multiple AI models through a single API.

1 Sign Up

Create an account at openrouter.ai

2 Get API Key

Navigate to your account settings and generate an API key

3 Configure

Ctrl+Shift+P → Vertex: Reset OpenRouter API Key

Local Ollama (Recommended for Privacy)

Privacy First: Local Ollama runs entirely on your machine. No data leaves your computer!

1 Install Ollama

Download from ollama.ai and follow installation instructions

2 Pull a Model

ollama pull codellama

Popular models: codellama, llama3, mistral

3 Configure Vertex

In VS Code settings, set:

vertex.aiProvider → "Local Model (Ollama)"
vertex.ollamaEndpoint → "http://localhost:11434"

Features Guide

Teacher's Slate (Interactive Learning)

Ghost text that guides you character-by-character through code.

How It Works

Load a lesson with Vertex: Load Sample Lesson
Ghost text appears showing what to type
Type to follow along - correct characters stay gray
Mistakes are highlighted in red immediately
Sensei provides encouragement as you progress

Supported Languages

JavaScript

Python

Java

TypeScript

C / C++

Go

Tips & Tricks

💡 Take your time - it's not a race!
💡 If you make a mistake, backspace and correct it
💡 Watch the status bar for Sensei's feedback
💡 Clear the lesson anytime with Vertex: Clear Lesson

Visual Intelligence

Dynamic call graphs that visualize code relationships in real-time.

Features

Live Arrows: SVG arrows connect variable usage to definitions
Function Tracing: See where functions are called and defined
Multi-Language: Works with 7+ programming languages
Cursor Sync: Highlights update as you move your cursor
Real-time Updates: Graph updates as you type

Opening the Visualizer

Ctrl+Shift+P → Vertex: Show Visual Intelligence

Or use the keyboard shortcut: Ctrl+Shift+V / Cmd+Shift+V

What Gets Visualized?

Variable definitions and usages
Function definitions and calls
Parameter usages within functions
Class and method relationships

Sensei AI (Your Coding Mentor)

Context-aware AI that provides motivational feedback and code assistance.

Capabilities

Motivational Feedback: Encouragement as you learn
Code Generation: Ask Sensei to write code for you
Context Awareness: Understands what you're working on
Smart Debouncing: Only speaks up when needed

Asking Sensei for Help

Ctrl+I → Describe what code you need

Example Prompts

"Create a function that sorts an array"
"Write a class for managing user authentication"
"Add error handling to this function"
"Refactor this code to use async/await"

Pro Tip: The more specific your prompt, the better Sensei's response!

API Reference

Complete API documentation for developers extending or integrating with Vertex.

Full API Docs: For extensive API documentation, see DOCS.md in the repository.

Core Services

AIService

AIService.getInstance(): AIService

Get the singleton instance of the AI service.

Methods:

initialize(context) Promise<boolean>
Initialize the service with extension context
generateSenseiResponse(code, context) Promise<string>
Generate motivational feedback from Sensei
generateCode(prompt, language) Promise<string>
Generate code based on natural language prompt
listModels(provider) Promise<string[]>
List available models for a provider

TeacherSlateService

TeacherSlateService.getInstance(): TeacherSlateService

Manage interactive learning sessions.

Methods:

setLesson(code) void
Start a lesson with the provided code
deactivate() void
End the current lesson
showFeedback(message) void
Display inline feedback from Sensei
isActive() boolean
Check if a lesson is currently active

ParserService

ParserService.parse(code, languageId): Relationship[]

Parse code to extract relationships.

Parameters:

code string
Source code to parse
languageId string
Language identifier (javascript, python, etc.)

Returns:

Array of Relationship objects containing start and end definitions

Commands Reference

Learning Commands

Vertex: Load Sample Lesson

Start a guided coding lesson with ghost text

Vertex: Clear Lesson

Clear all decorations and end the active lesson

AI Commands

Vertex: Ask Sensei for Code

Get AI-powered code suggestions (Keyboard: Ctrl+I / Cmd+I)

Vertex: Select Gemini Model

Choose which AI model to use (Keyboard: Ctrl+J / Cmd+J)

Visualization Commands

Vertex: Show Visual Intelligence

Open the visual intelligence sidebar

Vertex: Toggle Visual Intelligence

Toggle visualizer visibility (Keyboard: Ctrl+Shift+V / Cmd+Shift+V)

API Key Management

Vertex: Reset Gemini API Key

Vertex: Reset OpenRouter API Key

Vertex: Reset Ollama Cloud API Key

Vertex: Reset ALL API Keys

Keyboard Shortcuts

Command	Windows/Linux	Mac
Ask Sensei	`Ctrl+I`	`Cmd+I`
Toggle Visualizer	`Ctrl+Shift+V`	`Cmd+Shift+V`
Select Model	`Ctrl+J`	`Cmd+J`
Change Provider	`Ctrl+H`	`Cmd+H`
Command Palette	`Ctrl+Shift+P`	`Cmd+Shift+P`

Troubleshooting

Ghost text not appearing

✅ Ensure learning mode is active (Vertex: Load Sample Lesson)
✅ Check VS Code inline completion settings are enabled
✅ Verify you're in a supported file type

Visualizer not updating

✅ Make sure the visualizer panel is visible
✅ Check for syntax errors in your code
✅ Try toggling the visualizer off and on
✅ Verify the language is supported

AI not responding

✅ Verify API key is configured (Vertex: Reset API Keys)
✅ Check internet connection (for cloud providers)
✅ Ensure you haven't hit rate limits
✅ Try switching to a different provider

Local Ollama not working

✅ Verify Ollama is installed and running
✅ Check endpoint URL in settings (vertex.ollamaEndpoint)
✅ Ensure you've pulled at least one model
✅ Test with: ollama list in terminal

Still Having Issues?

Open an issue on GitHub with:

VS Code version
Vertex extension version
Console errors (Help → Toggle Developer Tools)
Steps to reproduce the issue

Usage Examples

Example 1: Learning Python

# Open a .py file
Ctrl+Shift+P → Vertex: Load Sample Lesson
# Follow the ghost text to learn Python syntax

Example 2: Generating Code with Sensei

# Press Ctrl+I and describe what you need:
"Create a React component that displays a user profile with name, avatar, and bio"

Example 3: Multi-Provider Setup

Use fast models for feedback and powerful models for generation:

vertex.senseiProvider → "Gemini"
vertex.senseiModel → "gemini-2.0-flash" (fast)
vertex.codeGenProvider → "Gemini"
vertex.codeGenModel → "gemini-2.5-pro" (powerful)

Example 4: Visualizing Complex Code

# Open a file with functions and variables
Ctrl+Shift+V → Watch arrows connect your code
# Move cursor to see highlights update

Complete Documentation

Getting Started

Prerequisites

Installation

VS Code Extension Under Dev

1 Open VS Code

2 Open Extensions Marketplace

3 Search for Vertex

4 Install the Extension

5 Configure Your API Key

Via GitHub Tags Stable

1 Visit GitHub Releases

2 Download Latest Release

3 Install from VSIX

4 Select Downloaded File

5 Reload VS Code

Your First Lesson

Step 1: Create or Open a File

Step 2: Load a Sample Lesson

Step 3: Follow the Ghost Text

Step 4: Open Visual Intelligence

Configuration

Accessing Settings

Available Settings

AI Provider Settings

Model Settings

Ollama Settings

AI Integration Setup

Google Gemini

1 Get Your API Key

2 Configure in Vertex

3 Select Model

OpenRouter

1 Sign Up

2 Get API Key

3 Configure

Local Ollama (Recommended for Privacy)

1 Install Ollama

2 Pull a Model

3 Configure Vertex

Features Guide

Teacher's Slate (Interactive Learning)

How It Works

Supported Languages

Tips & Tricks

Visual Intelligence

Features

Opening the Visualizer

What Gets Visualized?

Sensei AI (Your Coding Mentor)

Capabilities

Asking Sensei for Help

Example Prompts

API Reference

Core Services

AIService

Methods:

TeacherSlateService

Methods:

ParserService

Parameters:

Returns:

Commands Reference

Learning Commands

AI Commands

Visualization Commands

API Key Management

Keyboard Shortcuts

Troubleshooting

Ghost text not appearing

Visualizer not updating

AI not responding

Local Ollama not working

Usage Examples

Example 1: Learning Python

Example 2: Generating Code with Sensei

Example 3: Multi-Provider Setup

Example 4: Visualizing Complex Code

Ready to Start Learning?

Our Contributors