Onboarding tweaks, removes incorrect page

brunobergher · brunobergher · commit f830fd64aa7e · 2025-12-12T11:52:05.000Z
diff --git a/docs/getting-started/connecting-api-provider.md b/docs/getting-started/connecting-api-provider.md
@@ -13,86 +13,34 @@ image: /img/social-share.jpg
 ---
 import KangarooIcon from '@site/src/components/KangarooIcon';
 
-# Connecting Your First AI Provider
+# Connecting Your First LLM Provider
 
-Roo Code requires an API key from an AI model provider to function. We recommend these options for accessing the powerful **Claude Sonnet 4.5** model:
+Roo Code needs an inference provider to access the LLM models that make it work.
 
-- **OpenRouter (Recommended):** Provides access to multiple AI models through a single API key. Ideal for getting started quickly with minimal setup. [View pricing](https://openrouter.ai/models?order=pricing-low-to-high).
-- **Anthropic:** Direct access to Claude models. Requires API access approval and may have [rate limits depending on your tier](https://docs.anthropic.com/en/api/rate-limits#requirements-to-advance-tier). See [Anthropic's pricing page](https://www.anthropic.com/pricing#anthropic-api) for details.
+A great model to start is **Claude Sonnet 4.5**, which offers a lot of power at a reasonable price point. To get it going, choose a provider:
 
----
-
-## Getting Your API Key
-
-### Option 1: LLM Routers
-
-LLM routers let you access multiple AI models with one API key, simplifying cost management and switching between models. They often offer [competitive pricing](https://openrouter.ai/models?order=pricing-low-to-high) compared to direct providers.
-
-#### OpenRouter
-
-1. Go to [openrouter.ai](https://openrouter.ai/)
-2. Sign in with your Google or GitHub account
-3. Navigate to the [API keys page](https://openrouter.ai/keys) and create a new key
-4. Copy your API key - you'll need this for Roo Code setup
-
-<img src="/img/connecting-api-provider/connecting-api-provider-4.png" alt="OpenRouter API keys page" width="600" />
-
-*OpenRouter dashboard with "Create key" button. Name your key and copy it after creation.*
-
-#### Requesty
-
-1. Go to [requesty.ai](https://requesty.ai/)
-2. Sign in with your Google account or email
-3. Navigate to the [API management page](https://app.requesty.ai/api-keys) and create a new key
-4. **Important:** Copy your API key immediately as it won't be displayed again
-
-<img src="/img/connecting-api-provider/connecting-api-provider-7.png" alt="Requesty API management page" width="600" />
-
-*Requesty API management page with "Create API Key" button. Copy your key immediately - it's shown only once.*
+- **Roo Code Cloud Provider (Recommended):** the easiest way to access multiple providers testes with Roo Code. No API needed. To get started, just choose Roo Code as a provider and follow instructions. [Learn more about it](/roo-code-provider/overview).
 
-### Option 2: Direct Providers
+- **OpenRouter:** Provides access to multiple AI models from different labs through a single API key. Great for flexibility and getting started reasonably fast. To get an API key, [follow these instructions <LucideIcon name="ArrowRight" />](/providers/openrouter#getting-an-api-key)
 
-For direct access to specific models from their original providers, with full access to their features and capabilities:
+- **Anthropic:** Direct access to the Claude family of models. Requires API access approval and may have [rate limits depending on your tier](https://docs.anthropic.com/en/api/rate-limits#requirements-to-advance-tier).  To get an API key, [follow these instructions <LucideIcon name="ArrowRight" />](/providers/anthropic#getting-an-api-key)
 
-#### Anthropic
+Roo Code is compatible with [other providers](/providers/index) which offer Claude, and with a wide range of different models you can try.
 
-1. Go to [console.anthropic.com](https://console.anthropic.com/)
-2. Sign up for an account or log in
-3. Navigate to the [API keys section](https://console.anthropic.com/settings/keys) and create a new key
-4. **Important:** Copy your API key immediately as it won't be displayed again
-
-<img src="/img/connecting-api-provider/connecting-api-provider-5.png" alt="Anthropic console API Keys section" width="600" />
-
-*Anthropic console API Keys section with "Create key" button. Name your key, set expiration, and copy it immediately.*
-
-#### OpenAI
-
-1. Go to [platform.openai.com](https://platform.openai.com/)
-2. Sign up for an account or log in
-3. Navigate to the [API keys section](https://platform.openai.com/api-keys) and create a new key
-4. **Important:** Copy your API key immediately as it won't be displayed again
-
-<img src="/img/connecting-api-provider/connecting-api-provider-6.png" alt="OpenAI API keys page" width="600" />
+:::info Model Selection Advice
+We recommend **Claude Sonnet 4.5** because it "just works" out of the box for most tasks. We use it internally a lot.
 
-*OpenAI platform with "Create new secret key" button. Name your key and copy it immediately after creation.*
+You can choose other models, but that introduces complexity. Different models vary in how they follow tool instructions, parse formats, and maintain context through multi-step operations, so it may be better to try them later. If you do experiment with other models, choose ones specifically designed for structured reasoning and tool use.
+:::
 
 ---
 
-## Configuring Roo Code in VS Code
-
-Once you have your API key:
-
-1. Open the Roo Code sidebar by clicking the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar
-2. In the welcome screen, select your API provider from the dropdown
-3. Paste your API key into the appropriate field
-4. Select your model:
-   - For **OpenRouter**: select `anthropic/claude-sonnet-4-5` ([model details](https://openrouter.ai/anthropic/claude-sonnet-4-5))
-   - For **Anthropic**: select `claude-sonnet-4-5` ([model details](https://www.anthropic.com/pricing#anthropic-api))
+## Configuring the provider in VS Code
 
-:::info Model Selection Advice
-We strongly recommend **Claude Sonnet 4.5** for the best experience—it generally "just works" out of the box. Roo Code has been extensively optimized for this model's capabilities and instruction-following behavior.
-
-Selecting alternative models is an advanced feature that introduces complexity. Different models vary significantly in how they follow tool instructions, parse formats, and maintain context through multi-step operations. If you do experiment with other models, choose ones specifically designed for structured reasoning and tool use.
-:::
+1. Open the Roo Code panel by clicking the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar
+2. In the welcome screen, choose your LLM provider.
+3. If you chooe the Roo Code Cloud provider, just connect your account and choose `anthropic/claude-sonner-4-5` from the dropdown. You're set.
+4. If you chose another provider, pase the API key you copied from it into the right field and continue
+5. Select your model (it should be called `claude-sonnet-4-5` or `anthropic/claude-sonnet-4-5`) and complete the process.
 
-5. Click "Let's go!" to save your settings and start using Roo Code
+Now you can start coding!
diff --git a/docs/getting-started/your-first-task.md b/docs/getting-started/your-first-task.md
@@ -11,7 +11,7 @@ image: /img/social-share.jpg
 ---
 import KangarooIcon from '@site/src/components/KangarooIcon';
 
-# Starting Your First Task with Roo Code
+# Your first task
 
 Now that you've [configured your AI provider and model](/getting-started/connecting-api-provider), you're ready to start using Roo Code! This guide walks you through your first interaction.
 
@@ -21,11 +21,10 @@ Now that you've [configured your AI provider and model](/getting-started/connect
 
 Click the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar (vertical bar on the side of the window) to open the chat interface. If you don't see the icon, verify the extension is installed and enabled.
 
-<img src="/img/your-first-task/your-first-task.png" alt="Roo Code icon in VS Code Activity Bar" width="800" />
-
-*The Roo Code icon in the Activity Bar opens the chat interface.*
-
----
+<figure>
+  <img src="/img/your-first-task/your-first-task.png" alt="Roo Code icon in VS Code Activity Bar" width="600" />
+  <figcaption>The Roo Code icon in the Activity Bar opens the chat interface. You can drag it to position Roo elsewhere.</figcaption>
+</figure>
 
 ## Step 2: Type Your Task
 
@@ -37,17 +36,15 @@ Type a clear, concise description of what you want Roo Code to do in the chat bo
 
 No special commands or syntax needed—just use plain English.
 
-<img src="/img/your-first-task/your-first-task-6.png" alt="Typing a task in the Roo Code chat interface" width="500" />
-*Enter your task in natural language - no special syntax required.*
-
----
+<figure>
+  <img src="/img/your-first-task/your-first-task-6.png" alt="Typing a task in the Roo Code chat interface" width="400" />
+  <figcaption>Enter your task in natural language - no special syntax required.</figcaption>
+</figure>
 
 ## Step 3: Send Your Task
 
 Press Enter or click the Send icon (<Codicon name="send" />) to the right of the input box.
 
----
-
 ## Step 4: Review and Approve Actions
 
 Roo Code analyzes your request and proposes specific actions. These may include:
@@ -58,22 +55,26 @@ Roo Code analyzes your request and proposes specific actions. These may include:
 * **Using the Browser:** Outlines browser actions (click, type, etc.)
 * **Asking questions:** Requests clarification when needed to proceed
 
-<img src="/img/your-first-task/your-first-task-7.png" alt="Reviewing a proposed file creation action" width="800" />
-*Roo Code shows exactly what action it wants to perform and waits for your approval.*
+
+<figure>
+  <img src="/img/your-first-task/your-first-task-7.png" alt="Reviewing a proposed file creation action" width="800" />
+  <figcaption>Roo Code shows exactly what action it wants to perform and waits for your approval.</figcaption>
+</figure>
 
 **Each action requires your explicit approval** (unless auto-approval is enabled):
 
 * **Approve:** Click the "Approve" button to execute the proposed action
 * **Reject:** Click the "Reject" button and provide feedback if needed
 
----
 
 ## Step 5: Iterate
 
 Roo Code works iteratively. After each action, it waits for your feedback before proposing the next step. Continue this review-approve cycle until your task is complete.
 
-<img src="/img/your-first-task/your-first-task-8.png" alt="Final result of a completed task showing the iteration process" width="500" />
-*After completing the task, Roo Code shows the final result and awaits your next instruction.*
+<figure>
+  <img src="/img/your-first-task/your-first-task-8.png" alt="Final result of a completed task showing the iteration process" width="500" />
+  <figcaption>After completing the task, Roo Code shows the final result and awaits your next instruction.</figcaption>
+</figure>
 
 ---
 
diff --git a/docs/roo-code-cloud/billing-subscriptions.mdx b/docs/roo-code-cloud/billing-subscriptions.mdx
diff --git a/docs/roo-code-cloud/cloud-agents.mdx b/docs/roo-code-cloud/cloud-agents.mdx
@@ -18,10 +18,12 @@ image: /img/social-share.jpg
 
 Cloud Agents are specialized, autonomous AI workers that run in the cloud.
 
-It upends the way most people think about software development: instead of a highly specialized activity that can only happen in a specialized IDE, it encapsulates the relevant aspects of each part of the process into agents that can run on their own (but will take your guidance if you choose).
+They upend the way most people think about software development: instead of a highly specialized activity that can only happen in a specialized IDE, it encapsulates the relevant aspects of each part of the process into agents that can run on their own (but will take your guidance if you choose).
 
 In other words: instead of doing all of your learning, investigating, coding, testing and shipping from your IDE, you can delegate work to focused agents which operate as a team. And it's your choice how much you lean into it.
 
+Cloud Agents are available in all Roo Code Cloud plans, including the free one.
+
 Sounds like wishful thinking? Read on and we'll show you how to use them.
 
 ---
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1598,6 +1598,14 @@ main[class*="docMainContainer"] {
   text-decoration: underline;
 }
 
+.theme-doc-markdown a > svg {
+  height: 14px;
+  position: relative;
+  top: -1px;
+  width: 14px;
+  vertical-align: middle;
+}
+
 /* List spacing */
 .theme-doc-markdown ul,
 .theme-doc-markdown ol {
@@ -1674,7 +1682,7 @@ main[class*="docMainContainer"] {
 
 /* Admonitions (alerts) with roocode.com style */
 .theme-admonition {
-  margin: var(--figure-margin) 0 !important;
+  margin: var(--block-spacing) 0 !important;
   padding: calc(var(--block-spacing) * 0.5) calc(var(--block-spacing) * 0.5) calc(var(--block-spacing) * 0.25) !important;
   border-radius: calc(var(--radius) + 4px) !important;
   border: 1px solid hsl(var(--border) / 0.5) !important;
@@ -1687,7 +1695,7 @@ main[class*="docMainContainer"] {
   font-size: var(--text-regular-size);
   font-weight: 700 !important;
   text-transform: none;
-}
+}   
 
 .theme-admonition svg {
   margin-right: 0.1em !important;
@@ -1703,8 +1711,8 @@ main[class*="docMainContainer"] {
 
 .theme-admonition-info > div,
 .theme-admonition-info > div svg {
-  color: rgb(var(--accent));
-  fill: rgb(var(--accent));
+  /* color: rgb(var(--accent));
+  fill: rgb(var(--accent)); */
 }
 
 
@@ -1885,13 +1893,25 @@ main[class*="docMainContainer"] {
 }
 
 /* Image captions */
+.theme-doc-markdown figure {
+  margin: var(--block-spacing) calc(var(--block-spacing) * 0.5);
+  width: fit-content;
+}
+
+.theme-doc-markdown figure img {
+  display: block;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.theme-doc-markdown figure figcaption,
 .theme-doc-markdown img + em {
+  color: hsl(var(--muted-foreground));
   display: block;
+  font-size: calc(var(--text-regular-size) * 0.9);
+  font-style: normal;
+  margin-top: -1rem;
   text-align: center;
-  color: hsl(var(--muted-foreground));
-  font-size: 0.875rem;
-  margin-top: -1.5rem;
-  margin-bottom: 2rem;
 }
 
 /* HR styling */
