# @agentar/agentic-design-mobile

面向 Agent 场景的 H5 移动端组件库，基于 React 与 antd-mobile，提供对话、输入、语音、思考链等能力。

---

## ✨ 核心特性

- **🎯 对话与消息**：气泡消息（Bubble）、欢迎页（Welcome）、快捷建议（Suggestion）、提示词（Prompts），支持 Markdown 与加载态
- **⌨️ 增强输入**：单行/多行输入（Input、TextArea），支持语音切换、附件、功能入口与搜索发送
- **🤖 Agent 表达**：思考中（Think）、思考链（ThoughtChain）、加载动画（Loading），贴合 Agent 对话场景
- **🎨 主题与样式**：基于 antd-style 的 CSS-in-JS，内置 px2rem 移动端适配，支持自定义 token
- **🌓 一键主题切换**：亮/暗主题一键切换，支持持久化与自定义主题扩展
- **📱 移动端优先**：px2rem 适配多端，触屏友好；与 antd-mobile 深度结合
- **🔧 TypeScript**：完整类型定义，组件 Props 与主题类型可追溯
- **🎤 语音能力**：语音输入（AudioInput）、语音转文字（SpeechToText）、录音波形与光圈动效（SoundWave）
- **🧩 可组合**：操作栏（Actions）、长按弹窗（PopupAction）、回到顶部（BackTo）等可独立或组合使用

---

## 📦 安装

```bash
npm install @agentar/agentic-design-mobile antd-mobile react react-dom
```

**依赖**：`react`、`react-dom`、`antd-mobile@^5`。

---

## 🚀 使用

使用 `ThemeProvider` 包裹应用后即可自定义主题：

```tsx
import { ThemeProvider, Bubble, TextArea, Welcome } from '@agentar/agentic-design-mobile';
import 'antd-mobile/es/global';

function App() {
  return (
    <ThemeProvider defaultTheme="light" persistKey="my-app">
      <Welcome header={{ title: 'AI 助手' }} content={{ suggestion: { items: [], onClick: () => {} } }} />
      <Bubble role="user" content="你好" />
      <Bubble role="assistant" content="你好，有什么可以帮你？" />
      <TextArea placeholder="输入消息" search onSearch={(v) => console.log(v)} />
    </ThemeProvider>
  );
}
```

---

## MCP 服务

在 Cursor、Claude Code 等支持 [Model Context Protocol](https://modelcontextprotocol.io/) 的客户端中，可通过 npm 包 [@agentar/agentic-design-mobile-mcp](https://www.npmjs.com/package/@agentar/agentic-design-mobile-mcp) 拉取本组件库的**本地 Markdown** 说明与示例（`get_component_list`、`get_component_docs`、`get_component_examples`），便于 AI 按组件名查询用法与 API。

### 在 Cursor 中配置

在项目或用户级 MCP 配置中加入（`command` 使用 `npx` 时无需事先全局安装）：

```json
{
  "mcpServers": {
    "agentic-design-mobile-mcp": {
      "command": "npx",
      "args": ["@agentar/agentic-design-mobile-mcp"]
    }
  }
}
```

保存后重启或重新加载 MCP；其他客户端若支持 stdio MCP，可将 `command` / `args` 按同样方式指向该包的可执行入口。更多说明见 [npm 包主页](https://www.npmjs.com/package/@agentar/agentic-design-mobile-mcp)。

---

## License

ISC