@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）等可独立或组合使用

📦 安装

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

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

🚀 使用

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

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 的客户端中，可通过 npm 包 @agentar/agentic-design-mobile-mcp 拉取本组件库的本地 Markdown 说明与示例（get_component_list、get_component_docs、get_component_examples），便于 AI 按组件名查询用法与 API。

在 Cursor 中配置

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

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

保存后重启或重新加载 MCP；其他客户端若支持 stdio MCP，可将 command / args 按同样方式指向该包的可执行入口。更多说明见 npm 包主页。

License

ISC