AgentScope Spark Design
https://github.com/agentscope-ai/agentscope-spark-design- Category
- Developer Tools
- Rank
- No. 1339Tools index
Previous survey · No. 1345 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- agentscope-ai
- GitHub
- 445 stars
- Date
About
UI component library for building AgentScope and Alibaba Cloud Apsara Lab agent interfaces.
What it does
It is a React toolkit split across design primitives, chat experiences, and visual workflow editing. The design package extends Ant Design with themes, mobile variants, internationalization, and common controls. The chat package adds streaming conversations, Markdown, diagrams, voice input, cards, and a ready-made chat container. The flow package supplies node editing, configuration panels, history controls, and minimaps.
Why it's ranked here
Its breadth is backed by concrete exports, not just positioning. Teams get themed controls, substantial chat building blocks, workflow editing, a runtime WebUI launcher, and component documentation exposed over MCP. The case is tempered by inconsistent repository documentation and licensing metadata, plus operational shortcuts in the launcher that could complicate failures.
What's good
The packages cover useful layers without forcing every team to assemble them independently. Chat includes streaming responses, session handling, attachments, Markdown, Mermaid diagrams, custom cards, and generative UI. The design layer provides light and dark themes, mobile dialogs, forms, media components, and request helpers. The MCP server lets coding agents list components and retrieve their API documentation.
Tradeoffs
Repository boundaries are unclear. The README presents two packages, while root build scripts and source include a third workflow package. License declarations also differ: package-specific licenses appear in the README, while the root package declares ISC. The runtime WebUI launcher installs dependencies and starts a development server locally. It suppresses cleanup and extraction errors, making some startup failures harder to diagnose. MCP documentation retrieval targets Chinese component documents.
How to use it well
Use it for React products already comfortable with Ant Design that need agent chat, branded controls, or node-based workflow editing. Adopt the design package first, then add chat or flow features where their larger abstractions save work. The runtime launcher suits local WebUI setup tied to an existing backend address and token. This repository supplies frontend experience and documentation tooling, not the backend agent service itself.
Technical notes+
packages/spark-design/src/index.ts re-exports Ant Design primitives, custom controls, mobile variants, request utilities, configuration helpers, and four generated themes. packages/spark-chat/components/index.ts exposes providers, streaming, sessions, cards, Markdown, Mermaid, attachments, generative UI, and a runtime WebUI. packages/spark-flow/src/index.ts exports React Flow infrastructure, editing panels, node controls, hooks, and workflow types. packages/spark-design/mcp/index.ts runs a stdio MCP server with get_component_docs and get_component_list. packages/spark-chat/bin/cli.js hashes and extracts a bundled WebUI, installs dependencies when needed, and starts its development server with backend URL and token environment values. Root package.json builds design, chat, and flow despite README.md listing only design and chat.
Observed
- Licenses
- README declares MIT for spark-design and Apache-2.0 for spark-chat; root package metadata declares ISC.
- Primary languages
- TypeScript and TSX dominate the supplied library source, with JavaScript used for CLI and repository scripts.
- Packaging
- Private pnpm monorepo containing scoped design and chat packages, with root scripts also building spark-flow.
- Interfaces
- React component libraries, a Node command-line launcher, and a stdio MCP documentation server.
- UI foundations
- Ant Design 5, Tailwind CSS, antd-style, and React Flow are named or imported foundations.
- Platform surface
- Web React components plus explicit mobile dialog, drawer, and modal variants.
- Documentation
- Dumi documentation with automated GitHub Pages deployment described in the README.
Read from README.md, package.json, packages/spark-chat/bin/cli.js, packages/spark-flow/src/index.ts, packages/spark-design/mcp/index.ts, packages/spark-design/src/index.ts, packages/spark-design/scripts/index.js, packages/spark-chat/components/index.ts, packages/spark-chat/component-tpl/index.tsx, packages/bailian-high-code-webui/src/App.tsx, packages/bailian-high-code-webui/src/main.tsx, packages/spark-flow/src/i18n/index.ts, packages/clawd-chat-ui/web/src/App.tsx, packages/spark-flow/src/flow/index.tsx, packages/spark-flow/src/hooks/index.ts.
What it can do
Create agent interface components
Design specifications and requirements → Reusable UI components for agent interfaces
Build AgentScope user interfaces
Component library elements and layout requirements → Complete agent interface layouts
Generate Alibaba Cloud Apsara Lab interfaces
Lab workflow requirements and component selections → Functional lab interface designs
Customize agent interaction elements
Agent behavior specifications and UI preferences → Tailored interaction components
Implement responsive agent dashboards
Dashboard requirements and data display needs → Responsive dashboard interfaces
Style agent communication interfaces
Branding guidelines and communication patterns → Branded agent communication UI elements
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.