# 📖 GPT-Runner UI Usage

## Page desktop end layout
![gpt-desktop-intro](https://github.com/2214962083/2214962083/assets/34775414/f45af8c2-94e2-473d-95d6-c05be86c4c1c)

### 1. Tool Bar section
#### Settings

The following settings can be modified in the settings:
- gpt-runner language
- The theme of gpt-runner
- Set request proxy
- **Modify the configuration of Open AI**
- **Modify the configuration of Anthropic**

> When you open GPT-Runner, you should set the Chat Key first, otherwise AI chat cannot be performed

![gpt-runner-settings](https://github.com/2214962083/2214962083/assets/34775414/d933cd80-c722-4edc-8882-710a62bbf934)

#### Config Info

Browse current selected preset AI config parse info:

More details please view [Introduction to GPT-Runner Configs And AI Preset Files](https://github.com/nicepkg/gpt-runner/blob/main/docs/gpt-config.en.md)

![gpt-runner-config-info](https://github.com/2214962083/2214962083/assets/34775414/83f2f19d-6fb1-4c5b-81fb-ab1fb90510e9)

#### About

In About, you can view the current GPT-Runner version number, Github warehouse address, contributors and other information.

#### Close / Open Sidebar

This button is used to show/hide Preset Tree and Files Tree

> Show Preset Tree and Files Tree

![gpt-runner-show-sidebar](https://github.com/2214962083/2214962083/assets/34775414/eaf00fe4-212e-495a-9914-f71205d45178)

> Hide Preset Tree and Files Tree

![gpt-runner-hide-sidebar](https://github.com/2214962083/2214962083/assets/34775414/54d37bf1-8d7c-416a-b803-857e9dee0738)

#### Tokens

The estimated size of tokens in the **current context**, this is the estimated value **with a certain error**

![gpt-runner-tokens](https://github.com/2214962083/2214962083/assets/34775414/ba508440-7d3c-4a23-9ab0-f12d85336b3b)

### 2. Preset Tree section

### 3. Chat Panel section

### 4. Files Tree section

## Page mobile / vscode extension end layout