VS Code GUI Setup Guide

For developers who prefer working in a graphical user interface (GUI) rather than constantly switching terminal windows, you can configure and run your AI coding assistants directly inside VS Code.

---

1. Open Your Project

1. Install and open VS Code.
2. Select File > Open Folder... and choose your project directory.
3. Open the built-in terminal by selecting Terminal > New Terminal (or press Ctrl+``` / Cmd+```).

---

2. Set Up TopRouter Environment Variables

In the built-in terminal window, export the environment variables needed for your clients.

For macOS / Linux (zsh or bash)

export OPENAI_BASE_URL="https://toprouter.cc"
export OPENAI_API_KEY="your_toprouter_api_key"
export OPENAI_MODEL="openai/gpt-5.5"

For Windows (PowerShell)

$env:OPENAI_BASE_URL="https://toprouter.cc"
$env:OPENAI_API_KEY="your_toprouter_api_key"
$env:OPENAI_MODEL="openai/gpt-5.5"

---

3. Run Your AI Clients

Since the terminal is running inside the root directory of your project, the AI assistant will automatically detect your project files. You can start your tools directly:

# Start Codex (if configured)
codex --model openai/gpt-5.5

# Or start Claude Code
claude

Any files edited by the assistant will be immediately highlighted and visible in VS Code's editor window, allowing for real-time review.

---

4. Best Practices for Security

• Never hardcode API Keys: Do not write your TopRouter API Key inside configuration files that are checked into source control.
• Configure .gitignore: Make sure your local environment files (like .env) are added to .gitignore.
• Individual Keys: In team environments, every developer should create and use their own TopRouter API Key rather than sharing a single key.