@@ -8,6 +8,7 @@ import { showToast } from "@opencode-ai/ui/toast"
88import { For } from "solid-js"
99import { createStore , produce } from "solid-js/store"
1010import { Link } from "@/components/link"
11+ import { useGlobalSDK } from "@/context/global-sdk"
1112import { useGlobalSync } from "@/context/global-sync"
1213import { useLanguage } from "@/context/language"
1314import { DialogSelectProvider } from "./dialog-select-provider"
@@ -22,6 +23,7 @@ type Props = {
2223export function DialogCustomProvider ( props : Props ) {
2324 const dialog = useDialog ( )
2425 const globalSync = useGlobalSync ( )
26+ const globalSDK = useGlobalSDK ( )
2527 const language = useLanguage ( )
2628
2729 const [ form , setForm ] = createStore ( {
@@ -118,6 +120,9 @@ export function DialogCustomProvider(props: Props) {
118120 const baseURL = form . baseURL . trim ( )
119121 const apiKey = form . apiKey . trim ( )
120122
123+ const env = apiKey . match ( / ^ \{ e n v : ( [ ^ } ] + ) \} $ / ) ?. [ 1 ] ?. trim ( )
124+ const key = apiKey && ! env ? apiKey : undefined
125+
121126 const idError = ! providerID
122127 ? "Provider ID is required"
123128 : ! PROVIDER_ID . test ( providerID )
@@ -196,16 +201,17 @@ export function DialogCustomProvider(props: Props) {
196201
197202 const options = {
198203 baseURL,
199- ...( apiKey ? { apiKey } : { } ) ,
200204 ...( Object . keys ( headers ) . length ? { headers } : { } ) ,
201205 }
202206
203207 return {
204208 providerID,
205209 name,
210+ key,
206211 config : {
207212 npm : OPENAI_COMPATIBLE ,
208213 name,
214+ ...( env ? { env : [ env ] } : { } ) ,
209215 options,
210216 models,
211217 } ,
@@ -224,8 +230,20 @@ export function DialogCustomProvider(props: Props) {
224230 const disabledProviders = globalSync . data . config . disabled_providers ?? [ ]
225231 const nextDisabled = disabledProviders . filter ( ( id ) => id !== result . providerID )
226232
227- globalSync
228- . updateConfig ( { provider : { [ result . providerID ] : result . config } , disabled_providers : nextDisabled } )
233+ const auth = result . key
234+ ? globalSDK . client . auth . set ( {
235+ providerID : result . providerID ,
236+ auth : {
237+ type : "api" ,
238+ key : result . key ,
239+ } ,
240+ } )
241+ : Promise . resolve ( )
242+
243+ auth
244+ . then ( ( ) =>
245+ globalSync . updateConfig ( { provider : { [ result . providerID ] : result . config } , disabled_providers : nextDisabled } ) ,
246+ )
229247 . then ( ( ) => {
230248 dialog . close ( )
231249 showToast ( {
@@ -301,7 +319,7 @@ export function DialogCustomProvider(props: Props) {
301319 />
302320 < TextField
303321 label = "API key"
304- placeholder = "{env:MYPROVIDER_API_KEY} "
322+ placeholder = "API key "
305323 description = "Optional. Leave empty if you manage auth via headers."
306324 value = { form . apiKey }
307325 onChange = { setForm . bind ( null , "apiKey" ) }
0 commit comments