Skip to content

Commit 1889702

Browse files
authored
Merge pull request #617 from drohbo/main
feat(integrations): simplify the continue.dev plugin guide
2 parents 06d999b + 6ce6fdc commit 1889702

5 files changed

Lines changed: 154 additions & 88 deletions

File tree

docs/features/plugin/events/index.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,20 +82,20 @@ Most of the time, you only set `"type"` and `"data"`. Open WebUI fills in the ro
8282

8383
Below is a comprehensive table of **all supported `type` values** for events, along with their intended effect and data structure. (This is based on up-to-date analysis of Open WebUI event handling logic.)
8484

85-
| type | When to use | Data payload structure (examples) |
86-
|-----------------------------|-----------------------------------------------|--------------------------------------------------------------------|
87-
| `status` | Show a status update/history for a message | `{description: ..., done: bool, hidden: bool}` |
88-
| `chat:completion` | Provide a chat completion result | (Custom, see Open WebUI internals) |
89-
| `chat:message:delta`,<br/>`message` | Append content to the current message | `{content: "text to append"}` |
90-
| `chat:message`,<br/>`replace` | Replace current message content completely | `{content: "replacement text"}` |
91-
| `chat:message:files`,<br/>`files` | Set or overwrite message files (for uploads, output) | `{files: [...]}` |
92-
| `chat:title` | Set (or update) the chat conversation title | Topic string OR `{title: ...}` |
93-
| `chat:tags` | Update the set of tags for a chat | Tag array or object |
94-
| `source`,<br/>`citation` | Add a source/citation, or code execution result | For code: See [below.](#code-execution-event) |
95-
| `notification` | Show a notification ("toast") in the UI | `{type: "info" or "success" or "error" or "warning", content: "..."}` |
96-
| `confirmation` <br/>(needs `__event_call__`) | Ask for confirmation (OK/Cancel dialog) | `{title: "...", message: "..."}` |
97-
| `input` <br/>(needs `__event_call__`) | Request simple user input ("input box" dialog) | `{title: "...", message: "...", placeholder: "...", value: ...}` |
98-
| `execute` <br/>(needs `__event_call__`) | Request user-side code execution and return result | `{code: "...javascript code..."}` |
85+
| type | When to use | Data payload structure (examples) |
86+
| -------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
87+
| `status` | Show a status update/history for a message | `{description: ..., done: bool, hidden: bool}` |
88+
| `chat:completion` | Provide a chat completion result | (Custom, see Open WebUI internals) |
89+
| `chat:message:delta`,<br/>`message` | Append content to the current message | `{content: "text to append"}` |
90+
| `chat:message`,<br/>`replace` | Replace current message content completely | `{content: "replacement text"}` |
91+
| `chat:message:files`,<br/>`files` | Set or overwrite message files (for uploads, output) | `{files: [...]}` |
92+
| `chat:title` | Set (or update) the chat conversation title | Topic string OR `{title: ...}` |
93+
| `chat:tags` | Update the set of tags for a chat | Tag array or object |
94+
| `source`,<br/>`citation` | Add a source/citation, or code execution result | For code: See [below.](/docs/features/plugin/events/index.mdx#source-or-citation-and-code-execution) |
95+
| `notification` | Show a notification ("toast") in the UI | `{type: "info" or "success" or "error" or "warning", content: "..."}` |
96+
| `confirmation` <br/>(needs `__event_call__`) | Ask for confirmation (OK/Cancel dialog) | `{title: "...", message: "..."}` |
97+
| `input` <br/>(needs `__event_call__`) | Request simple user input ("input box" dialog) | `{title: "...", message: "...", placeholder: "...", value: ...}` |
98+
| `execute` <br/>(needs `__event_call__`) | Request user-side code execution and return result | `{code: "...javascript code..."}` |
9999

100100
**Other/Advanced types:**
101101

docs/tutorials/integrations/continue-dev.md

Lines changed: 132 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,116 +4,181 @@ title: "⚛️ Continue.dev VSCode Extension with Open WebUI"
44
---
55

66
:::warning
7-
This tutorial is a community contribution and is not supported by the Open WebUI team. It serves only as a demonstration on how to customize Open WebUI for your specific use case. Want to contribute? Check out the contributing tutorial.
7+
This tutorial is a community contribution and is not supported by the Open WebUI team. It serves only as a demonstration on how to customize Open WebUI for your specific use case. Want to contribute? Check out the [contributing tutorial](/docs/contributing.mdx).
88
:::
99

1010
# Integrating Continue.dev VSCode Extension with Open WebUI
1111

12-
### Download Extension
12+
## Download Extension
1313

14-
You can download the VSCode extension here on the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Continue.continue)
14+
You can download the VSCode extension on the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Continue.continue) or directly via the `EXTENSION:MARKETPLACE` within VSCode by searching for `continue`.
15+
Once installed, you can access the application via the `continue` tab in the side bar of VSCode.
1516

16-
Once installed you should now have a 'continue' tab in the side bar. Open this.
17+
**VSCode side bar icon:**
1718

18-
Click on the Assistant selector above the main chat input. Then hover over "Local Assistant" and you should see a settings icon (looks like a cog).
19+
![continue.dev vscode icon](/images/tutorials/continue-dev/continue_dev_vscode_icon.png)
1920

20-
Once you click on the settings icon, a `config.yaml` should open up in the editor.
21+
---
22+
23+
## Setup
24+
25+
Click on the assistant selector to the right of the main chat input. Then hover over `Local Assistant` and click on the settings icon (⚙️).
26+
This will open the `config.yaml` file in your editor. Here you can change the settings of your `Local Assistant`.
27+
28+
![continue.dev chat input](/images/tutorials/continue-dev/continue_dev_extension_input_field.png)
29+
30+
:::info
31+
32+
Currently the `ollama` provider does not support authentication so we cannot use this provider with Open WebUI.
33+
However Ollama and Open WebUI both have compatibility with OpenAI API spec. Read more about the specification in the [Ollama blog post](https://ollama.com/blog/openai-compatibility).
34+
We can still setup continue.dev to use the openai provider which will allow us to use Open WebUI's authentication token.
2135

22-
Here you'll be able to configure continue to use Open WebUI.
36+
:::
37+
38+
### Example config
39+
40+
Below you find an example config for Llama3 as the model with a local Open WebUI setup.
41+
42+
```yaml
43+
name: Local Assistant
44+
version: 1.0.0
45+
schema: v1
46+
models:
47+
- name: LLama3
48+
provider: openai
49+
model: /models/Meta-Llama-3-8B-Instruct-Q4_K_M.gguf
50+
env:
51+
useLegacyCompletionsEndpoint: false
52+
apiBase: http://localhost:3000/api
53+
apiKey: YOUR_OPEN_WEBUI_API_KEY
54+
roles:
55+
- chat
56+
- edit
57+
context:
58+
- provider: code
59+
- provider: docs
60+
- provider: diff
61+
- provider: terminal
62+
- provider: problems
63+
- provider: folder
64+
- provider: codebase
65+
66+
```
2367

2468
---
2569

26-
Currently the 'ollama' provider does not support authentication so we cannot use this provider with Open WebUI.
70+
### Miscellaneous Configuration Settings
71+
72+
These values are needed by the extension to work properly. Find more information in the [official config guide](https://docs.continue.dev/reference).
73+
74+
```yaml
75+
name: Local Assistant
76+
version: 1.0.0
77+
schema: v1
78+
```
2779
28-
However Ollama and Open WebUI both have compatibily with OpenAI API spec. You can see a blog post from Ollama [here](https://ollama.com/blog/openai-compatibility) on this.
80+
The context section provides additional information to the models. Find more information in the [official config guide](https://docs.continue.dev/reference#context) and in the [context provider guide](https://docs.continue.dev/customize/custom-providers).
2981
30-
We can still setup Continue to use the openai provider which will allow us to use Open WebUI's authentication token.
82+
```yaml
83+
context:
84+
- provider: code
85+
- provider: docs
86+
- provider: diff
87+
- provider: terminal
88+
- provider: problems
89+
- provider: folder
90+
- provider: codebase
91+
```
3192
3293
---
3394
34-
## Config
95+
### Models
96+
97+
The models section is where you specify all models you want to add. Find more information in the [official models guide](https://docs.continue.dev/reference#models).
98+
99+
```yaml
100+
models:
101+
- ...
102+
```
103+
104+
---
35105
36-
In `config.yaml` all you will need to do is add/change the following options.
106+
### Name
37107
38-
### Change provider to openai
108+
Sets the name for the model you want to use. This will be displayed within the chat input of the extension.
39109
40110
```yaml
41-
provider: openai
111+
name: LLama3
42112
```
43113
44-
### Add or update apiBase
114+
![continue.dev chat input](/images/tutorials/continue-dev/continue_dev_extension_input_field.png)
45115
46-
Set this to your Open Web UI domain on the end.
116+
---
117+
118+
### Provider
119+
120+
Specifies the method used to communicate with the API, which in our case is the OpenAI API endpoint provided by Open WebUI.
47121
48122
```yaml
49-
apiBase: http://localhost:3000/ #If you followed Getting Started Docker
123+
provider: openai
50124
```
51125
52-
### Add apiKey
126+
---
127+
128+
### Model
129+
130+
This is the actual name of your model in Open WebUI. Navigate to `Admin Panel` > `Settings` > `Models`, and then click on your preferred LLM.
131+
Below the user-given name, you'll find the actual model name.
53132

54133
```yaml
55-
apiKey: sk-79970662256d425eb274fc4563d4525b # Replace with your API key
134+
model: /models/Meta-Llama-3-8B-Instruct-Q4_K_M.gguf
56135
```
57136

58-
You can find and generate your api key from Open WebUI -> Settings -> Account -> API Keys
137+
---
138+
139+
### Legacy completions endpoint
140+
141+
This setting is not needed for Open WebUI, though more information is available in the [original guide](https://platform.openai.com/docs/guides/completions/completions-api-legacy).
142+
143+
```yaml
144+
env:
145+
useLegacyCompletionsEndpoint: false
146+
```
59147

60-
You'll want to copy the "API Key" (this starts with sk-)
148+
---
61149

62-
## Example Config
150+
### APIBase
63151

64-
Here is a base example of config.yaml using Open WebUI via an openai provider. Using Granite Code as the model.
65-
Make sure you pull the model into your ollama instance/s beforehand.
152+
This is a crucial step: you need to direct the continue.dev extension requests to your Open WebUI instance.
153+
Either use an actual domain name if the instance is hosted somewhere (e.g. `https://example.com/api`) or your localhost setup (e.g. `http://localhost:3000/api`).
154+
You can find more information about the URLs in the [API Endpoints guide](/docs/getting-started/api-endpoints.md).
66155

67156
```yaml
68-
name: Local Assistant
69-
version: 1.0.0
70-
schema: v1
71-
models:
72-
- name: Granite Code
73-
provider: openai
74-
model: granite-code:latest
75-
env:
76-
useLegacyCompletionsEndpoint: false
77-
apiBase: http://YOUROPENWEBUI/ollama/v1
78-
apiKey: sk-YOUR-API-KEY
79-
roles:
80-
- chat
81-
- edit
157+
apiBase: http://localhost:3000/api
158+
```
82159

83-
- name: Model ABC from pipeline
84-
provider: openai
85-
model: PIPELINE_MODEL_ID
86-
env:
87-
useLegacyCompletionsEndpoint: false
88-
apiBase: http://YOUROPENWEBUI/api
89-
apiKey: sk-YOUR-API-KEY
90-
roles:
91-
- chat
92-
- edit
160+
---
93161

94-
- name: Granite Code Autocomplete
95-
provider: openai
96-
model: granite-code:latest
97-
env:
98-
useLegacyCompletionsEndpoint: false
99-
apiBase: http://localhost:3000/ollama/v1
100-
apiKey: sk-YOUR-API-KEY
101-
roles:
102-
- autocomplete
162+
### API Key
103163

104-
prompts:
105-
- name: test
106-
description: Write unit tests for highlighted code
107-
prompt: |
108-
Write a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.
164+
To authenticate with your Open WebUI instance, you'll need to generate an API key.
165+
Follow the instructions in [this guide](https://docs.openwebui.com/getting-started/advanced-topics/monitoring#authentication-setup-for-api-key-) to create it.
166+
167+
```yaml
168+
apiKey: YOUR_OPEN_WEBUI_API_KEY
109169
```
110170

111-
Save your `config.yaml` and thats it!
171+
---
112172

113-
You should now see your model in the Continue tab model selection.
173+
### Roles
114174

115-
Select it and you should now be chatting via Open WebUI (and or any [pipelines](/pipelines) you have setup )
175+
The roles will allow your model to be used by the extension for certain tasks. For the beginning you can choose `chat` and `edit`.
176+
You can find more information about roles in the [official roles guide](https://docs.continue.dev/customize/model-roles/intro).
116177

117-
You can do this for as many models you would like to use, altough any model should work, you should use a model that is designed for code.
178+
```yaml
179+
roles:
180+
- chat
181+
- edit
182+
```
118183

119-
See the continue documentation for additional continue configuration, [Continue Documentation](https://docs.continue.dev/reference/Model%20Providers/openai)
184+
The setup is now completed and you can interact with your model(s) via the chat input. Find more information about the features and usage of the continue.dev plugin in the [official documentation](https://docs.continue.dev/getting-started/overview).

src/css/custom.css

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636

3737
/** In mobile view, reduce the padding */
38-
@media screen and (max-width: 996px) {
38+
@media screen and (width <= 996px) {
3939
:root {
4040
--ifm-navbar-height: 100%;
4141
}
@@ -58,6 +58,7 @@
5858
padding: var(--ifm-navbar-padding-vertical)
5959
var(--ifm-navbar-padding-horizontal);
6060
}
61+
6162
.navbar-sidebar__items {
6263
display: flex;
6364
height: fit-content !important;
@@ -548,6 +549,12 @@ div.special_table + table thead tr {
548549
border-bottom: 0;
549550
}
550551

552+
th,
553+
td,
554+
div.special_table + table {
555+
border-width: 0 !important;
556+
}
557+
551558
div.special_table + table tr th {
552559
background: rgb(255 255 255 / 0%);
553560
color: #000;
@@ -564,12 +571,6 @@ div.special_table + table tr:nth-child(even) {
564571
background: rgb(255 255 255 / 0%);
565572
}
566573

567-
div.special_table + table,
568-
th,
569-
td {
570-
border-width: 0 !important;
571-
}
572-
573574
.custom-tag {
574575
display: inline;
575576
background-color: #f0f0f0;
31.4 KB
Loading
1.24 KB
Loading

0 commit comments

Comments
 (0)