AgentScope Spark Design Documentation

Alibaba Cloud Spark Design is a React UI library built on top of Ant Design. It is specifically designed for building Large Language Model (LLM) products, providing both basic components and specialized scenario components.

Key Capabilities

• Ant Design Compatibility: It is compatible with the Ant Design ecosystem, allowing for seamless transitions between the two.
• LLM-Oriented: Includes a variety of scenario components tailored for LLM applications.
• Ecosystem Integration: Works with @agentscope-ai/chat and @agentscope-ai/flow to build enterprise-level LLM applications.
• TypeScript Support: Written in TypeScript with predictable static types and complete definition files.
• Theming: Supports multiple preset themes and easy switching between light and dark modes.

Alibaba Cloud Spark Chat is a free, open-source React conversation framework built on top of Alibaba Cloud Spark Design. It is designed to help developers build high-quality LLM (Large Language Model) chat experiences quickly by leveraging best practices from Alibaba Cloud's business scenarios.

Key features include:

• OpenAI-compatible model integration: Easily connect to model inference services that follow the OpenAI standard.
• Extensibility via Cards: Support for custom components (cards) to display various model output formats.
• Full TypeScript support: Provides complete type definitions for improved developer experience and reliability.
• CSS-in-JS: Uses a modern CSS-in-JS approach where styles are loaded on demand, minimizing dependency on specific build tool configurations.

Alibaba Cloud Spark Design is a React UI component library based on Ant Design, specifically optimized for building Large Language Model (LLM) products.

Key features include:

• Ant Design Compatibility: Seamlessly switch to Spark Design within the Ant Design ecosystem.
• TypeScript Support: Written in TypeScript with predictable static types and full definition files.
• LLM-Specific Components: Includes various scenario-based components designed for LLM applications.
• Ecosystem Integration: Designed to work with @agentscope-ai/chat and @agentscope-ai/flow for building enterprise-grade LLM applications.
• Theming: Supports multiple preset themes and easy switching between light and dark modes.

The project is a monorepo containing two primary sub-packages:

1. @agentscope-ai/design (packages/spark-design): The core design system component library. It provides enhanced UI components (like Button, Modal, Select) encapsulated based on Ant Design 5, supports mobile components, a custom icon system, and internationalization.

2. @agentscope-ai/chat (packages/spark-chat): An LLM conversation component library designed for building AI chat experiences. It features out-of-the-box LLM dialogue support, Markdown rendering (math formulas, code highlighting), Mermaid flowchart support, streaming responses, and voice input support.

The project is a monorepo containing two primary packages:

1. @agentscope-ai/design (located in packages/spark-design): A core design system component library. It provides enhanced UI components based on Ant Design 5, including mobile component support, a custom theme system, and internationalization.
2. @agentscope-ai/chat (located in packages/spark-chat): An LLM conversation component library designed for building AI chat experiences. It includes features like Markdown rendering (with math and code highlighting), Mermaid diagram support, streaming response support, and voice input support.

Spark Design provides several preset themes via the ConfigProvider. You can choose between Carbon and Bailian themes in light or dark modes.

Available themes:

• carbonTheme: Carbon light theme
• carbonDarkTheme: Carbon dark theme
• bailianTheme: Bailian light theme
• bailianDarkTheme: Bailian dark theme

import { 
  ConfigProvider,
  carbonTheme,
  carbonDarkTheme,
  bailianTheme,
  bailianDarkTheme,
} from '@agentscope-ai/design';

// Use Carbon theme
<ConfigProvider {...carbonTheme}>
  <App />
</ConfigProvider>

// Use Bailian dark theme
<ConfigProvider {...bailianDarkTheme}>
  <App />
</ConfigProvider>

You can display specialized content in the chat by providing custom card components via the CustomCardsProvider.

import { CustomCardsProvider } from '@agentscope-ai/chat';

const CustomCard = function(props: { data: any }) {
  return <div>自定义卡片</div>;
}

<CustomCardsProvider cards={{ CustomCard }}>
  <ChatAnywhere />
</CustomCardsProvider>;

When building custom cards, use createStyles from antd-style to access the token object. This allows you to use theme variables (like token.colorBorderSecondary or token.colorBgElevated) so your component automatically adapts to light and dark modes.

Example usage:

import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token, css }) => ({
  wrapper: css`
    border-radius: 12px;
    border: 1px solid ${token.colorBorderSecondary};
    background: ${token.colorBgElevated};
    overflow: hidden;
  `,
  // ...
}));

ChatAnywhere is a pre-built chat container component from @agentscope-ai/chat that integrates Alibaba Cloud Spark Chat components. It abstracts away the manual management of chat message state (e.g., setMessages(...)), allowing you to focus on the LLM logic. Instead of managing a local state array, you use the updateMessage method via a component ref to handle real-time message updates and conversation flows.

import { ChatAnywhere } from '@agentscope-ai/chat';

// Use the ref to interact with the chat state
const ref = useRef<ChatAnywhereRef>();

<ChatAnywhere ref={ref} />

The items property of the Menu component accepts an array of ItemType. ItemType is a union of several specific types:

1. MenuItemType: A standard clickable menu item.
2. SubMenuType: A menu item that contains a children array of other ItemTypes.
3. MenuGroupType: A logical grouping of items, defined by setting type: 'group'.
4. MenuDividerType: A visual separator, defined by setting type: 'divider'.

type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType;