跪拜 Guibai
← Back to the summary

uView Pro Ships MCP Server So AI Editors Stop Hallucinating Component APIs

1. Foreword

As an app developer, have you ever run into these frustrations?

If you have any of these pain points, today's article will definitely be an eye-opener.

The uView Pro component library has officially launched MCP (Model Context Protocol) support, allowing AI to obtain complete and accurate component API information in real time, bidding farewell to the era of "guessing properties."

2. What is MCP?

Before introducing uView Pro's MCP functionality, let's briefly explain what MCP is.

MCP (Model Context Protocol) is a standardized protocol proposed by Anthropic that allows AI editors (such as Cursor, Claude Desktop, Trae, etc.) to communicate with external tools.

Simply put, MCP acts as the AI's "eyes" and "hands":

Through MCP, AI is no longer limited to the finite knowledge in its training data but can access the latest and most accurate information in real time.

3. Why Do We Need MCP?

You might ask: Can't I just give the component documentation to the AI? Why do we need a dedicated MCP?

That's a good question. Let me explain.

Pain Points of the Traditional Approach

1. Context Length Limitations

An AI's context window is limited; you can't stuff the entire component library's documentation into it. With 90+ components and dozens of properties each, the documentation alone would take up tens of thousands of words, leaving little room for your actual requirements.

2. Outdated Information

Component libraries are constantly updated with new properties and features. But AI training data has a cutoff date, so it might be stuck on a version from months ago, giving you outdated answers.

3. Accuracy Issues

Even if you give the documentation to the AI, it might not understand it accurately. Sometimes it "hallucinates" non-existent properties or misremembers property names, resulting in code that doesn't run.

4. High Usage Cost

Manually pasting relevant documentation to the AI every time you write code is too cumbersome. Plus, you have to judge which documents you need yourself, and finding the documents is a time-consuming task in itself.

How MCP Solves These Problems

The emergence of MCP perfectly solves the pain points mentioned above:

4. Introduction to uView Pro MCP Features

With all that said, let's see what the uView Pro MCP service can actually do.

8.png

🔍 Component Search

You can search for components using Chinese or English names to quickly find what you need.

For example, if you ask: "What form components does uview have?"

The AI will return a list of all form-related components, including component names, descriptions, categories, etc. No more searching through documentation one by one.

📖 API Query

This is the core feature. You can query the complete API information for any component:

Props

Events

Methods

Slots

For example, if you ask: "What properties does the button component have?"

The AI will return a list of all properties for the Button component, including type, size, disabled, loading, etc., each with detailed descriptions and type information.

💡 Code Examples

API alone isn't enough; sometimes you need to see actual code examples to know how to use it.

uView Pro's MCP service also provides usage example code for components, covering various scenarios:

For example, if you want to know how to use ActionSheet, the AI will not only tell you what properties it has but also give you complete usage example code that you can copy and paste directly.

🌐 Platform Compatibility

uView Pro supports multiple platforms (App, H5, WeChat Mini Program, Alipay Mini Program, Baidu Mini Program, Toutiao Mini Program, QQ Mini Program), and different components may have different support statuses on different platforms.

Through MCP, you can query the platform compatibility of each component to ensure the features you use are available on the target platform, avoiding pitfalls.

⚙️ Hooks Query

In addition to components, uView Pro also provides a rich set of composable functions (Hooks), such as:

Through MCP, you can query the usage, parameters, return values, and other information for each Hook.

🛠️ Utility Function Query

uView Pro has a large number of built-in practical utility functions, covering:

Through MCP, you can quickly query the usage of these utility functions without having to memorize so many APIs.

📚 Guide Documentation Query

Besides API references, uView Pro also has many practical guide documents, such as:

Through MCP, you can directly query the content of these guides to get best practice advice.

✅ Code Verification

This is a very practical feature: AI can help you check if your code uses uView Pro components correctly.

For example, if you write a piece of code but are unsure if the property names or types are correct, you can ask the AI to check it for you. The AI will call the MCP service to get the component's real API information, then compare it with your code to find issues.

5. How to Configure and Use?

Supported AI Editors

The uView Pro MCP service supports the current mainstream AI editors:

Editor Support Status Description
Cursor ✅ Full Support Recommended
Claude Desktop ✅ Full Support Officially Recommended
Trae AI ✅ Full Support Domestic AI Editor
Other MCP Editors ✅ Theoretical Support Works as long as MCP protocol is supported

Basically, as long as your AI editor supports the MCP protocol, you can use uView Pro's MCP service.

With all that said, you must be eager to try it out. Configuration is very simple, just a few steps.

Using in Cursor

Cursor is one of the most popular AI editors currently, and configuring uView Pro MCP is very simple:

Step 1: Create Configuration File

Create a .cursor/mcp.json file in the project root directory:

{
  "mcpServers": {
    "uview-pro": {
      "command": "npx",
      "args": ["-y", "@uview-pro/mcp"]
    }
  }
}

Step 2: Restart Cursor

After configuration, restart Cursor, and the MCP service will start automatically.

Step 3: Start Using

Now you can ask questions directly in Cursor, such as:

The AI will automatically call the MCP service to get the latest component information.

Using in Trae

Trae is a domestic AI editor that also supports MCP:

Step 1: Create Configuration File

Create a .trae/mcp.json file in the project root directory:

{
  "mcpServers": {
    "uview-pro": {
      "command": "npx",
      "args": ["-y", "@uview-pro/mcp"]
    }
  }
}

9.png

Step 2: Restart Trae or start MCP in settings

1.png

Direct Execution

If you want to test the MCP service directly in the command line, you can run:

npx @uview-pro/mcp

This will start the MCP server, and you can communicate with it via stdio.

6. Usage Scenario Examples

Talk is cheap, let's look at a few practical usage scenarios.

Scenario 1: Quickly Understanding a New Component

Problem: I want to use the u-tabs component, but I don't know what properties it has or how to use it.

Traditional Way: Open documentation site → Find Tabs component → Read documentation carefully → Remember key properties → Come back and write code

MCP Way: Directly ask AI "How do I use the u-tabs component? Give me a basic example"

The AI will automatically call the MCP service, get the complete information for the Tabs component, and then generate a usable example code for you. The whole process takes just a few seconds.

3.png

4.png

Scenario 2: Letting AI Generate Accurate Code

Problem: Ask AI to write a form page containing input boxes, selectors, submit buttons, etc.

Traditional Way: The AI-generated code might have incorrect property names or event names, requiring repeated debugging and modification.

MCP Way: The AI will first query the real API of each component, then generate accurate code. Property names and event names are all correct, ready to use out of the box.

This not only saves debugging time but also avoids strange bugs caused by incorrect property names.

Scenario 3: Code Review

Problem: A colleague wrote some code, and I want to check if the components are used correctly.

Traditional Way: I have to look up the documentation one by one, compare each property, which is time-consuming and laborious.

MCP Way: Directly ask the AI to check "Are the uview components used correctly in this code?"

The AI will call the MCP service to get the component's real API, then compare it with the code to find all mismatches, such as:

Scenario 4: Learning a New Component Library

Problem: New team members are just starting with uView Pro and don't know what components are available or how to use them.

Traditional Way: Give the newcomer a copy of the documentation, let them read it themselves, and ask questions when they encounter problems.

MCP Way: Newcomers can directly ask the AI, such as "What layout components does uview have?" or "How do I use u-cell?"

The AI will explain in the most understandable way, and also provide example code, greatly improving learning efficiency.

7. Introduction to the uView Pro Component Library

After talking so much about MCP features, let me briefly introduce the uView Pro component library itself.

What is uView Pro?

uView Pro is a cross-platform UI component library based on uni-app + Vue3 + TypeScript, designed specifically for uni-app developers.

If you're not familiar with uni-app, it's a framework for developing all front-end applications using Vue.js. Developers write one set of code that can be published to iOS, Android, Web (responsive), various mini-programs (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao), Quick Apps, and other platforms.

uView Pro is a high-quality UI component library within this ecosystem.

Official Website: https://uviewpro.cn

Core Advantages

1. 90+ High-Quality Components

uView Pro provides over 90 well-designed components, covering:

Basically, all the common components you can think of are available in uView Pro.

5.png

6.png

2. Full TypeScript Support

uView Pro is written entirely in TypeScript, providing complete type definitions.

This means:

For teams pursuing code quality, this is a very important feature.

3. Strong Theme Customization Capability

uView Pro has a powerful built-in theme system:

7.png

4. Comprehensive Documentation

uView Pro's documentation is very detailed:

Even beginners can get started quickly.

Conclusion

uView Pro's MCP service is a tool that can genuinely improve development efficiency. It can save you the repetitive and tedious time of looking up documentation, allowing you to focus more energy on more valuable tasks.

If you are a uni-app developer and using uView Pro, you must try the MCP feature. Trust me, once you use it, you won't go back.

Finally, don't forget to give uView Pro a Star; your support is the greatest motivation for my continued updates.

May every developer enjoy the efficiency gains brought by AI and write higher-quality code.

Related Resources:

Comments

Top 1 of 2 from juejin.cn, machine-translated. The original thread is authoritative.

石小石Orz

Boss is truly awesome, even MCP is bundled now.

前端梦工厂

How did your avatar change color? [facepalm]