100 lines
3.1 KiB
Plaintext
100 lines
3.1 KiB
Plaintext
---
|
|
sidebar_position: 1
|
|
---
|
|
import continue_ask from './assets/jan-ai-continue-ask.png';
|
|
import continue_comment from './assets/jan-ai-continue-comment.gif';
|
|
import vscode from './assets/vscode.png';
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
# Continue Integration for Visual Studio Code
|
|
|
|
A step-by-step guide on how to integrate Jan with Continue and VS Code.
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
This guide showcases integrating Continue with Jan and VS Code to boost your coding using the local AI language model's features. [Continue](https://continue.dev/docs/intro) is an open-source autopilot compatible with Visual Studio Code and JetBrains, offering the simplest method to code with any LLM (Local Language Model).
|
|
|
|
## How to Integrate with Continue VS Code
|
|
|
|
### Step 1: Installing Continue on Visal Studio Code
|
|
|
|
Follow this [guide to install the Continue extension on Visual Studio Code](https://continue.dev/docs/quickstart)
|
|
|
|
### Step 2: Enable the Jan API Server
|
|
|
|
To set up Continue for use with Jan's Local Server, you must activate the Jan API Server with your chosen model.
|
|
|
|
1. Press the `<>` button. Jan will take you to the **Local API Server** section.
|
|
|
|
2. Setup the server, which includes the **IP Port**, **Cross-Origin-Resource-Sharing (CORS)** and **Verbose Server Logs**.
|
|
|
|
3. Press the **Start Server** button
|
|
|
|
### Step 3: Configure Continue to Use Jan's Local Server
|
|
1. Go to the `~/.continue` directory.
|
|
|
|
<Tabs>
|
|
<TabItem value="mac" label="Mac" default>
|
|
```sh
|
|
cd ~/.continue
|
|
```
|
|
</TabItem>
|
|
<TabItem value="windows" label="Windows">
|
|
```sh
|
|
C:/Users/<your_user_name>/.continue
|
|
```
|
|
</TabItem>
|
|
<TabItem value="linux" label="Linux">
|
|
```sh
|
|
cd ~/.continue
|
|
```
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
```json title="~/.continue/config.json"
|
|
{
|
|
"models": [
|
|
{
|
|
"title": "Jan",
|
|
"provider": "openai",
|
|
"model": "mistral-ins-7b-q4",
|
|
"apiKey": "EMPTY",
|
|
"apiBase": "http://localhost:1337/v1"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
2. Ensure the file has the following configurations:
|
|
- Ensure `openai` is selected as the `provider`.
|
|
- Match the `model` with the one enabled in the Jan API Server.
|
|
- Set `apiBase` to `http://localhost:1337/v1`.
|
|
- Leave the `apiKey` field to `EMPTY`.
|
|
|
|
### Step 4: Ensure the Using Model Is Activated in Jan
|
|
|
|
1. Navigate to `Settings` > `Models`.
|
|
2. Activate the model you want to use in Jan by clicking the **three dots (⋮)** and select **Start Model**.
|
|
|
|
## Use cases for Jan integration with Visual Studio Code
|
|
Below are examples of the integration:
|
|
|
|
### 1. Asking questions about the code
|
|
|
|
1. Highlight a code snippet and press `Command + Shift + M` to open the Left Panel.
|
|
2. Select Jan at the bottom and ask a question about the code, for example, `Explain this code`.
|
|
|
|
<div class="text--center">
|
|
<img src={continue_ask} width={800} alt="jan-ai-continue-ask" />
|
|
</div>
|
|
|
|
### 2. Editing the code with the help of a large language model
|
|
|
|
1. Select a code snippet and use `Command + Shift + L`.
|
|
2. Enter your editing request, such as `Add comments to this code`.
|
|
|
|
<div class="text--center">
|
|
<img src={continue_comment} width={800} alt="jan-ai-continue-comment" />
|
|
</div> |