### Install @coze-arch/pkg-root-webpack-plugin

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/utils/pkg-root-webpack-plugin/README.md

Add the package to your project's dependencies in package.json and run 'rush update' to install.

```json
{
  "dependencies": {
    "@coze-arch/pkg-root-webpack-plugin": "workspace:*"
  }
}
```

--------------------------------

### Run Development Server

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/README.md

Use this command to start the local development server for coze-design.

```bash
rushx dev
```

--------------------------------

### Example output of `clear-build-cache`

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Illustrates the typical output when the `clear-build-cache` script is executed, showing which directories and files are cleaned.

```sh
# Output example:
# Clean common/temp/build-cache
# Clean packages/utils/logger/tsconfig.tsbuildinfo
# Clean packages/utils/logger/.eslintcache
# Clean packages/components/coze-design/lib
```

--------------------------------

### Start npm MCP Server CLI

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Use this command to start the MCP server in HTTP/SSE mode for IDE integrations or stdio mode for direct terminal/LLM use. For HTTP mode, specify the port. The stdio mode communicates over stdin/stdout.

```sh
npx @coze-arch/npm-mcp-server@latest serve --port 3000
```

```sh
npx @coze-arch/npm-mcp-server@latest start
```

--------------------------------

### Install Rush Globally

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

Install the Microsoft Rush tool globally if it's not already present on your system. This is a prerequisite for monorepo development.

```sh
npm install -g @microsoft/rush
```

--------------------------------

### Run NPM MCP Server Locally

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

If developing locally, navigate to the 'mcp/npm' directory and use this command to start the HTTP server.

```sh
cd mcp/npm
npm run serve
```

--------------------------------

### Line Progress Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/progress/index.mdx

Demonstrates basic line progress with default settings, custom height, and custom stroke color.

```tsx
import { Progress } from '@coze-arch/coze-design';

<Progress type='line' size='default' />
<Progress type='line' size='default' style={{ height: 4 }} />
<Progress type='line' size='default' stroke='var(--coz-fg-hglt-green)' />
```

--------------------------------

### Start NPM MCP Server on a Custom Port

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/mcp/npm/README.md

Specify a custom port when starting the server using npx. The server will be accessible at http://localhost:<port>/sse.

```sh
npx @coze-arch/npm-mcp-server@latest serve --port 4000
```

--------------------------------

### Update and Install Monorepo Dependencies

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

After cloning, run this command to ensure all project dependencies within the monorepo are updated and installed correctly.

```sh
rush update
```

--------------------------------

### Basic Usage of PkgRootWebpackPlugin

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/utils/pkg-root-webpack-plugin/README.md

Import and use the PkgRootWebpackPlugin in your project. Specific usage examples are pending.

```typescript
import { /* exported functions/components */ } from '@coze-arch/pkg-root-webpack-plugin';

// Example usage
// TODO: Add specific usage examples
```

--------------------------------

### Badge Positioning Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/badge/index.mdx

Illustrates how to position the Badge component using the 'position' prop, including rightTop and rightBottom.

```tsx
import { Badge } from '@coze-arch/coze-design';

<Badge countStyle={{ right: 8, top: 6 }} position="rightTop">
  <Avatar color="green" type="person" size="lg">
    BD
  </Avatar>
</Badge>

<Badge countStyle={{ right: 8, top: 6 }} position="rightBottom">
  <Avatar color="green" type="person" size="lg">
    BD
  </Avatar>
</Badge>
```

--------------------------------

### Search npm Packages via MCP Client

Source: https://context7.com/coze-dev/rush-arch/llms.txt

This TypeScript example demonstrates how to use the MCP client to search for npm packages. It connects to an SSE transport, calls the 'searchNpmPackages' tool with various filters and pagination options, and then parses the results. Ensure the client is configured with necessary capabilities.

```typescript
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';

const transport = new SSEClientTransport(new URL('http://localhost:3000/sse'));
const client = new Client({ name: 'my-client', version: '1.0.0' }, {
  capabilities: { tools: {} },
});
await client.connect(transport);

const result = await client.callTool({
  name: 'searchNpmPackages',
  arguments: {
    keyword: 'state management',
    size: 5,
    from: 0,
    quality: 0.65,      // 0–1, default 0.65
    popularity: 0.98,   // 0–1, default 0.98
    maintenance: 0.5,   // 0–1, default 0.5
    registry: 'https://registry.npmjs.org', // or 'https://registry.npmmirror.com'
  },
});

const packages = JSON.parse(result.content[0].text);
// [
//   {
//     package: { 
//       name: 'redux', version: '5.0.1', description: '...', keywords: [...],
//       author: '...', publisher: { username: '...', email: '...' }, date: '...' 
//     },
//     score: { final: 0.92, detail: { popularity: 0.98, quality: 0.87, maintenance: 0.91 } },
//     searchScore: 100000.321
//   }, ...
// ]

await client.close();
```

--------------------------------

### Start NPM MCP Server in Terminal Mode with NPX

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

This command starts the NPM MCP Server in terminal mode using npx, suitable for direct execution.

```sh
npx @coze-arch/npm-mcp-server@latest start
```

--------------------------------

### Closable Banner Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/banner.mdx

Illustrates how to make a banner closable using the 'closeIcon' prop. The example also shows how to implement custom closing logic with a 'useState' hook and a custom close action.

```tsx
import { Banner } from '@coze-arch/coze-design';
import { useState } from 'react';

const Demo = () => {
  const [visible, setVisible] = useState(true);

  return visible ? (
    <Banner
      fullMode={true}
      description={
        <div>
          这是一条可关闭的提示信息
          <span
            className="coz-fg-hglt pl-2 cursor-pointer"
            onClick={() => setVisible(false)}
          >
            不再显示
          </span>
        </div>
      }
    />
  ) : null;
};

export default Demo;
```

--------------------------------

### Banner as Card Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/banner/index.mdx

Shows how to style the Banner component to resemble a card by setting `card=true` and `fullMode=false`. Includes a title, description, and a call-to-action button.

```tsx
import { Banner } from '@coze-arch/coze-design';

<div className="coz-stroke-primary rounded w-480px p-20px">
  <Banner
    card={true}
    fullMode={false}
    title="Title"
    type="info"
    bordered={false}
    description={
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <span className="text-brand-6 pl-2 cursor-pointer">
          Don't Show Again
        </span>
      </div>
    }
  >
    <div className="text-right px-12px my-12px">
      <Button color="hgltplus" size="default">
        No, thanks.
      </Button>
    </div>
  </Banner>
</div>
```

--------------------------------

### Serve NPM MCP Server with NPX

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

Use this command to directly run the NPM MCP Server without cloning the repository. It starts the server on port 3000 by default.

```sh
npx @coze-arch/npm-mcp-server@latest serve
```

--------------------------------

### Badge Component Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/badge/index.mdx

Demonstrates different types and usages of the Badge component, including default, alt, and mini types, with counts and custom styles.

```tsx
import { Badge } from '@coze-arch/coze-design';

<Badge>
    <Avatar color="green" type="person" size="lg" count="666">BD</Avatar>
</Badge>

<Badge  type="alt" count="beta">
     <AIButton color="aihglt">Bot竞技场</AIButton>
</Badge>

<Badge countStyle={{ right: 8, top: 6 }} type="mini">
    <Avatar color="green" type="person" size="lg" >BD</Avatar>
</Badge>
```

--------------------------------

### CozInputNumber Size Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/input-number/index.mdx

Demonstrates how to set the size of the CozInputNumber component using the 'size' prop. Supports 'default' and 'small' presets.

```tsx
import { CozInputNumber } from '@coze-arch/coze-design';

<CozInputNumber size='default' />
<CozInputNumber size='small' />
```

--------------------------------

### Circle Progress Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/progress/index.mdx

Shows circle progress with default settings and a custom stroke color. Note: 'type="width"' in the source appears to be a typo and should likely be 'type="circle"'.

```tsx
import { Progress } from '@coze-arch/coze-design';

<Progress type='width' size='default' />
<Progress type='circle' size='default' stroke='var(--coz-fg-hglt-green)' />
```

--------------------------------

### Custom Illustration Sizing

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/illustration.mdx

This example demonstrates how to apply arbitrary custom dimensions to an illustration using the width and height props, overriding default or predefined sizes.

```tsx
import { IconCozIllusDone } from '@coze-arch/coze-design/illustrations';

const Demo = () => (
  <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
    <IconCozIllusDone width="64" height="64" />
    <IconCozIllusDone width="120" height="120" />
    <IconCozIllusDone width="180" height="180" />
  </div>
);

export default Demo;
```

--------------------------------

### Progress Size Variants

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/progress.mdx

Demonstrates the three preset sizes (small, default, large) for the Progress component, including a custom height example for the default size.

```tsx
import { Progress } from '@coze-arch/coze-design';

const Demo = () => (
  <div className="space-y-4">
    <Progress size="small" percent={70} />
    <Progress size="default" percent={70} />
    <Progress size="large" percent={70} />
    <Progress size="default" percent={70} height={2} />
  </div>
);

export default Demo;
```

--------------------------------

### Build Project

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/README.md

Execute this command to build the coze-design project for production.

```bash
rushx build
```

--------------------------------

### Run npm MCP Server CLI

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Instructions on how to run the @coze-arch/npm-mcp-server using its CLI for both HTTP/SSE and stdio modes.

```APIDOC
## Run npm MCP Server CLI

### Description

This section details how to execute the `@coze-arch/npm-mcp-server` binary using `npx` to start the Model Context Protocol (MCP) server.

### Usage

**HTTP mode — connects on `http://localhost:3000/sse`**
```sh
npx @coze-arch/npm-mcp-server@latest serve --port 3000
```

**stdio mode — communicate over stdin/stdout**
```sh
npx @coze-arch/npm-mcp-server@latest start
```

### Cursor MCP Configuration

To configure Cursor to use the server, add the following to your `settings.json` under `Model Context Protocol → servers`:

```json
http://localhost:3000/sse
```
```

--------------------------------

### Button Disabled State Examples

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/button/index.mdx

Configure the disabled state of the Button component by setting the `disabled` prop to `true`. This example shows various button colors and sizes in a disabled state.

```tsx
import { Button } from '@coze-arch/coze-design';

<View>
  <Button color="hgltplus" disabled={true}>
    hgltplus
  </Button>
  <Button size="highlight" disabled={true}>
    highlight
  </Button>
  <Button size="primary" disabled={true}>
    primary
  </Button>
  <Button size="secondary" disabled={true}>
    secondary
  </Button>
  <Button size="red" disabled={true}>
    red
  </Button>
  <Button size="green" disabled={true}>
    green
  </Button>
  <Button size="yellow" disabled={true}>
    yellow
  </Button>
</View>
```

--------------------------------

### Basic Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/step.mdx

Demonstrates the most basic usage of the Steps component.

```APIDOC
## Basic Usage

Most basic usage of the steps bar.

```tsx
import { CozSteps } from '@coze-arch/coze-design';

const Demo = () => (
  <CozSteps current={1} type="basic">
    <CozSteps.Step title="已完成" description="这是一段描述文本" />
    <CozSteps.Step title="进行中" description="这是一段描述文本" />
    <CozSteps.Step title="待进行" description="这是一段描述文本" />
  </CozSteps>
);

export default Demo;
```
```

--------------------------------

### Small Size SegmentTab Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/segment-tab/index.mdx

Renders a SegmentTab with the 'small' size. Use this for more compact UIs.

```tsx
import { SegmentTab } from '@coze-arch/coze-design';

<SegmentTab defaultValue={'Tab1'} size="small"  options={['Tab1', 'Tab2', 'Tab3']} />
```

--------------------------------

### Component Introduction

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/segment-tab/index.mdx

Demonstrates how to import the SegmentTab component from the '@coze-arch/coze-design' package.

```APIDOC
## Component Introduction

Import the `SegmentTab` component from `@coze-arch/coze-design`:

```tsx
import { SegmentTab } from '@coze-arch/coze-design';
```
```

--------------------------------

### Run Tests

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/mcp/npm/README.md

Execute the project's test suite.

```sh
npm run test
```

--------------------------------

### Import Avatar Component

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/stories/Introduction.mdx

Import the Avatar component from the '@coze-arch/coze-design' package. Ensure this package is installed in your project.

```javascript
import { Avatar } from '@coze-arch/coze-design'
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/mcp/npm/README.md

Change directory into the NPM MCP server part of the monorepo.

```sh
cd rush-arch/mcp/npm
```

--------------------------------

### Default SegmentTab Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/segment-tab/index.mdx

Renders a SegmentTab with default size and options. Use this for standard tabbed interfaces.

```tsx
import { SegmentTab } from '@coze-arch/coze-design';

<SegmentTab defaultValue={'Tab1'}  options={['Tab1', 'Tab2', 'Tab3']} />
```

--------------------------------

### Rush Publish and Release CLI (Shell)

Source: https://context7.com/coze-dev/rush-arch/llms.txt

A three-subcommand CLI for managing the full release lifecycle: generating change files, bumping versions, creating release branches, and publishing to npm. Use '--dry-run' for testing changes before applying them. Ensure NPM_AUTH_TOKEN is set for CI publishes.

```shell
# 1. Generate change files from the current commit message
rush-publish change --commit-msg "feat: add new button component"

# 2. Bump version and create a release branch (dry-run)
rush-publish pub \
  --bump-type minor \
  --to @coze-arch/coze-design \
  --dry-run

# Publish only specific packages
rush-publish pub \
  --only @coze-arch/arco-icon @coze-arch/arco-illustration \
  --bump-type patch \
  --repo-url git@github.com:coze-dev/rush-arch.git

# Publish alpha/beta directly without creating a branch
rush-publish pub \
  --bump-type alpha \
  --from @coze-arch/coze-design \
  --release

# 3. Trigger actual npm publish from a release commit/tag (CI use)
NPM_AUTH_TOKEN=xxx rush-publish release \
  --registry https://registry.npmjs.org \
  --allow-branches main release
```

--------------------------------

### Basic Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/pagination/index.mdx

Demonstrates the most basic usage of the CozPagination component.

```APIDOC
## Basic Usage

Most basic pagination usage.

```tsx
import { CozPagination } from '@coze-arch/coze-design';

<CozPagination
  total={100}
  currentPage={1}
  pageSize={10}
  onChange={(page, pageSize) => console.log(page, pageSize)}
/>;
```
```

--------------------------------

### Search and Change Callbacks

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/search.mdx

Demonstrates how to handle search events with `onSearch` and input changes with `onChange`.

```tsx
import { Search } from '@coze-arch/coze-design';

const Demo = () => (
  <Search
    placeholder="输入完成后触发搜索"
    onSearch={value => console.log('搜索值:', value)}
    onChange={(value, e) => console.log('输入值:', value)}
  />
);

export default Demo;
```

--------------------------------

### CozInputNumber Error State Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/input-number/index.mdx

Shows how to set the CozInputNumber component to an error state using the 'error' prop.

```tsx
import { CozInputNumber } from '@coze-arch/coze-design';

<CozInputNumber error={true} />;
```

--------------------------------

### Select Component Sizes

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/select.mdx

Illustrates how to use different sizes for the Select component. It supports 'default' and 'small' sizes.

```tsx
import { Select } from '@coze-arch/coze-design';

const Demo = () => (
  <div style={{ display: 'flex', gap: '16px' }}>
    <div>
      <h4>默认尺寸</h4>
      <Select
        placeholder="请选择"
        style={{ width: '200px' }}
        size="default"
        optionList={[
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' },
        ]}
      />
    </div>
    <div>
      <h4>小尺寸</h4>
      <Select
        placeholder="请选择"
        style={{ width: '200px' }}
        size="small"
        optionList={[
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' },
        ]}
      />
    </div>
  </div>
);

export default Demo;
```

--------------------------------

### CozInputNumber Disabled State Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/input-number/index.mdx

Illustrates how to disable the CozInputNumber component using the 'disabled' prop and setting an initial value.

```tsx
import { CozInputNumber } from '@coze-arch/coze-design';

<CozInputNumber disabled={true} value={10} />;
```

--------------------------------

### Import Input Component

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/input.mdx

How to import the Input component into your project.

```tsx
import { Input } from '@coze-arch/coze-design';
```

--------------------------------

### SVG Node Preview

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/icon/index.mdx

Example of an SVG node generated by the icon component. It defaults to 'currentColor' for fill and '1em' for height and width.

```html
<svg class="icon-icon icon-icon-coz_people_fill text-lg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M15 ....></path></svg>
```

--------------------------------

### Build All Projects in Monorepo

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

Execute this command to build all projects defined within the Rush monorepo.

```sh
rush build
```

--------------------------------

### InputCode Custom Length

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/input-code.mdx

Demonstrates how to customize the number of input fields using the `length` prop. Examples for 4 and 6 digits are shown.

```tsx
import { InputCode } from '@coze-arch/coze-design';

const Demo = () => {
  return (
    <div className="flex flex-col gap-4">
      <InputCode length={4} placeholder="4位验证码" />
      <InputCode length={6} placeholder="6位验证码" />
    </div>
  );
};

export default Demo;
```

--------------------------------

### Popconfirm with Custom Content Structure

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/popconfirm.mdx

Demonstrates how to build richer content structures within the Popconfirm using SubTitle, Description, and Content components.

```tsx
import { Popconfirm, Button } from '@coze-arch/coze-design';

const Demo = () => (
  <Popconfirm
    title="确定要删除此文件？"
    content={
      <>
        <Popconfirm.SubTitle>重要提示</Popconfirm.SubTitle>
        <Popconfirm.Description>此操作将永久删除该文件</Popconfirm.Description>
        <Popconfirm.SubTitle>影响范围</Popconfirm.SubTitle>
        <Popconfirm.Description>删除后将无法恢复</Popconfirm.Description>
      </>
    }
  >
    <Button>自定义内容</Button>
  </Popconfirm>
);

export default Demo;
```

--------------------------------

### Illustration Sizing

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/illustration.mdx

Illustrations can have their dimensions customized using the width and height props. This example shows different sizes applied to various illustrations.

```tsx
import {
  IconCozIllusDone,
  IconCozIllusAdd,
  IconCozIllus404,
} from '@coze-arch/coze-design/illustrations';

const Demo = () => (
  <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
    <IconCozIllusDone width="120" height="120" />
    <IconCozIllusAdd width="96" height="96" />
    <IconCozIllus404 width="64" height="64" />
  </div>
);

export default Demo;
```

--------------------------------

### Basic Step Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/step/index.mdx

Demonstrates the fundamental usage of the Steps component with different sizes and current step indication. Ensure the Steps component is imported.

```tsx
import { Steps } from '@@coze-arch/coze-design';

<Steps type="basic" size="small">
  <Steps.Step title="Step 1" />
  <Steps.Step title="Step 2" description="This is a description" />
  <Steps.Step title="Step 3" />
</Steps>
```

--------------------------------

### Customizable Close Banner

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/banner/index.mdx

Example of a Banner with a custom description that includes a clickable 'Don't Show Again' link, utilizing `fullMode={true}`.

```tsx
import { Banner } from '@coze-arch/coze-design';

<Banner
  fullMode={true}
  description=(
    <div>
      Do not share your API key with others, or expose it in the
      browser or other client-side.
      <span className="coz-fg-hglt pl-2 cursor-pointer">
        Don't Show Again
      </span>
    </div>
  )
/>
```

--------------------------------

### Size Configuration

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/pagination/index.mdx

Shows how to configure the size of the pagination component, supporting 'small' and 'default' sizes.

```APIDOC
## Size Configuration

The pagination component supports `small` and `default` sizes.

```tsx
import { CozPagination } from '@coze-arch/coze-design';

<View>
  <CozPagination size="default" total={100} />
  <CozPagination size="small" total={100} />
</View>
```
```

--------------------------------

### Displaying Theme Colors in a Table

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/colors/middleground.mdx

Renders a table of theme-related middleground colors using the semi-ui Table component. Ensure '@douyinfe/semi-ui' and '@coze-arch/coze-design/colors' are installed.

```javascript
import { Table } from '@douyinfe/semi-ui';

import {
  mgColumns,
  mgThemes,
} from '@coze-arch/coze-design/colors';

<Table
  sticky={{ top: 70 }}
  size="default"
  columns={mgColumns}
  dataSource={mgThemes}
  pagination={false}
/>
```

--------------------------------

### Load Rush monorepo configuration

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Lazily loads and caches the Rush configuration from the nearest `rush.json` file. Can optionally start searching from a specified directory.

```typescript
import { getRushConfiguration } from '@coze-arch/monorepo-kits';

const config = getRushConfiguration(); // auto-detects rush.json from cwd
console.log(config.rushJsonFolder);    // '/path/to/repo'
console.log(config.projects.length);  // number of projects in rush.json

// With explicit starting folder
const config2 = getRushConfiguration('/path/to/sub/folder');
```

--------------------------------

### Import Search Component

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/search.mdx

How to import the Search component into your project.

```tsx
import { Search } from '@coze-arch/coze-design';
```

--------------------------------

### Badge Number Overflow

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/badge.mdx

When the `count` exceeds the `overflowCount` (defaulting to 99), the badge will display as `${overflowCount}+`. This example shows a count of 1000 with an `overflowCount` of 999.

```tsx
import { CozAvatar, Badge } from '@coze-arch/coze-design';

const Demo = () => (
  <div className="flex flex-row gap-4 p-4">
    <Badge count={99}>
      <CozAvatar color="orange" type="bot" size="lg">
        BD
      </CozAvatar>
    </Badge>
    <Badge count={100}>
      <CozAvatar color="orange" type="bot" size="lg">
        BD
      </CozAvatar>
    </Badge>
    <Badge count={1000} overflowCount={999}>
      <CozAvatar color="orange" type="bot" size="lg">
        BD
      </CozAvatar>
    </Badge>
  </div>
);

export default Demo;
```

--------------------------------

### searchNpmPackages Tool

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Utilize the `searchNpmPackages` tool to query the npm registry with various filtering and pagination options.

```APIDOC
## `searchNpmPackages` — MCP tool (`packages/mcp/npm/src/mcp/search.ts`)

### Description

Searches the npm registry (or a custom mirror) using the npm v1 search API. This tool accepts quality, popularity, and maintenance score thresholds as filters and supports pagination via `size` and `from` parameters. It returns an array of package objects, each containing details like name, version, description, author, keywords, and score breakdown.

### Usage

```ts
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';

const transport = new SSEClientTransport(new URL('http://localhost:3000/sse'));
const client = new Client({ name: 'my-client', version: '1.0.0' }, {
  capabilities: { tools: {} },
});
await client.connect(transport);

const result = await client.callTool({
  name: 'searchNpmPackages',
  arguments: {
    keyword: 'state management',
    size: 5,
    from: 0,
    quality: 0.65,      // 0–1, default 0.65
    popularity: 0.98,   // 0–1, default 0.98
    maintenance: 0.5,   // 0–1, default 0.5
    registry: 'https://registry.npmjs.org', // or 'https://registry.npmmirror.com'
  },
});

const packages = JSON.parse(result.content[0].text);
// Example response structure:
// [
//   {
//     package: { name: 'redux', version: '5.0.1', description: '...', ... },
//     score: { final: 0.92, detail: { popularity: 0.98, quality: 0.87, maintenance: 0.91 } },
//     searchScore: 100000.321
//   }, ...
// ]

await client.close();
```
```

--------------------------------

### Basic Step Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/step.mdx

Demonstrates the most basic usage of the CozSteps component with three steps, showing completed, in-progress, and pending states.

```tsx
import { CozSteps } from '@coze-arch/coze-design';

const Demo = () => (
  <CozSteps current={1} type="basic">
    <CozSteps.Step title="已完成" description="这是一段描述文本" />
    <CozSteps.Step title="进行中" description="这是一段描述文本" />
    <CozSteps.Step title="待进行" description="这是一段描述文本" />
  </CozSteps>
);

export default Demo;
```

--------------------------------

### Avatar Event Handling

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/avatar.mdx

Illustrates how to attach event handlers like `onClick`, `onMouseEnter`, and `onMouseLeave` to the CozAvatar component, including examples with and without the `hoverMask`.

```tsx
import { CozAvatar } from '@coze-arch/coze-design';

const Demo = () => {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <CozAvatar
        onClick={() => console.log('Avatar clicked')}
        onMouseEnter={() => console.log('Mouse entered')}
        onMouseLeave={() => console.log('Mouse left')}
        hoverMask
      >
        E
      </CozAvatar>
      <CozAvatar
        src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
        onClick={() => console.log('Image avatar clicked')}
        hoverMask
      />
    </div>
  );
};

export default Demo;
```

--------------------------------

### Render COZLoading with Different Sizes

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/loading/index.mdx

Demonstrates how to use the Loading component with predefined size variants: mini, small, middle, and large.

```tsx
import { Loading } from '@coze-arch/coze-design';

<Loading size='mini' loading={true} />
<Loading size='small' loading={true} />
<Loading size='middle' loading={true} />
<Loading size='large' loading={true} />
```

--------------------------------

### Run NPM MCP Server Locally in Terminal Mode

Source: https://github.com/coze-dev/rush-arch/blob/main/README.md

For local development, this command starts the NPM MCP Server in terminal mode from the 'mcp/npm' directory.

```sh
cd mcp/npm
npm run start
```

--------------------------------

### Build the Project

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/mcp/npm/README.md

Compile the TypeScript code into JavaScript.

```sh
npm run build
```

--------------------------------

### Render COZLoading with Custom Labels and Label Sizes

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/loading/index.mdx

Illustrates how to customize the loading tip text and its size using the 'label' and 'labelSize' props.

```tsx
import { Loading } from '@coze-arch/coze-design';

<Loading label='正在加载中' labelSize='small' loading={true} />
<Loading label='正在加载中' labelSize='normal' loading={true} />
<Loading label='正在加载中' labelSize='middle' loading={true} />
<Loading label='正在加载中' labelSize='large' loading={true} />
```

--------------------------------

### Basic Modal and Dialog Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/modal.mdx

Demonstrates the basic usage of both 'modal' and 'dialog' types. Use this to display important information or prompt user actions.

```tsx
import { Modal, Button } from '@coze-arch/coze-design';
import { useState } from 'react';

const Demo = () => {
  const [visible, setVisible] = useState({ modal: false, dialog: false });

  return (
    <>
      <Button onClick={() => setVisible({ ...visible, modal: true }) }>
        打开 Modal
      </Button>
      <Button
        className="ml-2"
        onClick={() => setVisible({ ...visible, dialog: true }) }>
        打开 Dialog
      </Button>

      <Modal
        type="modal"
        title="删除此机器人？"
        visible={visible.modal}
        onOk={() => setVisible({ ...visible, modal: false }) }
        onCancel={() => setVisible({ ...visible, modal: false }) }
        cancelText="取消"
        okText="删除">
        此操作无法撤销
      </Modal>

      <Modal
        type="dialog"
        title="删除此机器人？"
        visible={visible.dialog}
        onOk={() => setVisible({ ...visible, dialog: false }) }
        onCancel={() => setVisible({ ...visible, dialog: false }) }
        cancelText="取消"
        okText="删除">
        此操作无法撤销
      </Modal>
    </>
  );
};

export default Demo;
```

--------------------------------

### Banner Types Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/banner/index.mdx

Demonstrates the four preset types for the Banner component: info, success, warning, and danger. Each type corresponds to a different color scheme.

```tsx
import { Banner } from '@coze-arch/coze-design';

<Banner type='info' description='this is coz banner' />
<Banner type='success' description='this is coz banner' />
<Banner type='warning' description='this is coz banner' />
<Banner type='danger' description='this is coz banner' />
```

--------------------------------

### Basic Layout Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/layout.mdx

Demonstrates the most basic usage of the Layout component with Header, Content, and Footer.

```tsx
import { Layout } from '@coze-arch/coze-design';

const Demo = () => {
  return (
    <Layout>
      <Layout.Header title="页面标题" />
      <Layout.Content>
        <div style={{ padding: 20 }}>内容区域</div>
      </Layout.Content>
      <Layout.Footer>
        <div style={{ textAlign: 'center' }}>页脚内容</div>
      </Layout.Footer>
    </Layout>
  );
};

export default Demo;
```

--------------------------------

### Typography Component Types Example

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/typography/index.mdx

Demonstrates the usage of different typography types: Title, Text, Paragraph, and Numeral. The Numeral component supports precision for displaying numbers.

```tsx
import { Typography } from '@coze-arch/coze-design';

const { Title, Text, Paragraph, Numeral } = Typography;

<Title>标题Title</Title>

<Text>文字Text</Text>

<Paragraph>段落Paragraph</Paragraph>

<Numeral precision={2}>
  数字Numeral：1.6111e1 K
</Numeral>
```

--------------------------------

### Radio Group with Horizontal and Vertical Layout

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/radio.mdx

Utilize Radio.Group to manage a set of mutually exclusive radio buttons. This example shows how to configure horizontal and vertical layouts, and a disabled group.

```tsx
import { Radio } from '@coze-arch/coze-design';

const Demo = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
    <div>
      <h4>水平排列</h4>
      <Radio.Group direction="horizontal" defaultValue={1}>
        <Radio value={1}>选项A</Radio>
        <Radio value={2}>选项B</Radio>
        <Radio value={3}>选项C</Radio>
      </Radio.Group>
    </div>

    <div>
      <h4>垂直排列</h4>
      <Radio.Group direction="vertical" defaultValue={1}>
        <Radio value={1}>选项A</Radio>
        <Radio value={2}>选项B</Radio>
        <Radio value={3}>选项C</Radio>
      </Radio.Group>
    </div>

    <div>
      <h4>禁用状态</h4>
      <Radio.Group disabled direction="horizontal" defaultValue={1}>
        <Radio value={1}>选项A</Radio>
        <Radio value={2}>选项B</Radio>
        <Radio value={3}>选项C</Radio>
      </Radio.Group>
    </div>
  </div>
);

export default Demo;
```

--------------------------------

### Basic Loading Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/loading.mdx

Demonstrates the most basic usage of the Loading component. Set `loading=true` to display the loading state.

```tsx
import { Loading } from '@coze-arch/coze-design';

const Demo = () => {
  return (
    <div className="flex flex-col space-y-4 p-20px gap-6">
      <Loading loading />
    </div>
  );
};

export default Demo;
```

--------------------------------

### TabBar with 'text' type and left alignment

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/tab-bar/index.mdx

Illustrates the 'text' type for TabBar, which uses text-based styling similar to semi-design's 'line' property. This example also sets the alignment to 'left'.

```tsx
import { TabBar } from '@coze-arch/coze-design';
const { TabPanel } = TabBar;

<TabBar align="left" type='text'>
  <TabPanel tab="我的" itemKey="1">
    我的
  </TabPanel>
  <TabPanel tab="插件" itemKey="2">
    插件
  </TabPanel>
  <TabPanel tab="工作流" itemKey="3">
    工作流
  </TabPanel>
  <TabPanel tab="图像流" itemKey="4">
    图像流
  </TabPanel>
  <TabPanel tab="知识库" itemKey="5">
    知识库
  </TabPanel>
  <TabPanel tab="卡片" itemKey="6">
    卡片
  </TabPanel>
</TabBar>
```

--------------------------------

### Loading Sizes

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/loading/index.mdx

The Loading component supports four preset sizes: `mini`, `small`, `middle`, and `large`. Each size is suitable for different contexts.

```APIDOC
## Sizes

- **mini**: `size: 14px`, typically used inside components like buttons and inputs.
- **small**: `size: 20px`, default size for general loading indications.
- **middle**: `size: 24px`, for scenarios requiring a more prominent loading indicator.
- **large**: `size: 32px`, used for masks or floating content overlays.

### Example

```tsx
import { Loading } from '@coze-arch/coze-design';

<Loading size='mini' loading={true} />
<Loading size='small' loading={true} />
<Loading size='middle' loading={true} />
<Loading size='large' loading={true} />
```
```

--------------------------------

### Button onClick Event Handling

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/button/index.mdx

Handle standard click events using the `onClick` prop, which corresponds to standard HTML events. This example demonstrates toggling a state based on button clicks.

```tsx
import { Button } from '@coze-arch/coze-design';
import { useState } from 'react';

const [isOpen, setIsOpen] = useState(false);
const handlePress = () => {
  setIsOpen(prev => !prev);
};

return (
  <View prop="variant" value="state" justify="start">
    <Button aria-label="Open" aria-pressed={isOpen} onClick={handlePress}>
      click change
    </Button>
    <div className="coz-fg-plus mt-1">state: {isOpen ? 'close' : 'open'}</div>
  </View>
);
```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/pagination.mdx

Demonstrates the most basic implementation of the Pagination component. Ensure to provide the total number of items, current page, and page size. The onChange callback is triggered when the page or page size changes.

```tsx
import { CozPagination } from '@coze-arch/coze-design';

const Demo = () => (
  <CozPagination
    total={100}
    currentPage={1}
    pageSize={10}
    onChange={(page, pageSize) => console.log(page, pageSize)}
  />
);

export default Demo;
```

--------------------------------

### Select Component with Chip Rendering Modes

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/select.mdx

Demonstrates the Select component's chip rendering modes: 'selectedItem' for displaying selected options as chips and 'trigger' for displaying chips in the input area. Includes single and multi-select examples.

```tsx
import { Select } from '@coze-arch/coze-design';

const Demo = () => {
  const options = [
    'brand',
    'primary',
    'green',
    'yellow',
    'red',
    'cyan',
    'blue',
    'purple',
    'magenta',
  ].map(color => ({
    label: color,
    value: color,
    chipColor: color,
  }));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div>
        <h4>单选 - selectedItem 模式</h4>
        <Select
          chipRender="selectedItem"
          dropdownStyle={{ width: 200 }}
          optionList={options}
          defaultValue="brand"
        />
      </div>
      <div>
        <h4>多选 - selectedItem 模式</h4>
        <Select
          multiple
          chipRender="selectedItem"
          dropdownStyle={{ width: 200 }}
          optionList={options}
          defaultValue={['primary', 'green']}
        />
      </div>
      <div>
        <h4>trigger 模式</h4>
        <Select
          chipRender="trigger"
          optionList={options}
          dropdownStyle={{ minWidth: 200 }}
          defaultValue="brand"
        />
      </div>
    </div>
  );
};

export default Demo;
```

--------------------------------

### createServer() - MCP Server Factory

Source: https://context7.com/coze-dev/rush-arch/llms.txt

Programmatically create and connect an MCP server instance using the `createServer` factory function.

```APIDOC
## `createServer()` — MCP server factory (`packages/mcp/npm/src/mcp/server.ts`)

### Description

Constructs and returns a configured `McpServer` instance (from `@modelcontextprotocol/sdk`) with all npm tools registered. This function is used internally by both transport modes (HTTP/SSE and stdio).

### Usage

```ts
import { createServer } from './mcp/server';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = createServer();
const transport = new StdioServerTransport();
await server.connect(transport);
// Server is now ready to handle MCP tool calls over stdio
```
```

--------------------------------

### Quick Jumper

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/coze-design/src/components/pagination/index.mdx

Explains how to enable quick jumping to a specific page using the `showQuickJumper` prop, which can be combined with other features.

```APIDOC
## Quick Jumper

Use `showQuickJumper` to quickly jump to a specific page. It can be combined with other features.

```tsx
import { CozPagination } from '@coze-arch/coze-design';

// Basic quick jumper
<CozPagination
  total={100}
  showQuickJumper
/>

// Quick jumper combined with total count display
<CozPagination
  total={100}
  showQuickJumper
  showTotal
/>
```
```

--------------------------------

### Basic Input Usage

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/components/docs/docs/resource/components/input.mdx

Demonstrates the most basic usage of the Input component with a placeholder.

```tsx
import { Input } from '@coze-arch/coze-design';

const Demo = () => {
  return <Input placeholder="请输入内容" />;
};

export default Demo;
```

--------------------------------

### Configure NPM MCP Server in Cursor IDE

Source: https://github.com/coze-dev/rush-arch/blob/main/packages/mcp/npm/README.md

Add this URL to your Cursor IDE settings under 'Model Context Protocol' to enable communication with the NPM MCP server.

```json
{
  "mcpServers": {
    "npm-mcp": {
      "type": "http",
      "url": "http://localhost:3000/sse"
    }
  }
}
```