Compare commits

...
Author SHA1 Message Date
kevinneung d6d836b210 remove emojis
removed emojis
2025-06-24 17:43:40 -07:00
kevinneung 1641511a87 Merge branch 'main' into kevinneung-documentation-installing-cline 2025-06-24 17:19:25 -07:00
kevinneung 53c2968592 Add underline formatting to app.cline.bot hyperlink 2025-05-29 09:09:42 -07:00
kevinneung 34936126be Update installing-cline documentation 2025-05-29 08:58:59 -07:00
+91 -28
View File
@@ -4,39 +4,66 @@ description: "Cline is a VS Code extension that brings AI-powered coding assista
to your editor. Install using one of these methods:"
---
### Installation Options
### Installation Methods
- **VS Code Marketplace (Recommended):** Fastest method for standard VS Code and Cursor users.
- **Open VSX Registry:** For VS Code-compatible editors like VSCodium.
1. **VS Code Marketplace (Recommended):** Fastest method for standard VS Code and Cursor users.
2. **Open VSX Registry:** For VS Code-compatible editors like VSCodium.
### 🛠️ VS Code Marketplace: Step-by-Step Setup
### Method 1: VS Code Marketplace
Follow these steps to get Cline up and running:
1. **Open VS Code:** Launch the VS Code application.
> ⚠️ **Note:** If VS Code shows "Running extensions might...", click "Allow".
> **Note:** If VS Code shows "Running extensions might...", click "Allow".
2. **Open Your Cline Folder:** In VS Code, open the Cline folder you created in Documents.
3. **Navigate to Extensions:** Click on the Extensions icon in the Activity Bar on the side of VS Code (`Ctrl + Shift + X` or `Cmd + Shift + X`).
4. **Search for 'Cline':** In the Extensions search bar, type `Cline`.
2. **Open Your Cline Folder:** In VS Code, open the Cline folder you created in Documents. (Or create a folder named "Cline" if there isn't one already in Documents)
<Frame caption="VS Code marketplace with Cline extension ready to install">
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(20).png"
alt="VS Code marketplace showing Cline extension"
<Frame caption="Opening a Cline folder using VS Code">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/Opening_cline_folder.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
1. **Install the Extension:** Click the "Install" button next to the Cline extension.
2. **Open Cline:**
3. **Navigate to Extensions:** Click on the Extensions icon in the Activity Bar on the side of VS Code (`Ctrl + Shift + X` or `Cmd + Shift + X`).
4. **Search for 'Cline':** In the Extensions search bar, type `Cline`.
5. **Install the Extension:** Click the "Install" button next to the Cline extension.
<Frame caption="Finding Cline in VS Code Marketplace and Install">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/Installing_cline_from_marketplace.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
6. **Open Cline:**
- Click the Cline icon in the Activity Bar.
- Or, use the command palette (`Ctrl/Cmd + Shift + P`) and type "Cline: Open In New Tab" for a better view.
3. **Troubleshooting:** If you don't see the Cline icon, try restarting VS Code.
- You should see the Cline chat window appear in your VS Code editor!
> ✅ **Pro Tip:** You should see the Cline chat window appear in your VS Code editor!
**Troubleshooting:** If you don't see the Cline icon, try restarting VS Code.
### 🌐 Open VSX Registry
<Frame caption="Opening Cline from the Sidebar">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/opening_cline.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
### Method 2: Open VSX Registry
For VS Code-compatible editors without Marketplace access (like VSCodium and Windsurf):
@@ -46,22 +73,47 @@ For VS Code-compatible editors without Marketplace access (like VSCodium and Win
4. Select "Cline" by saoudrizwan and click **Install**.
5. Reload if prompted.
### 👤 Creating Your Cline Account
<Frame caption="Installing Cline in VSCodium">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/VSCodium_marketplace_installation.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
### Creating Your Cline Account
Now that you have Cline installed, let's get you set up with your account:
1. **Sign In to Cline:**
- Click the **Sign In** button in the Cline extension.
- You'll be taken to [app.cline.bot](https://app.cline.bot) to create your account.
- You'll be taken to <u>[app.cline.bot](https://app.cline.bot)</u> to create your account.
2. **Start with Free Credits:**
- No credit card needed!
3. **Available AI Models:**
- Anthropic Claude 3.5-Sonnet (recommended for coding)
- DeepSeek Chat (cost-effective alternative)
- Google Gemini 2.0 Flash
- And more — all through your Cline account.
### 💻 Your First Interaction with Cline
<Frame caption="Sign up for Cline account">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/Sign_up_for_cline_account.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
3. **Available AI Models:**
- Anthropic Claude Family (3.7 and higher recommended for coding)
- DeepSeek Chat (cost-effective alternative)
- Google Gemini Family
- And more
### Your First Interaction with Cline
You're ready to start building! Copy and paste this prompt into the Cline chat window:
@@ -69,15 +121,26 @@ You're ready to start building! Copy and paste this prompt into the Cline chat w
Hey Cline! Could you help me create a new project folder called "hello-world" in my Cline directory and make a simple webpage that says "Hello World" in big blue text?
```
> ✅ **Pro Tip:** Cline will help you create the project folder and set up your first webpage!
<Frame caption="Say Hello World with Cline">
<video
src="https://storage.googleapis.com/cline_public_images/docs/assets/Cline_hello_world_demo.mp4"
controls
autoPlay
muted
loop
style={{ width: "100%", height: "auto" }}
/>
</Frame>
### 🧩 Tips for Working with Cline
> **Pro Tip:** Cline will help you create the project folder and set up your first webpage!
### Tips for Working with Cline
- **Ask Questions:** If you're unsure about something, ask Cline!
- **Use Screenshots:** Cline can understand images — show him what you're working on.
- **Copy and Paste Errors:** Share error messages in the chat for solutions.
- **Speak Plainly:** Use your own words — Cline will translate them into code.
### 🫂 Still Struggling?
### Still Struggling?
Join our Discord community and engage with our team and other Cline users directly.