mirror of
https://github.com/cline/cline.git
synced 2026-09-21 21:50:05 +08:00
Saoud RizwanandSaoud Rizwan
d03e88e50b
* Render desktop diff view hunks with shared @pierre/diffs renderer Replace DiffView's hand-rolled DiffHunk +/- line rows with ToolFileDiff from @cline/ui (backed by @pierre/diffs), matching the chat tool rows. Hunks carrying complete new contents (created files) render with real line numbers; fragment hunks hide them, mirroring ToolCallRow. All of DiffView's chrome (collapse, copy, open-in-editor, counts) is unchanged. Co-authored-by: Saoud Rizwan <saoudrizwan@users.noreply.github.com> * Make ToolFileDiff syntax palette follow the app theme, not browser preference @pierre/diffs declares 'color-scheme: light dark' on its shadow :host, so its light-dark() token colors resolve from the browser's preferred scheme. Apps themed by the .dark class (desktop app) got the light palette's near-black text on dark surfaces. Inline colorScheme: inherit on the host wins over the :host rule and follows the app's color-scheme, which the @cline/ui theme already flips with .dark. Skipped when a caller pins an explicit themeType. Also key diff-view hunks by index so repeated same-shaped hunks (a file created twice with identical contents) don't collide. Co-authored-by: Saoud Rizwan <saoudrizwan@users.noreply.github.com> --------- Co-authored-by: Saoud Rizwan <saoudrizwan@users.noreply.github.com>
Cline SDK Examples
Learn how to build with the Cline SDK through working examples, ordered from simple to complex.
SDK Skill
If you use a coding agent (Claude Code, Codex, Cline, etc.), install the Cline SDK skill to give your agent context on the SDK's APIs and best practices to help you build with the Cline SDK.
npx skills add cline/sdk-skill
Prompt it to scaffold agents, create custom tools, wire up plugins, configure providers, and more.
Getting started
All examples live in this directory. Each is a standalone project with its own package.json and README. To run any example:
cd apps/examples/<example-name>
bun install
bun run build:sdk
export CLINE_API_KEY="cline_..."
bun dev
Requires Node.js 22+.
Examples
Beginner
| Example | Description | Concepts |
|---|---|---|
| quickstart | Send one prompt, stream the response. ~15 lines of code. | Agent, subscribe, run() |
| cli-agent | Interactive terminal chat with a shell tool. | createTool, multi-turn run()/continue(), streaming |
| cline-core-cli-agent | Interactive terminal chat powered by ClineCore. | ClineCore.create(), cline.start(), cline.send(), built-in tools, streaming |
Intermediate
| Example | Description | Concepts |
|---|---|---|
| code-review-bot | AI code reviewer that reads git diffs and produces structured comments. | Multiple tools, completesRun lifecycle, systemPrompt, zod schemas |
| multi-agent | Web app that fans out to three specialist agents in parallel, streams results via SSE, then synthesizes a unified answer. | Concurrent agents, Promise.all, per-agent subscribe(), SSE streaming, agent composition |
Advanced
| Example | Description | Concepts |
|---|---|---|
| desktop-app | Full Tauri + Next.js desktop app for running and inspecting chat sessions. | Sidecar runtime, websocket transport, session persistence |
| menubar | macOS menu bar app with Tauri. | Native app integration, compact UI |
| vscode | VS Code extension with chat panel. | Extension API, webview, workspace context |
SDK packages
When building your own app, install the public SDK package:
npm add @cline/sdk
@cline/sdk re-exports everything from @cline/core. You only need @cline/agents or @cline/llms if you want lower-level control over the agent runtime or model gateway directly.
Learn more
- SDK package docs
- Architecture guide
- Plugin examples - extend the Cline SDK and CLI with custom tools and event hooks
- Hook examples - lifecycle hooks for logging, blocking, and injection for Cline SDK and CLI