Univer Icons MCP

Univer Icons MCP lets your AI Agent find icons and read their component usage. Describe an action, such as copying selected content or inserting an image. Your AI Agent can choose an icon and generate React or Vue code.

Connect your AI Agent

Model Context Protocol (MCP) lets an AI Agent connect to external tools. Add a server in an AI Agent that supports remote MCP, using these settings:

Save and enable the server. Your AI Agent can then use these tools:

Describe the icon you need

Include your framework, the action the icon represents, and any size or color requirements. For example:

Use Univer Icons MCP to choose a single-color icon for a React toolbar button that copies selected content. Make the icon 20 px, inherit the button's text color, and give the button an accessible name.

For a Vue project, you could ask:

Use Univer Icons MCP to choose a two-color icon for a fill-color button in Vue 3. Use dark gray for the main color and light gray for the accent. Generate the import and component code.

To refine the result, describe the change: “Use a single-color icon” or “Increase it to 32 px while keeping the strokes thin.”

Use the icon in your project

Search for the returned component name in the icon preview. Check that its shape, size, and colors fit your interface. Install the package for your framework and connect the button events to your application logic.

Follow Integrate with React or Integrate with Vue for the implementation steps.