mirror of
https://github.com/cline/cline.git
synced 2026-09-04 20:02:30 +08:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 964ba104db | |||
| a8d00cbc40 | |||
| 237de4e52d |
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"claude-dev": minor
|
||||
---
|
||||
|
||||
Migrate getting-started section to new docs
|
||||
@@ -54,6 +54,18 @@
|
||||
},
|
||||
"navigation": {
|
||||
"groups": [
|
||||
{
|
||||
"group": "Getting Started",
|
||||
"pages": [
|
||||
"getting-started/for-new-coders",
|
||||
"getting-started/installing-cline",
|
||||
"getting-started/installing-dev-essentials",
|
||||
"getting-started/model-selection-guide",
|
||||
"getting-started/our-favorite-tech-stack",
|
||||
"getting-started/understanding-context-management",
|
||||
"getting-started/what-is-cline"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Exploring Cline's Tools",
|
||||
"pages": [
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: "For New Coders"
|
||||
description: "Welcome to Cline, your AI-powered coding companion! This guide will help you quickly set up your development environment and begin your coding journey with ease."
|
||||
---
|
||||
|
||||
> 💡 **Tip:** If you're completely new to coding, take your time with each step. There's no rush — Cline is here to guide you!
|
||||
|
||||
### 🚀 Getting Started
|
||||
|
||||
Before you jump into coding, make sure you have these essentials ready:
|
||||
|
||||
#### 1. **VS Code**
|
||||
|
||||
A popular, free, and powerful code editor.
|
||||
|
||||
- [Download VS Code](https://code.visualstudio.com/)
|
||||
|
||||
📺 **Recommended YouTube Tutorial:** [How to Install VS Code](https://www.youtube.com/watch?v=MlIzFUI1QGA)
|
||||
|
||||
> ✅ **Pro Tip:** Install VS Code in your Applications folder (macOS) or Program Files (Windows) for easy access from your dock or start menu.
|
||||
|
||||
#### 2. **Essential Development Tools**
|
||||
|
||||
Basic software required for coding efficiently:
|
||||
|
||||
- Homebrew (macOS)
|
||||
- Node.js
|
||||
- Git
|
||||
|
||||
👉 Follow our detailed guide on Installing Essential Development Tools with step-by-step help from Cline.
|
||||
|
||||
📺 **Recommended YouTube Tutorials:**
|
||||
|
||||
- **For macOS:**
|
||||
- [Install Homebrew on Mac](https://www.youtube.com/watch?v=hwGNgVbqasc)
|
||||
- [Install Git on MacOS 2024](https://www.youtube.com/watch?v=B4qsvQ5IqWk)
|
||||
- [Install Node.js on Mac (M1 | M2 | M3)](https://www.youtube.com/watch?v=I8H4wolRFBk)
|
||||
- **For Windows:**
|
||||
- [Install Git on Windows 10/11 (2024)](https://www.youtube.com/watch?v=yjxv1HuRQy0)
|
||||
- [Install Node.js in Windows 10/11](https://www.youtube.com/watch?v=uCgAuOYpJd0)
|
||||
|
||||
> ⚠️ **Note:** If you run into permission issues during installation, try running your terminal or command prompt as an administrator.
|
||||
|
||||
#### 3. **Organize Your Projects**
|
||||
|
||||
Create a dedicated folder named `Cline` in your Documents folder for all your coding projects:
|
||||
|
||||
- **macOS:** `/Users/[your-username]/Documents/Cline`
|
||||
- **Windows:** `C:\Users\[your-username]\Documents\Cline`
|
||||
|
||||
Inside your `Cline` folder, structure projects clearly:
|
||||
|
||||
- `Documents/Cline/workout-app` _(e.g., for a fitness tracking app)_
|
||||
- `Documents/Cline/portfolio-website` _(e.g., to showcase your work)_
|
||||
|
||||
> 💡 **Tip:** Keeping your projects organized from the start will save you time and confusion later!
|
||||
|
||||
#### 4. **Install the Cline VS Code Extension**
|
||||
|
||||
Enhance your coding workflow by installing the Cline extension directly within VS Code:
|
||||
|
||||
- Get Started with Cline Extension Tutorial
|
||||
|
||||
📺 **Recommended YouTube Tutorial:** [How To Install Extensions in VS Code](https://www.youtube.com/watch?v=E7trgwZa-mk)
|
||||
|
||||
> ✅ **Pro Tip:** After installing, reload VS Code to ensure the extension is activated properly.
|
||||
|
||||
🎉 You're all set! Dive in and start coding smarter and faster with **Cline**.
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: "Installing Cline"
|
||||
description: "Cline is a VS Code extension that brings AI-powered coding assistance directly
|
||||
to your editor. Install using one of these methods:"
|
||||
---
|
||||
|
||||
### Installation Options
|
||||
|
||||
- **VS Code Marketplace (Recommended):** Fastest method for standard VS Code and Cursor users.
|
||||
- **Open VSX Registry:** For VS Code-compatible editors like VSCodium.
|
||||
|
||||
### 🛠️ VS Code Marketplace: Step-by-Step Setup
|
||||
|
||||
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".
|
||||
|
||||
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`.
|
||||
|
||||
<Frame caption="VS Code marketplace with Cline extension ready to install">
|
||||
<img src="/assets/robot_panel_dark.png" alt="VS Code marketplace showing Cline extension" />
|
||||
</Frame>
|
||||
|
||||
1. **Install the Extension:** Click the "Install" button next to the Cline extension.
|
||||
2. **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.
|
||||
|
||||
> ✅ **Pro Tip:** You should see the Cline chat window appear in your VS Code editor!
|
||||
|
||||
### 🌐 Open VSX Registry
|
||||
|
||||
For VS Code-compatible editors without Marketplace access (like VSCodium and Windsurf):
|
||||
|
||||
1. Open your editor.
|
||||
2. Access the Extensions view.
|
||||
3. Search for "Cline".
|
||||
4. Select "Cline" by saoudrizwan and click **Install**.
|
||||
5. Reload if prompted.
|
||||
|
||||
### 👤 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.
|
||||
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.
|
||||
4. -
|
||||
|
||||
### 💻 Your First Interaction with Cline
|
||||
|
||||
You're ready to start building! Copy and paste this prompt into the Cline chat window:
|
||||
|
||||
```
|
||||
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!
|
||||
|
||||
### 🧩 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?
|
||||
|
||||
Join our Discord community and engage with our team and other Cline users directly.
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: "Installing Dev Essentials"
|
||||
description: >-
|
||||
When you start coding, you'll need some essential development tools installed
|
||||
on your computer. Cline can help you install everything you need in a safe,
|
||||
guided way.
|
||||
---
|
||||
|
||||
### 🧰 The Essential Tools
|
||||
|
||||
Here are the core tools you'll need for development:
|
||||
|
||||
- **Node.js & npm:** Required for JavaScript and web development
|
||||
- **Git:** For tracking changes in your code and collaborating with others
|
||||
- **Package Managers:** Tools that make it easy to install other development tools
|
||||
- Homebrew for macOS
|
||||
- Chocolatey for Windows
|
||||
- apt/yum for Linux
|
||||
|
||||
> 💡 **Tip:** These tools are the foundation of your developer toolkit. Installing them properly will set you up for success!
|
||||
|
||||
### 🚀 Let Cline Install Everything
|
||||
|
||||
Copy one of these prompts based on your operating system and paste it into **Cline**:
|
||||
|
||||
#### For macOS
|
||||
|
||||
```
|
||||
Hello Cline! I need help setting up my Mac for software development. Could you please help me install the essential development tools like Homebrew, Node.js, Git, and any other core utilities that are commonly needed for coding? I'd like you to guide me through the process step-by-step.
|
||||
```
|
||||
|
||||
#### For Windows
|
||||
|
||||
```
|
||||
Hello Cline! I need help setting up my Windows PC for software development. Could you please help me install the essential development tools like Node.js, Git, and any other core utilities that are commonly needed for coding? I'd like you to guide me through the process step-by-step.
|
||||
```
|
||||
|
||||
#### For Linux
|
||||
|
||||
```
|
||||
Hello Cline! I need help setting up my Linux system for software development. Could you please help me install the essential development tools like Node.js, Git, and any other core utilities that are commonly needed for coding? I'd like you to guide me through the process step-by-step.
|
||||
```
|
||||
|
||||
> ✅ **Pro Tip:** Cline will show you each command before running it. You stay in control the entire time!
|
||||
|
||||
### 🔍 What Will Happen
|
||||
|
||||
Cline will guide you through the following steps:
|
||||
|
||||
1. Installing the appropriate package manager for your system
|
||||
2. Using the package manager to install Node.js and Git
|
||||
3. Showing you the exact command before it runs (you approve each step!)
|
||||
4. Verifying each installation is successful
|
||||
|
||||
> ⚠️ **Note:** You might need to enter your computer's password for some installations. This is normal!
|
||||
|
||||
### 💡 Why These Tools Are Important
|
||||
|
||||
- **Node.js & npm:**
|
||||
- Build websites with frameworks like React or Next.js
|
||||
- Run JavaScript code
|
||||
- Install JavaScript packages
|
||||
- **Git:**
|
||||
- Save different versions of your code
|
||||
- Collaborate with other developers
|
||||
- Back up your work
|
||||
- **Package Managers:**
|
||||
- Quickly install and update development tools
|
||||
- Keep your environment organized and up to date
|
||||
|
||||
### 🧩 Notes
|
||||
|
||||
> 💡 **Tip:** The installation process is interactive — Cline will guide you step by step!
|
||||
|
||||
- All commands are shown to you for approval before they run.
|
||||
- If you run into any issues, Cline will help troubleshoot them.
|
||||
- You may need to enter your computer's password for certain steps.
|
||||
|
||||
### 🧑💻 Additional Tips for New Coders
|
||||
|
||||
#### Understanding the Terminal
|
||||
|
||||
The Terminal is an application where you can type commands to interact with your computer.
|
||||
|
||||
- **macOS:** Open it by searching for "Terminal" in Spotlight.
|
||||
- **Example:**
|
||||
|
||||
```
|
||||
$ open -a Terminal
|
||||
```
|
||||
|
||||
#### Understanding VS Code Features
|
||||
|
||||
- **Terminal in VS Code:** Run commands directly from within VS Code!
|
||||
- Go to **View > Terminal** or press \`Ctrl + \`\`.
|
||||
- Example:
|
||||
|
||||
```
|
||||
$ node -v
|
||||
v16.14.0
|
||||
```
|
||||
|
||||
- **Document View:** Where you edit your code files.
|
||||
- Open files from the Explorer panel on the left.
|
||||
- **Problems Section:** View errors or warnings in your code.
|
||||
- Access it by clicking the lightbulb icon or **View > Problems**.
|
||||
|
||||
#### Common Features
|
||||
|
||||
- **Command Line Interface (CLI):** A powerful tool for running commands.
|
||||
- **Permissions:** You might need to grant permissions to certain commands — this keeps your system secure.
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
title: "Model Selection Guide"
|
||||
description: "Last updated: Feb 5, 2025."
|
||||
---
|
||||
|
||||
## Understanding Context Windows
|
||||
|
||||
Think of a context window as your AI assistant's working memory - similar to RAM in a computer. It determines how much information the model can "remember" and process at once during your conversation. This includes:
|
||||
|
||||
- Your code files and conversations
|
||||
- The assistant's responses
|
||||
- Any documentation or additional context provided
|
||||
|
||||
Context windows are measured in tokens (roughly 3/4 of a word in English). Different models have different context window sizes:
|
||||
|
||||
- Claude 3.5 Sonnet: 200K tokens
|
||||
- DeepSeek Models: 128K tokens
|
||||
- Gemini Flash 2.0: 1M tokens
|
||||
- Gemini 1.5 Pro: 2M tokens
|
||||
|
||||
When you reach the limit of your context window, older information needs to be removed to make room for new information - just like clearing RAM to run new programs. This is why sometimes AI assistants might seem to "forget" earlier parts of your conversation.
|
||||
|
||||
Cline helps you manage this limitation with its Context Window Progress Bar, which shows:
|
||||
|
||||
- Input tokens (what you've sent to the model)
|
||||
- Output tokens (what the model has generated)
|
||||
- A visual representation of how much of your context window you've used
|
||||
- The total capacity for your chosen model
|
||||
|
||||
<Frame caption="Visual representation of the context window usage in Cline">
|
||||
<img src="/assets/robot_panel_light.png" alt="Context window progress bar example" />
|
||||
</Frame>
|
||||
|
||||
This visibility helps you work more effectively with Cline by letting you know when you might need to start fresh or break tasks into smaller chunks.
|
||||
|
||||
### Model Comparison
|
||||
|
||||
## LLM Model Comparison for Cline (Feb 2025)
|
||||
|
||||
| Model | Input Cost\* | Output Cost\* | Context Window | Best For |
|
||||
| ----------------- | ------------ | ------------- | -------------- | ----------------------------------- |
|
||||
| Claude 3.5 Sonnet | $3.00 | $15.00 | 200K | Best code implementation & tool use |
|
||||
| DeepSeek R1 | $0.55 | $2.19 | 128K | Planning & reasoning champion |
|
||||
| DeepSeek V3 | $0.14 | $0.28 | 128K | Value code implementation |
|
||||
| o3-mini | $1.10 | $4.40 | 200K | Flexible use, strong planning |
|
||||
| Gemini Flash 2.0 | $0.00 | $0.00 | 1M | Strong all-rounder |
|
||||
| Gemini 1.5 Pro | $0.00 | $0.00 | 2M | Large context processing |
|
||||
|
||||
\*Costs per million tokens
|
||||
|
||||
### Top Picks for 2025
|
||||
|
||||
1. **Claude 3.5 Sonnet**
|
||||
- Best overall code implementation
|
||||
- Most reliable tool usage
|
||||
- Expensive but worth it for critical code
|
||||
2. **DeepSeek R1**
|
||||
- Exceptional planning & reasoning
|
||||
- Great value pricing
|
||||
3. **o3-mini**
|
||||
- Strong for planning with adjustable reasoning
|
||||
- Three reasoning modes for different needs
|
||||
- Requires OpenAI Tier 3 API access
|
||||
- 200K context window
|
||||
4. **DeepSeek V3**
|
||||
- Reliable code implementation
|
||||
- Great for daily coding
|
||||
- Cost-effective for implementation
|
||||
5. **Gemini Flash 2.0**
|
||||
- Massive 1M context window
|
||||
- Improved speed and performance
|
||||
- Good all-around capabilities
|
||||
|
||||
### Best Models by Mode (Plan or Act)
|
||||
|
||||
#### Planning
|
||||
|
||||
1. **DeepSeek R1**
|
||||
- Best reasoning capabilities in class
|
||||
- Excellent at breaking down complex tasks
|
||||
- Strong math/algorithm planning
|
||||
- MoE architecture helps with reasoning
|
||||
2. **o3-mini (high reasoning)**
|
||||
- Three reasoning levels:
|
||||
- High: Complex planning
|
||||
- Medium: Daily tasks
|
||||
- Low: Quick ideas
|
||||
- 200K context helps with large projects
|
||||
3. **Gemini Flash 2.0**
|
||||
- Massive context window for complex planning
|
||||
- Strong reasoning capabilities
|
||||
- Good with multi-step tasks
|
||||
|
||||
#### Acting (coding)
|
||||
|
||||
1. **Claude 3.5 Sonnet**
|
||||
- Best code quality
|
||||
- Most reliable with Cline tools
|
||||
- Worth the premium for critical code
|
||||
2. **DeepSeek V3**
|
||||
- Nearly Sonnet-level code quality
|
||||
- Better API stability than R1
|
||||
- Great for daily coding
|
||||
- Strong tool usage
|
||||
3. **Gemini 1.5 Pro**
|
||||
- 2M context window
|
||||
- Good with complex codebases
|
||||
- Reliable API
|
||||
- Strong multi-file understanding
|
||||
|
||||
### A Note on Local Models
|
||||
|
||||
While running models locally might seem appealing for cost savings, we currently don't recommend any local models for use with Cline. [Local models are significantly less reliable](https://docs.cline.bot/running-models-locally/read-me-first) at using Cline's essential tools and typically retain only 1-26% of the original model's capabilities. The full cloud version of DeepSeek-R1, for example, is 671B parameters - local versions are drastically simplified copies that struggle with complex tasks and tool usage. Even with high-end hardware (RTX 3070+, 32GB+ RAM), you'll experience slower responses, less reliable tool execution, and reduced capabilities. For the best development experience, we recommend sticking with the cloud models listed above.
|
||||
|
||||
### Key Takeaways
|
||||
|
||||
1. **Plan vs Act Matters**: Choose models based on task type
|
||||
2. **Real Performance > Benchmarks**: Focus on actual Cline performance
|
||||
3. **Mix & Match**: Use different models for planning and implementation
|
||||
4. **Cost vs Quality**: Premium models worth it for critical code
|
||||
5. **Keep Backups**: Have alternatives ready for API issues
|
||||
|
||||
_\*Note: Based on real usage patterns and community feedback rather than just benchmarks. Your experience may vary. This is not an exhaustive list of all the models available for use within Cline._
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
title: "Our Favorite Tech Stack"
|
||||
description: "A curated list of our recommended technologies and tools for building modern web applications with Cline."
|
||||
---
|
||||
|
||||
## Recommended Stack for New Cline Users (2025)
|
||||
|
||||
### Your Complete Development Environment
|
||||
|
||||
#### Development Tools
|
||||
|
||||
- **VS Code** - Your code editor, [download here](https://code.visualstudio.com/)
|
||||
- **GitHub** - Where your code lives, [sign up here](https://github.com)
|
||||
|
||||
#### Frontend
|
||||
|
||||
- **Next.js 14+** - React framework with App Router
|
||||
- **Tailwind CSS** - Beautiful styling without writing CSS
|
||||
- **TypeScript** - JavaScript, but safer and smarter
|
||||
|
||||
#### Backend
|
||||
|
||||
- **Supabase** - Your complete backend solution, [sign up with GitHub](https://supabase.com)
|
||||
- PostgreSQL database
|
||||
- Authentication
|
||||
- File storage
|
||||
- Real-time updates
|
||||
|
||||
#### Deployment
|
||||
|
||||
- **Vercel** - Where your app runs, [sign up with GitHub](https://vercel.com)
|
||||
- Automatic deployments from GitHub
|
||||
- Preview deployments for testing
|
||||
- Production-ready CDN
|
||||
|
||||
#### AI Development
|
||||
|
||||
Choose your AI assistant based on your needs:
|
||||
|
||||
| Model | Input Cost (per 1M tokens) | Output Cost (per 1M tokens) | Best For |
|
||||
| ----------------- | -------------------------- | --------------------------- | ------------------------------ |
|
||||
| Claude 3.5 Sonnet | $3.00 | $15.00 | Production apps, complex tasks |
|
||||
| DeepSeek R1 | $1.00 | $3.00 | Budget-conscious production |
|
||||
| DeepSeek V3 | $0.14 | $2.20 | Budget-conscious development |
|
||||
|
||||
#### Free Tier Benefits
|
||||
|
||||
**Vercel (Hobby)**
|
||||
|
||||
- 100 GB data transfer/month
|
||||
- 100k serverless function invocations
|
||||
- 100 MB deployment size
|
||||
- Automatic HTTPS & CI/CD
|
||||
|
||||
**Supabase (Free)**
|
||||
|
||||
- 500 MB database storage
|
||||
- 1 GB file storage
|
||||
- 50k monthly active users
|
||||
- 2M real-time messages/month
|
||||
|
||||
**GitHub (Free)**
|
||||
|
||||
- Unlimited public repositories
|
||||
- GitHub Actions CI/CD
|
||||
- Project management tools
|
||||
- Collaboration features
|
||||
|
||||
### Getting Started
|
||||
|
||||
1. Install the development essentials:
|
||||
- Follow our [Development Essentials Installation Guide](https://docs.cline.bot/getting-started/getting-started-new-coders/installing-dev-essentials)
|
||||
2. Set up Cline's Memory Bank:
|
||||
- Follow the [Memory Bank setup instructions](https://docs.cline.bot/improving-your-prompting-skills/custom-instructions-library/cline-memory-bank)
|
||||
- Create an empty `cline_docs` folder in your project root
|
||||
- Create `projectBrief.md` in the `cline_docs` folder (see example below)
|
||||
- Tell Cline to "initialize memory bank"
|
||||
3. Add our recommended stack configuration:
|
||||
- Create `.clinerules` file (see template below)
|
||||
- Let Cline handle the rest!
|
||||
|
||||
#### Example Project Brief
|
||||
|
||||
```markdown
|
||||
# Project Brief
|
||||
|
||||
## Overview
|
||||
|
||||
Building a [type of application] that will [main purpose].
|
||||
|
||||
## Core Features
|
||||
|
||||
- Feature 1
|
||||
- Feature 2
|
||||
- Feature 3
|
||||
|
||||
## Target Users
|
||||
|
||||
[Describe who will use your application]
|
||||
|
||||
## Technical Preferences (optional)
|
||||
|
||||
- Any specific technologies you want to use
|
||||
- Any specific requirements or constraints
|
||||
```
|
||||
|
||||
### .clinerules Template
|
||||
|
||||
```markdown
|
||||
# Project Configuration
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- Next.js 14+ with App Router
|
||||
- Tailwind CSS for styling
|
||||
- Supabase for backend
|
||||
- Vercel for deployment
|
||||
- GitHub for version control
|
||||
|
||||
## Project Structure
|
||||
|
||||
/src
|
||||
/app # Next.js App Router pages
|
||||
/components # React components
|
||||
/lib # Utility functions
|
||||
/types # TypeScript types
|
||||
/supabase
|
||||
/migrations # SQL migration files
|
||||
/seed # Seed data files
|
||||
/public # Static assets
|
||||
|
||||
## Database Migrations
|
||||
|
||||
SQL files in /supabase/migrations should:
|
||||
|
||||
- Use sequential numbering: 001, 002, etc.
|
||||
- Include descriptive names
|
||||
- Be reviewed by Cline before execution
|
||||
Example: 001_create_users_table.sql
|
||||
|
||||
## Development Workflow
|
||||
|
||||
- Cline helps write and review code changes
|
||||
- Vercel automatically deploys from main branch
|
||||
- Database migrations reviewed by Cline before execution
|
||||
|
||||
## Security
|
||||
|
||||
DO NOT read or modify:
|
||||
|
||||
- .env files
|
||||
- \*_/config/secrets._
|
||||
- Any file containing API keys or credentials
|
||||
```
|
||||
|
||||
### Learning Resources (2025)
|
||||
|
||||
Want to learn more about the technologies we're using? Here are some great resources:
|
||||
|
||||
#### Next.js and React
|
||||
|
||||
- [Official Learn Next.js Course](https://nextjs.org/learn) - Interactive tutorial
|
||||
- [NextJS App Router: Modern Web Dev in 1 Hour](https://www.youtube.com/nextjs-modern) - Quick overview
|
||||
- [Building Real-World Apps with Next.js](https://www.youtube.com/nextjs-real-world) - Practical examples
|
||||
|
||||
#### Supabase
|
||||
|
||||
- [Supabase From Scratch](https://www.udemy.com/supabase-scratch) - Comprehensive course
|
||||
- [Official Quickstart Guides](https://supabase.com/docs/guides/getting-started)
|
||||
- [Real-Time Apps with Next.js and Supabase](https://www.newline.co/courses/supabase-nextjs)
|
||||
|
||||
#### Tailwind CSS
|
||||
|
||||
- [Tailwind CSS Tutorial for Beginners](https://www.youtube.com/tailwind-2025)
|
||||
- [Official Tailwind Documentation](https://tailwindcss.com/docs)
|
||||
- Interactive course at [Scrimba Tailwind CSS Course](https://scrimba.com/learn/tailwind)
|
||||
|
||||
### Other Things to Know
|
||||
|
||||
#### Working with Git & GitHub
|
||||
|
||||
Git helps you track changes in your code and collaborate with others. Here are the essential commands you'll use:
|
||||
|
||||
**Daily Development**
|
||||
|
||||
```bash
|
||||
# Save your changes (do this often!)
|
||||
git add . # Stage all changed files
|
||||
git commit -m "Add login page" # Save changes with a clear message
|
||||
|
||||
# Share your changes
|
||||
git push origin main # Upload to GitHub
|
||||
```
|
||||
|
||||
**Common Workflow**
|
||||
|
||||
1. **Start of day**: Get latest changes
|
||||
|
||||
```bash
|
||||
bashCopygit pull origin main # Download latest code
|
||||
```
|
||||
|
||||
2. **During development**: Save work regularly
|
||||
|
||||
```bash
|
||||
bashCopygit add .
|
||||
git commit -m "Clear message about changes"
|
||||
```
|
||||
|
||||
3. **End of day**: Share your progress
|
||||
|
||||
```bash
|
||||
bashCopygit push origin main # Upload to GitHub
|
||||
```
|
||||
|
||||
**Best Practices**
|
||||
|
||||
- Commit often with clear messages
|
||||
- Pull before starting new work
|
||||
- Push completed work to share with others
|
||||
- Use `.gitignore` to avoid committing sensitive files
|
||||
|
||||
> **Tip**: Vercel automatically deploys when you push to main!
|
||||
|
||||
#### Environment Variables
|
||||
|
||||
- Store secrets in `.env.local` for development
|
||||
- Add them to Vercel project settings for production
|
||||
- Never commit `.env` files to Git
|
||||
|
||||
#### Getting Help
|
||||
|
||||
1. Use `/help` in Cline chat for immediate assistance
|
||||
2. Check [Cline Documentation](https://docs.cline.bot)
|
||||
3. Join our [Discord Community](https://discord.gg/cline)
|
||||
4. Search GitHub issues for common problems
|
||||
|
||||
Remember: Cline is here to help at every step. Just ask for guidance or clarification when needed!
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
title: "Context Management"
|
||||
description: "Context is key to getting the most out of Cline"
|
||||
---
|
||||
|
||||
> 💡 **Quick Reference**
|
||||
>
|
||||
> - Context = The information Cline knows about your project
|
||||
> - Context Window = How much information Cline can hold at once
|
||||
> - Use context files to maintain project knowledge
|
||||
> - Reset when the context window gets full
|
||||
|
||||
## Understanding Context & Context Windows
|
||||
|
||||
<Frame caption="In a world of infinite context, the context window is what Cline currently has available">
|
||||
<img
|
||||
src="/assets/robot_panel_dark.png"
|
||||
alt="In a world of infinite context, the context window is what Cline currently has available"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
Think of working with Cline like collaborating with a thorough, proactive teammate:
|
||||
|
||||
### How Context is Built
|
||||
|
||||
Cline actively builds context in two ways:
|
||||
|
||||
1. **Automatic Context Gathering (i.e. Cline-driven)**
|
||||
- Proactively reads related files
|
||||
- Explores project structure
|
||||
- Analyzes patterns and relationships
|
||||
- Maps dependencies and imports
|
||||
- Asks clarifying questions
|
||||
2. **User-Guided Context**
|
||||
- Share specific files
|
||||
- Provide documentation
|
||||
- Answer Cline's questions
|
||||
- Guide focus areas
|
||||
- Share design thoughts and requirements
|
||||
|
||||
💡 **Key Point**: Cline isn't passive - it actively seeks to understand your project. You can either let it explore or guide its focus, especially in [Plan](https://docs.cline.bot/exploring-clines-tools/plan-and-act-modes-a-guide-to-effective-ai-development) mode.
|
||||
|
||||
### Context & Context Windows
|
||||
|
||||
Think of context like a whiteboard you and Cline share:
|
||||
|
||||
- **Context** is all the information available:
|
||||
- What Cline has discovered
|
||||
- What you've shared
|
||||
- Your conversation history
|
||||
- Project requirements
|
||||
- Previous decisions
|
||||
- **Context Window** is the size of the whiteboard itself:
|
||||
- Measured in tokens (1 token ≈ 3/4 of an English word)
|
||||
- Each model has a fixed size:
|
||||
- Claude 3.5 Sonnet: 200,000 tokens
|
||||
- DeepSeek: 64,000 tokens
|
||||
- When the whiteboard is full, you need to erase (clear context) to write more
|
||||
- [How Cline manages context under the hood](https://cline.bot/blog/understanding-the-new-context-window-progress-bar-in-cline)
|
||||
|
||||
⚠️ **Important**: Having a large context window (like Claude's 200k tokens) doesn't mean you should fill it completely. Just like a cluttered whiteboard, too much information can make it harder to focus on what's important.
|
||||
|
||||
## Understanding the Context Window Progress Bar
|
||||
|
||||
Cline provides a visual way to monitor your context window usage through a progress bar:
|
||||
|
||||
<Frame caption="Visual representation of the context window usage">
|
||||
<img src="/assets/robot_panel_light.png" alt="Context window progress bar" />
|
||||
</Frame>
|
||||
|
||||
### Reading the Bar
|
||||
|
||||
- ↑ shows input tokens (what you've sent to the LLM)
|
||||
- ↓ shows output tokens (what the LLM has generated)
|
||||
- The progress bar visualizes how much of your context window you've used
|
||||
- The total shows your model's maximum capacity (e.g., 200k for Claude 3.5-Sonnet)
|
||||
|
||||
### When to Watch the Bar
|
||||
|
||||
- During long coding sessions
|
||||
- When working with multiple files
|
||||
- Before starting complex tasks
|
||||
- When Cline seems to lose context
|
||||
|
||||
💡 **Tip**: Consider starting a fresh session when usage reaches 70-80% to maintain optimal performance.
|
||||
|
||||
## Working with Context Files
|
||||
|
||||
Context files help maintain understanding across sessions. They serve as documentation specifically designed to help AI assistants understand your project.
|
||||
|
||||
#### Approaches to Context Files
|
||||
|
||||
1. **Evergreen Project Context (i.e.** [**Memory Bank**](https://docs.cline.bot/improving-your-prompting-skills/custom-instructions-library/cline-memory-bank)**)**
|
||||
- Living documentation that evolves with your project
|
||||
- Updated as architecture and patterns emerge
|
||||
- Example: The Memory Bank pattern maintains files like `techContext.md` and `systemPatterns.md`
|
||||
- Useful for long-running projects and teams
|
||||
2. **Task-Specific Context (i.e.** [**Structured Approach**](https://cline.bot/blog/building-advanced-software-with-cline-a-structured-approach)**)**
|
||||
|
||||
- Created for specific implementation tasks
|
||||
- Document requirements, constraints, and decisions
|
||||
- Example:
|
||||
|
||||
```markdown
|
||||
# auth-system-implementation.md
|
||||
|
||||
## Requirements
|
||||
|
||||
- OAuth2 implementation
|
||||
- Support for Google and GitHub
|
||||
- Rate limiting on auth endpoints
|
||||
|
||||
## Technical Decisions
|
||||
|
||||
- Using Passport.js for provider integration
|
||||
- JWT for session management
|
||||
- Redis for rate limiting
|
||||
```
|
||||
|
||||
3. **Knowledge Transfer Docs**
|
||||
- Switch to plan mode and ask Cline to document everything you've accomplished so far, along with the remaining steps, in a markdown file.
|
||||
- Copy the contents of the markdown file.
|
||||
- Start a new task using that content as context.
|
||||
|
||||
#### Using Context Files Effectively
|
||||
|
||||
1. **Structure and Format**
|
||||
- Use clear, consistent organization
|
||||
- Include relevant examples
|
||||
- Link related concepts
|
||||
- Keep information focused
|
||||
2. **Maintenance**
|
||||
- Update after significant changes
|
||||
- Version control your context files
|
||||
- Remove outdated information
|
||||
- Document key decisions
|
||||
|
||||
## Practical Tips
|
||||
|
||||
1. **Starting New Projects**
|
||||
- Let Cline explore the codebase
|
||||
- Answer its questions about structure and patterns
|
||||
- Consider setting up basic context files
|
||||
- Document key design decisions
|
||||
2. **Ongoing Development**
|
||||
- Update context files with significant changes
|
||||
- Share relevant documentation
|
||||
- Use Plan mode for complex discussions
|
||||
- Start fresh sessions when needed
|
||||
3. **Team Projects**
|
||||
- Share common context files (consider using [.clinerules](https://docs.cline.bot/improving-your-prompting-skills/prompting) files in project roots)
|
||||
- Document architectural decisions
|
||||
- Maintain consistent patterns
|
||||
- Keep documentation current
|
||||
|
||||
Remember: The goal is to help Cline maintain consistent understanding of your project across sessions.
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "What is Cline?"
|
||||
description: "An introduction to Cline, your AI-powered development assistant in VS Code."
|
||||
---
|
||||
|
||||
Cline is an AI development assistant which integrates with Microsoft Visual Studio Code. It provides an interface between your IDE and LLMs facilitating code development, increasing productivity and lowering the barrier to entry for new coders. Depending on permissions, Cline can read/write files, execute commands, use your web browser, and expand its capabilities with Model Context Protocol servers.
|
||||
|
||||
What makes Cline distinctive is its thoughtful approach to code generation and its extensive integration capabilities. Rather than simply generating code snippets, Cline collaborates with developers by planning solutions step-by-step, maintaining awareness of the entire development environment, and requiring explicit approval for all changes. It can understand large codebases, accelerate onboarding for new engineers, and connect with hundreds of tools through its Model Context Protocol Marketplace, enabling everything from streamlined project deployments to automated incident response—all through natural language commands.
|
||||
Reference in New Issue
Block a user