Compare commits

...
Author SHA1 Message Date
Elephant Lumps 498452c406 changeset 2025-05-06 20:50:36 -05:00
Elephant Lumps e4a94aee38 add cdn image links 2025-05-06 20:50:09 -05:00
19 changed files with 121 additions and 49 deletions
+5
View File
@@ -0,0 +1,5 @@
---
"claude-dev": minor
---
Add image links to docs
@@ -36,7 +36,7 @@ Cline offers the option of utilizing AWS credentials or AWS profiles to access A
<Frame>
<img
src="/assets/robot_panel_dark.png"
src="https://storage.googleapis.com/cline_public_images/docs/assets/cline-aws-setup-markup%20(1).png"
alt="AWS Bedrock configuration in Cline settings showing profile authentication setup"
/>
</Frame>
+4 -1
View File
@@ -76,7 +76,10 @@ Vertex AI supports eight regions. Select a region that meets your latency, compl
- Search for **Cline** and install the extension
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Cline extension in VS Code" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/cline-extension-arrow.png"
alt="Cline extension in VS Code"
/>
</Frame>
#### 3.2 Configure Cline Settings
@@ -6,7 +6,7 @@ Cline supports major cloud providers like AWS Bedrock and Google's Cloud Vertex;
For the purpose of this document, we assume your organization will use cloud-based frontier models. Cloud inference providers offer cutting-edge capabilities and the flexibility to select models which best suit your needs.
Certain scenarios may warrant using local models, including handling highly sensitive data, applications requiring consistent low-latency responses, or compliance with strict data sovereignty requirements. If your team needs to utilize local models, see [Running Local Models ](/running-local-models/read-me-first.mdx)with Cline.
Certain scenarios may warrant using local models, including handling highly sensitive data, applications requiring consistent low-latency responses, or compliance with strict data sovereignty requirements. If your team needs to utilize local models, see [Running Local Models ](/running-models-locally/read-me-first.mdx)with Cline.
---
@@ -14,9 +14,9 @@ Certain scenarios may warrant using local models, including handling highly sens
#### [IAM Security Best Practices](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) (For administrators)
#### [AWS Bedrock setup for Legacy IAM (AWS Credentials)](/custom-model-configs/aws-bedrock.mdx)
#### [AWS Bedrock setup for Legacy IAM (AWS Credentials)](/custom-model-configs/aws-bedrock-with-credentials-authentication.mdx)
#### [AWS Bedrock setup for SSO token (AWS Profile)](/custom-model-configs/aws-bedrock-w-profile-authentication.mdx)
#### [AWS Bedrock setup for SSO token (AWS Profile)](/custom-model-configs/aws-bedrock-with-profile-authentication.mdx)
#### VPC Endpoint Setup
@@ -28,12 +28,12 @@ To protect your team's data, Cline supports VPC (Virtual Private Cloud) endpoint
2. Follow the directions for [creating a VPC endpoint](https://docs.aws.amazon.com/vpc/latest/privatelink/create-interface-endpoint.html#create-interface-endpoint-aws) in the AWS console. The image below pertains to steps 4 and 5 of the AWS guide linked above.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="VPC Console" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/vpc-console.png" alt="VPC Console" />
</Frame>
3. Note the IP address of your VPC endpoint, open Cline's settings menu, and select `AWS Bedrock`from the API Provider dropdown.
4. Click the `Use Custom VPC endpoint`checkbox and enter the IP address of your VPC endpoint
<Frame>
<img src="/assets/robot_panel_dark.png" alt="VPC Settings Menu" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/vpc-settings-menu.png" alt="VPC Settings Menu" />
</Frame>
@@ -13,7 +13,10 @@ title: "Security Concerns"
Cline operates exclusively as a client-side VSCode extension with zero server-side components. This fundamental design choice ensures that your code and data remain within your secure environment at all times. Unlike traditional AI assistants that send data to external servers for processing, Cline connects directly to your chosen cloud provider's AI endpoints, keeping all sensitive information within your infrastructure boundaries.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Cline's relationship to local and remote assets" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/cline-arch.png"
alt="Cline's relationship to local and remote assets"
/>
</Frame>
### Data Privacy Commitment
+9 -3
View File
@@ -28,7 +28,10 @@ After each tool use, you can:
2. Click the "Restore" button to open restore options
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Checkpoint comparison and restore options" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(13).png"
alt="Checkpoint comparison and restore options"
/>
</Frame>
#### Rolling Back
@@ -60,7 +63,7 @@ Checkpoints let you be more experimental with Cline. While human coding is often
- Ideal for exploring different design patterns or architectural approaches
<Frame caption="In this case, I didn't like the changes Cline made to my robot dog-walking website (still working on the robots) and I wanted to revert both the codebase and the task to before any changes were made so I could start fresh.">
<img src="/assets/robot_panel_dark.png" alt="Checkpoint restore demo" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/checkpointsDemo.gif" alt="Checkpoint restore demo" />
</Frame>
### ✨ Best Practices
@@ -104,5 +107,8 @@ Perhaps you didn't get the results you wanted, thought of a better way to phrase
- Shift + Enter: Insert new line / line break
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Message editing interface" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/message-editing.png"
alt="Message editing interface"
/>
</Frame>
@@ -7,7 +7,10 @@ title: "Plan & Act Modes: A Guide to Effective AI Development"
Plan & Act modes represent Cline's approach to structured AI development, emphasizing thoughtful planning before implementation. This dual-mode system helps developers create more maintainable, accurate code while reducing iteration time.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Use Plan to gather context before using Act to implement the plan" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/planningThenActing%20(1).gif"
alt="Use Plan to gather context before using Act to implement the plan"
/>
</Frame>
### Understanding the Modes
@@ -27,7 +30,7 @@ Plan & Act modes represent Cline's approach to structured AI development, emphas
- Can execute changes to your codebase
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Act mode capabilities" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(5).png" alt="Act mode capabilities" />
</Frame>
### Workflow Guide
@@ -39,7 +42,7 @@ Begin every significant development task in Plan mode:
In this mode:
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Plan mode workflow" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(5)%20(1).png" alt="Plan mode workflow" />
</Frame>
- Share your requirements
@@ -48,7 +51,10 @@ In this mode:
- Develop implementation strategy
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Planning phase" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(2)%20(1)%20(1)%20(1).png"
alt="Planning phase"
/>
</Frame>
#### 2. Switch to Act Mode
@@ -56,7 +62,7 @@ In this mode:
Once you have a clear plan, switch to Act mode:
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Switching to Act mode" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/switching-to-act.gif" alt="Switching to Act mode" />
</Frame>
Act mode allows Cline to:
@@ -90,7 +96,10 @@ Complex projects often require multiple plan-act cycles:
4. Document significant decisions
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Implementation best practices" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(3)%20(1).png"
alt="Implementation best practices"
/>
</Frame>
### Power User Tips
@@ -119,7 +128,7 @@ Complex projects often require multiple plan-act cycles:
- Executing test cases
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Mode usage patterns" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(6).png" alt="Mode usage patterns" />
</Frame>
### Contributing
+4 -1
View File
@@ -22,7 +22,10 @@ Follow these steps to get Cline up and running:
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" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(20).png"
alt="VS Code marketplace showing Cline extension"
/>
</Frame>
1. **Install the Extension:** Click the "Install" button next to the Cline extension.
@@ -28,7 +28,10 @@ Cline helps you manage this limitation with its Context Window Progress Bar, whi
- 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" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(11).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.
@@ -14,7 +14,7 @@ description: "Context is key to getting the most out of Cline"
<Frame caption="In a world of infinite context, the context window is what Cline currently has available">
<img
src="/assets/robot_panel_dark.png"
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(2).png"
alt="In a world of infinite context, the context window is what Cline currently has available"
/>
</Frame>
@@ -65,7 +65,10 @@ Think of context like a whiteboard you and Cline share:
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" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(1)%20(1).png"
alt="Context window progress bar"
/>
</Frame>
### Reading the Bar
+8 -6
View File
@@ -11,7 +11,10 @@ Utilizing MCP servers will increase your token usage. Cline offers the ability t
3. Cline will open a new settings window. find `Cline>Mcp:Mode` and make your selection from the dropdown menu.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="MCP settings edit" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/MCP-settings-edit%20(1).png"
alt="MCP settings edit"
/>
</Frame>
## Managing Individual MCP Servers
@@ -22,7 +25,10 @@ Each MCP server has its own configuration panel where you can modify settings, m
2. Locate the MCP server you want to manage in the list, and open it by clicking on its name.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="MCP settings individual" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/MCP-settings-individual.png"
alt="MCP settings individual"
/>
</Frame>
### Deleting a Server
@@ -45,10 +51,6 @@ To set the maximum time to wait for a response after a tool call to the MCP serv
1. Click the `Network Timeout` dropdown at the bottom of the individual MCP server's config box and change the time. Default is 1 minute but it can be set between 30 seconds and 1 hour.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Network Timeout pulldown" />
</Frame>
## Editing MCP Settings Files
Settings for all installed MCP servers are located in the `cline_mcp_settings.json` file:
+1 -1
View File
@@ -14,7 +14,7 @@ Model Context Protocol is an open protocol that standardizes how applications pr
<Frame>
<img
src="/assets/robot_panel_dark.png"
src="https://storage.googleapis.com/cline_public_images/docs/assets/mcp-diagram.png"
alt="MCP diagram showing how MCP servers connect LLMs to external tools and data sources"
/>
</Frame>
+8 -2
View File
@@ -242,7 +242,10 @@ Let's walk through the development process of our AlphaAdvantage MCP server, whi
### Planning Phase
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Planning phase demonstration" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/planning-phase.gif"
alt="Planning phase demonstration"
/>
</Frame>
During the planning phase, we:
@@ -267,7 +270,10 @@ During the planning phase, we:
### Implementation
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Building MCP plugin demonstration" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/building-mcp-plugin.gif"
alt="Building MCP plugin demonstration"
/>
</Frame>
We began by bootstrapping the project:
+5 -5
View File
@@ -13,7 +13,7 @@ To get started with Cline Memory Bank:
3. **Paste into Cline** - Add as custom instructions or in a .clinerules file
4. **Initialize** - Ask Cline to "initialize memory bank"
[See detailed setup instructions](cline-memory-bank.md#getting-started-with-memory-bank)
[See detailed setup instructions](#getting-started-with-memory-bank)
### Cline Memory Bank Custom Instructions \[COPY THIS]
@@ -152,7 +152,7 @@ The Memory Bank is a structured documentation system that allows Cline to mainta
The Memory Bank isn't a Cline-specific feature - it's a methodology for managing AI context through structured documentation. When you instruct Cline to "follow custom instructions," it reads the Memory Bank files to rebuild its understanding of your project.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Memory Bank Workflow" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(15).png" alt="Memory Bank Workflow" />
</Frame>
#### Understanding the Files
@@ -162,7 +162,7 @@ Memory Bank files are simply markdown files you create in your project. They're
Files are organized in a hierarchical structure that builds up a complete picture of your project:
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Memory Bank File Structure" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(16).png" alt="Memory Bank File Structure" />
</Frame>
### Memory Bank Files Explained
@@ -223,7 +223,7 @@ Create additional files when needed to organize:
3. Ask Cline to "initialize memory bank"
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Memory Bank Setup" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(17).png" alt="Memory Bank Setup" />
</Frame>
#### Project Brief Tips
@@ -287,7 +287,7 @@ As you work with Cline, your context window will eventually fill up (note the pr
This workflow ensures that important context is preserved in your Memory Bank files before the context window is cleared, allowing you to continue seamlessly in a fresh conversation.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Memory Bank Context Window" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(18).png" alt="Memory Bank Context Window" />
</Frame>
#### How often should I update the memory bank?
+2 -2
View File
@@ -22,7 +22,7 @@ To add custom instructions:
4. Paste your instructions
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Cline Logo" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(1).png" alt="Cline Logo" />
</Frame>
Custom instructions are powerful for:
@@ -207,7 +207,7 @@ Located conveniently under the chat input field, this popover allows you to:
This UI significantly simplifies switching contexts and managing different sets of instructions without needing to manually edit files or configurations during a conversation.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Cline Logo" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(1).png" alt="Cline Logo" />
</Frame>
## .clineignore File Guide
+17 -5
View File
@@ -20,7 +20,7 @@ Run AI models locally using LM Studio with Cline.
- Download and install for your operating system
<Frame>
<img src="/assets/robot_panel_dark.png" alt="LM Studio download page" />
<img src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(7).png" alt="LM Studio download page" />
</Frame>
#### 2. Launch LM Studio
@@ -29,7 +29,10 @@ Run AI models locally using LM Studio with Cline.
- You'll see four tabs on the left: **Chat**, **Developer** (where you will start the server), **My Models** (where your downloaded models are stored), **Discover** (add new models)
<Frame>
<img src="/assets/robot_panel_dark.png" alt="LM Studio interface overview" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(10).png"
alt="LM Studio interface overview"
/>
</Frame>
#### 3. Download a Model
@@ -39,7 +42,10 @@ Run AI models locally using LM Studio with Cline.
- Wait for download to complete
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Downloading a model in LM Studio" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/lm-studio-download-model.gif"
alt="Downloading a model in LM Studio"
/>
</Frame>
#### 4. Start the Server
@@ -49,7 +55,10 @@ Run AI models locally using LM Studio with Cline.
- Note: The server will run at `http://localhost:1234`
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Starting the LM Studio server" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/lm-studio-starting-server.gif"
alt="Starting the LM Studio server"
/>
</Frame>
#### 5. Configure Cline
@@ -60,7 +69,10 @@ Run AI models locally using LM Studio with Cline.
4. Select your model from the available options
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Configuring Cline with LM Studio" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/lm-studio-select-model-cline.gif"
alt="Configuring Cline with LM Studio"
/>
</Frame>
### ⚠️ Important Notes
+16 -4
View File
@@ -16,7 +16,10 @@ description: "A quick guide to setting up Ollama for local AI model execution wi
- Download and install for your operating system
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Ollama download page" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(2)%20(1)%20(1).png"
alt="Ollama download page"
/>
</Frame>
#### 2. Choose and Download a Model
@@ -29,7 +32,10 @@ description: "A quick guide to setting up Ollama for local AI model execution wi
```
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Selecting a model in Ollama" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/ollama-model-grab%20(2).gif"
alt="Selecting a model in Ollama"
/>
</Frame>
- Open your Terminal and run the command:
@@ -41,7 +47,10 @@ description: "A quick guide to setting up Ollama for local AI model execution wi
```
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Running Ollama in terminal" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/starting-ollama-terminal%20(2).gif"
alt="Running Ollama in terminal"
/>
</Frame>
**✨ Your model is now ready to use within Cline!**
@@ -56,7 +65,10 @@ description: "A quick guide to setting up Ollama for local AI model execution wi
- Select the model from your available options
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Configuring Cline with Ollama" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/selecting-ollama-model-cline%20(3).gif"
alt="Configuring Cline with Ollama"
/>
</Frame>
### ⚠️ Important Notes
@@ -20,7 +20,10 @@ Local models are created by training a smaller model to imitate a larger one, bu
Think of it like running your development environment on a calculator instead of a computer it might handle basic tasks, but complex operations become unreliable or impossible.
<Frame>
<img src="/assets/robot_panel_dark.png" alt="Local model comparison diagram" />
<img
src="https://storage.googleapis.com/cline_public_images/docs/assets/image%20(4).png"
alt="Local model comparison diagram"
/>
</Frame>
### What Actually Happens
+3 -1
View File
@@ -313,7 +313,9 @@
"prepare": "husky",
"changeset": "changeset",
"version-packages": "changeset version",
"docs:preview": "cd docs && mintlify dev",
"docs": "cd docs && mintlify dev",
"docs:check-links": "cd docs && mintlify broken-links",
"docs:rename-file": "cd docs && mintlify rename",
"report-issue": "node scripts/report-issue.js"
},
"devDependencies": {