Skip to content

Commit 276b944

Browse files
refactor: 为 builtin-tools、mcp-client、agent-tools 添加 @claude-code-best 作用域前缀
所有包名及 import 路径统一添加 @claude-code-best/ 前缀: - builtin-tools → @claude-code-best/builtin-tools - mcp-client → @claude-code-best/mcp-client - agent-tools → @claude-code-best/agent-tools Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 75c9a8b commit 276b944

214 files changed

Lines changed: 4166 additions & 674 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

bun.lock

Lines changed: 22 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,9 @@
7575
"@anthropic-ai/sdk": "^0.80.0",
7676
"@anthropic-ai/vertex-sdk": "^0.14.4",
7777
"@anthropic/ink": "workspace:*",
78-
"agent-tools": "workspace:*",
79-
"mcp-client": "workspace:*",
78+
"@claude-code-best/builtin-tools": "workspace:*",
79+
"@claude-code-best/agent-tools": "workspace:*",
80+
"@claude-code-best/mcp-client": "workspace:*",
8081
"@aws-sdk/client-bedrock": "^3.1020.0",
8182
"@aws-sdk/client-bedrock-runtime": "^3.1020.0",
8283
"@aws-sdk/client-sts": "^3.1020.0",
Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
# Chapter 1: Getting Started
2+
3+
## Installation
4+
5+
`@anthropic/ink` is a workspace package. It is consumed internally and not published to npm.
6+
7+
```json
8+
{
9+
"dependencies": {
10+
"@anthropic/ink": "workspace:*"
11+
}
12+
}
13+
```
14+
15+
### Peer Dependencies
16+
17+
- `react` ^19.2.4
18+
- `react-reconciler` ^0.33.0
19+
20+
### Key Dependencies
21+
22+
| Package | Purpose |
23+
|---------|---------|
24+
| `chalk` | ANSI color generation |
25+
| `cli-boxes` | Border style definitions |
26+
| `get-east-asian-width` | CJK character width measurement |
27+
| `wrap-ansi` | ANSI-aware word wrapping |
28+
| `bidi-js` | Bidirectional text support |
29+
| `lodash-es` | Utility functions (throttle, noop) |
30+
| `signal-exit` | Process exit handler cleanup |
31+
| `emoji-regex` | Emoji width handling |
32+
33+
## Basic Rendering
34+
35+
### `render(node, options?)`
36+
37+
The primary entry point. Renders a React element tree to the terminal.
38+
39+
```tsx
40+
import { render } from '@anthropic/ink'
41+
import { Box, Text } from '@anthropic/ink'
42+
43+
const { unmount, rerender, waitUntilExit } = await render(
44+
<Box>
45+
<Text>Hello, World!</Text>
46+
</Box>
47+
)
48+
```
49+
50+
**Parameters:**
51+
- `node` -- `ReactNode` to render
52+
- `options` -- `RenderOptions | NodeJS.WriteStream` (optional)
53+
54+
**Returns:** `Promise<Instance>` with:
55+
- `rerender(node)` -- Replace the root node
56+
- `unmount()` -- Unmount and clean up
57+
- `waitUntilExit()` -- `Promise<void>` that resolves on unmount
58+
- `cleanup()` -- Remove from instance registry
59+
60+
### `renderSync(node, options?)`
61+
62+
Synchronous version of render. Same API, returns `Instance` directly (no Promise).
63+
64+
```tsx
65+
import { renderSync } from '@anthropic/ink'
66+
67+
const instance = renderSync(<App />)
68+
// instance.rerender, instance.unmount, etc.
69+
```
70+
71+
### `createRoot(options?)`
72+
73+
Creates a managed Ink root without immediately rendering. Similar to `react-dom`'s `createRoot`.
74+
75+
```tsx
76+
import { createRoot } from '@anthropic/ink'
77+
78+
const root = await createRoot({ exitOnCtrlC: false })
79+
80+
// Later, render into it
81+
root.render(<App />)
82+
83+
// You can re-render into the same root
84+
root.render(<DifferentApp />)
85+
86+
// Clean up
87+
root.unmount()
88+
```
89+
90+
**Returns:** `Promise<Root>` with:
91+
- `render(node)` -- Mount or update the tree
92+
- `unmount()` -- Unmount
93+
- `waitUntilExit()` -- `Promise<void>`
94+
95+
## RenderOptions
96+
97+
```ts
98+
type RenderOptions = {
99+
/** Output stream. Default: process.stdout */
100+
stdout?: NodeJS.WriteStream
101+
102+
/** Input stream. Default: process.stdin */
103+
stdin?: NodeJS.ReadStream
104+
105+
/** Error stream. Default: process.stderr */
106+
stderr?: NodeJS.WriteStream
107+
108+
/** Handle Ctrl+C to exit. Default: true */
109+
exitOnCtrlC?: boolean
110+
111+
/** Patch console methods to prevent Ink output mixing. Default: true */
112+
patchConsole?: boolean
113+
114+
/** Called after each frame render with timing info. */
115+
onFrame?: (event: FrameEvent) => void
116+
}
117+
```
118+
119+
## Basic Concepts
120+
121+
### Component Tree
122+
123+
Ink renders React components to a terminal using a custom reconciler. The tree structure maps to terminal output:
124+
125+
```tsx
126+
<Box flexDirection="column">
127+
<Text bold color="green">Header</Text>
128+
<Box flexDirection="row" gap={1}>
129+
<Text>Left</Text>
130+
<Text>Right</Text>
131+
</Box>
132+
</Box>
133+
```
134+
135+
This produces terminal output with Flexbox layout (via Yoga).
136+
137+
### Rendering Pipeline
138+
139+
1. **React Reconciler** -- Standard React reconciliation; diffs virtual tree
140+
2. **Yoga Layout** -- Computes Flexbox positions/ sizes for every node
141+
3. **Render to Output** -- Walks the DOM tree, emits styled text into an `Output` buffer
142+
4. **Screen Diff** -- Compares new frame against previous frame in a screen buffer
143+
5. **Terminal Write** -- Emits minimal ANSI escape sequences to update only changed cells
144+
145+
### Module System
146+
147+
Import everything from the package root:
148+
149+
```tsx
150+
// Core rendering
151+
import { render, createRoot, renderSync } from '@anthropic/ink'
152+
153+
// Components (base, no theme)
154+
import { BaseBox, BaseText, ScrollBox, Button, Link, Newline, Spacer } from '@anthropic/ink'
155+
156+
// Theme-aware components (recommended)
157+
import { Box, Text } from '@anthropic/ink'
158+
159+
// Hooks
160+
import { useApp, useInput, useTerminalSize, useInterval } from '@anthropic/ink'
161+
162+
// Theme
163+
import { ThemeProvider, useTheme, color } from '@anthropic/ink'
164+
165+
// Keybindings
166+
import { useKeybinding, KeybindingProvider } from '@anthropic/ink'
167+
```
168+
169+
### Naming Convention: Base vs Theme-aware
170+
171+
The package exports both raw and theme-aware versions of core components:
172+
173+
- **`BaseBox`** / **`BaseText`** -- Raw components that only accept raw color values (`rgb(...)`, `#hex`, `ansi:...`, `ansi256(...)`)
174+
- **`Box`** / **`Text`** -- Theme-aware wrappers that accept both theme keys (`'claude'`, `'success'`, `'error'`) and raw color values
175+
176+
Always prefer the theme-aware versions unless you have a specific reason to use raw components.

0 commit comments

Comments
 (0)