New 1-click onboarding flow

Author: dtrugman

.changeset/late-chefs-remember.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Update the welcome page to provide 1-click OAuth flows with LLM routers or more advanced configuration with custom providers.

src/core/webview/ClineProvider.ts

@@ -2648,14 +2648,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 		if (stateValues.apiProvider) {
 			apiProvider = stateValues.apiProvider
 		} else {
-			// Either new user or legacy user that doesn't have the apiProvider stored in state
-			// (If they're using OpenRouter or Bedrock, then apiProvider state will exist)
-			if (secretValues.apiKey) {
-				apiProvider = "anthropic"
-			} else {
-				// New users should default to openrouter
-				apiProvider = "openrouter"
-			}
+			apiProvider = "anthropic"
 		}
 
 		// Build the apiConfiguration object combining state values and secrets

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -1,18 +1,17 @@
 import { useCallback, useState } from "react"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-
+import { VSCodeButtonLink } from "../common/VSCodeButtonLink"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "../settings/ApiOptions"
 import { Tab, TabContent } from "../common/Tab"
-import { Alert } from "../common/Alert"
 import { useAppTranslation } from "../../i18n/TranslationContext"
+import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "../../oauth/urls"
 
 const WelcomeView = () => {
 	const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme } = useExtensionState()
 	const { t } = useAppTranslation()
-
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
 
 	const handleSubmit = useCallback(() => {
@@ -32,19 +31,59 @@ const WelcomeView = () => {
 			<TabContent className="flex flex-col gap-5">
 				<h2 className="m-0 p-0">{t("welcome:greeting")}</h2>
 				<div>{t("welcome:introduction")}</div>
-				<Alert className="font-bold text-sm">{t("welcome:notice")}</Alert>
-				<ApiOptions
-					fromWelcomeView
-					apiConfiguration={apiConfiguration || {}}
-					uriScheme={uriScheme}
-					setApiConfigurationField={(field, value) => setApiConfiguration({ [field]: value })}
-					errorMessage={errorMessage}
-					setErrorMessage={setErrorMessage}
-				/>
+				<div>{t("welcome:chooseProvider")}</div>
+
+				<div className="mb-4">
+					<h4 className="mt-3 mb-2">{t("welcome:startRouter")}</h4>
+
+					<div className="flex gap-4">
+						<div className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center">
+							<VSCodeButtonLink
+								href={getRequestyAuthUrl(uriScheme)}
+								className="bg-blue-500 text-white w-16 h-16 flex items-center justify-center rounded mb-2 text-xl font-bold no-underline">
+								REQ
+							</VSCodeButtonLink>
+							<div className="text-center">
+								<div className="font-bold">Requesty</div>
+								<div className="text-sm text-vscode-descriptionForeground">
+									{t("welcome:requestyDescription")}
+								</div>
+
+								<div className="text-sm text-blue-400 font-bold">$1 free credit</div>
+							</div>
+						</div>
+						<div className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center">
+							<VSCodeButtonLink
+								href={getOpenRouterAuthUrl(uriScheme)}
+								className="bg-blue-500 text-white w-16 h-16 flex items-center justify-center rounded mb-2 text-xl font-bold no-underline">
+								OR
+							</VSCodeButtonLink>
+							<div className="text-center">
+								<div className="font-bold">OpenRouter</div>
+								<div className="text-sm text-vscode-descriptionForeground">
+									{t("welcome:openRouterDescription")}
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="text-center my-4">or</div>
+					<h4 className="mt-3 mb-2">{t("welcome:startCustom")}</h4>
+					<ApiOptions
+						fromWelcomeView
+						apiConfiguration={apiConfiguration || {}}
+						uriScheme={uriScheme}
+						setApiConfigurationField={(field, value) => setApiConfiguration({ [field]: value })}
+						errorMessage={errorMessage}
+						setErrorMessage={setErrorMessage}
+					/>
+				</div>
 			</TabContent>
 			<div className="sticky bottom-0 bg-vscode-sideBar-background p-5">
 				<div className="flex flex-col gap-1">
-					<VSCodeButton onClick={handleSubmit}>{t("welcome:start")}</VSCodeButton>
+					<VSCodeButton onClick={handleSubmit} appearance="primary">
+						{t("welcome:start")}
+					</VSCodeButton>
 					{errorMessage && <div className="text-vscode-errorForeground">{errorMessage}</div>}
 				</div>
 			</div>

webview-ui/src/i18n/locales/en/welcome.json

@@ -3,6 +3,11 @@
 	"introduction": "I can do all kinds of tasks thanks to the latest breakthroughs in agentic coding capabilities and access to tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own capabilities.",
 	"notice": "To get started, this extension needs an API provider.",
 	"start": "Let's go!",
+	"chooseProvider": "Choose an API provider to get started:",
+	"requestyDescription": "Your optimized LLM router",
+	"openRouterDescription": "A unified interface for LLMs",
+	"startRouter": "Express setup through a Router",
+	"startCustom": "Bring your own API key",
 	"telemetry": {
 		"title": "Help Improve Roo Code",
 		"anonymousTelemetry": "Send anonymous error and usage data to help us fix bugs and improve the extension. No code, prompts, or personal information is ever sent.",