Integration Development FAQs

This document answers common questions in integration development to help you quickly resolve issues.

❓ Frequently Asked Questions

Q1: What's the difference between integration development and directly modifying the main system?

A: Integration development uses a micro-frontend architecture, where your code is maintained independently and not mixed with the main system code.

Comparison Item	Integration Development (Micro-frontend)	Directly Modifying Main System
Code Isolation	✅ Independent repo, clear boundaries	❌ Mixed with main system code
Maintenance Cost	✅ Low, only maintain your own code	❌ High, prone to conflicts when main system updates
Team Collaboration	✅ Different teams develop independently	❌ Easy to interfere with each other
Deployment Flexibility	✅ Independent build, independent deployment	❌ Must redeploy entire system
Version Management	✅ Independent version control	❌ Coupled with main system version

Recommended Approach:

• ✅ Use integration development to maintain code independence
• ✅ Integrate into main system with one click via lovrabet menu sync
• ✅ Enjoy all advantages of micro-frontend architecture

---

Q2: Is MCP configuration mandatory?

A: Not mandatory, but strongly recommended.

Advantages of Configuring MCP:

• ✅ AI fully understands your data structure
• ✅ Generated code accuracy approaches 100%
• ✅ Saves 50-80% of development time
• ✅ Complex queries and data associations handled automatically

Without Configuring MCP:

• Still can use SDK to write code manually
• Need to check documentation and understand APIs yourself
• Lower development efficiency

Comparison Example:

Without MCP:
- Check docs → Write code manually → Debug errors → Modify → Debug again → Complete
- Time: 1-2 hours

With MCP:
- Tell AI requirements → AI generates code → Complete
- Time: 5-10 minutes

---

Q3: Which AI tools does MCP support?

A: Currently supports all tools based on the MCP protocol:

• ✅ Claude Desktop - Anthropic's official desktop application
• ✅ Cursor - AI code editor
• ✅ Other MCP-compatible tools - Continuously expanding

Configuration Method:

The configuration method is similar for each tool, just add MCP Server in the config file:

{
  "mcpServers": {
    "lovrabet-dataset": {
      "command": "npx",
      "args": ["-y", "@lovrabet/dataset-mcp-server"],
      "env": {
        "DEFAULT_APP_CODE": "your-app-code"
      }
    }
  }
}

---

Q4: Will the new page appear immediately in the main system after menu sync?

A: Yes. After lovrabet menu sync completes:

1. The menu will immediately appear in the main system
2. Clicking the menu will load your extended application page
3. Users won't perceive this is an independently developed sub-application

Prerequisites:

• ✅ Extended application is correctly built and deployed
• ✅ Main application is configured with correct sub-application access address

If menu doesn't appear:

1. Check if lovrabet menu sync executed successfully
2. Confirm sub-application is deployed to server
3. Check if main application's sub-application configuration is correct
4. Refresh main system page

---

Q5: How to debug SDK call failures?

A: SDK provides debug mode:

const client = createClient({
  appCode: "your-app-code",
  accessKey: process.env.ACCESS_KEY,
  options: {
    debug: true, // Enable debug mode
  },
});

After enabling, console will output:

• Complete HTTP request information (URL, Headers, Body)
• Detailed request and response content

Debugging Steps:

1. Enable debug mode
2. Check console for request details
3. Check if authentication information is correct
4. Check if API parameters meet requirements
5. View response error messages

Common Errors:

Error	Cause	Solution
401 Unauthorized	Authentication failed	Check AccessKey or Token
403 Forbidden	Insufficient permissions	Check dataset access permissions
404 Not Found	Resource doesn't exist	Check if datasetCode is correct
400 Bad Request	Parameter error	Check request parameters
500 Internal Server	Server error	Contact technical support
Network Error	Network issue or CORS error	Check network connection and CORS configuration
CORS Error	Cross-origin configuration issue	Check server-side CORS configuration
Timeout	Request timeout	Check network or increase timeout
Token Expired	Token has expired	Regenerate Token or use Cookie

More debugging tips: 📖 SDK Troubleshooting

---

Q6: Can one application create multiple extension projects?

A: Yes! This is an advantage of micro-frontend architecture.

Scenario Example:

• Team A develops "Sales Analysis" extension, independent repo
• Team B develops "Customer Service" extension, independent repo
• Team C develops "Financial Reports" extension, independent repo

After all extensions are synced via lovrabet menu sync, they integrate seamlessly in the main system, like one complete application.

Advantages:

• ✅ Teams develop independently without interference
• ✅ Can use different tech stacks (React, Vue, etc.)
• ✅ Independent deployment and updates
• ✅ Reduces code conflict risks
• ✅ Facilitates team collaboration and management

Considerations:

• Ensure menu names from different extensions don't duplicate
• Recommend unified SDK and CLI versions
• Can share common component libraries (optional)

---

Q7: Will extended application performance be affected?

A: No. Performance advantages of micro-frontend architecture:

Performance Advantages:

• ✅ Load on demand: Extended application code loads only when accessed
• ✅ Independent caching: Extended applications cache independently, updates don't affect main system
• ✅ Parallel loading: Multiple extended applications can load in parallel
• ✅ Build optimization: CLI has built-in performance optimization configurations

Performance Best Practices:

// 1. Route lazy loading
const CustomerAnalysis = lazy(() => import("./pages/CustomerAnalysis"));

// 2. Reasonable code splitting
import("./heavy-lib").then((module) => {
  // Load only when needed
});

// 3. Avoid introducing oversized third-party libraries
// ❌ Not recommended: Import entire lodash
import _ from "lodash";
// ✅ Recommended: Import only needed functions
import debounce from "lodash-es/debounce";

// 4. Optimize images and resources
// Use appropriate image formats and sizes
// Use CDN to load static resources

// 5. Paginated data loading
const result = await client.models.customers.filter({
  currentPage: 1,
  pageSize: 20, // Control page size
});

Performance Monitoring:

# Analyze bundle size
lovrabet build
npx source-map-explorer dist/*.js

# Use Lighthouse to check performance
npx lighthouse http://localhost:3000

---

Q8: Will MCP leak data?

A: No. How MCP Server works:

Security Mechanism:

1. MCP Server runs on your local machine
2. Only reads dataset metadata (table structure, field definitions)
3. Does not read actual business data
4. AI tools understand structure via MCP but don't access data

Security Guarantees:

• ✅ Data doesn't leave your environment
• ✅ Only provides structural information to AI
• ✅ Complies with data security regulations
• ✅ Not uploaded to cloud

Example of information MCP passes:

// Information MCP passes to AI (structure only)
{
  tableName: "customers",
  fields: [
    { name: "id", type: "string", isPrimaryKey: true },
    { name: "customer_name", type: "string" },
    { name: "phone", type: "string" },
    { name: "company", type: "string" }
  ]
}

// ❌ MCP does not pass actual data
// Won't pass: { id: "001", customer_name: "Zhang San", ... }

---

Q9: How to view the complete main system during local development?

A: During local development, you mainly focus on your own extension features:

Local Development Mode:

lovrabet start
# Extended app runs independently at http://localhost:3000
# Can debug business logic, data fetched from real system via SDK

Preview Complete Integration Effect:

1. Option 1: Configure local server address to test environment

   // Test environment main application configuration
   microApps: [
     {
       name: "my-extension",
       url: "http://localhost:3000", // Points to local dev server
     },
   ];

2. Option 2: Deploy to test environment after build

   lovrabet build
   # Deploy to test server
   lovrabet menu sync --env test

Recommended Approach:

• ✅ Use local mode for daily development, fast iteration
• ✅ Regularly deploy to test environment to verify integration
• ✅ Thoroughly test in production environment before launch

---

Q10: Can extended applications access all data in the main system?

A: Extended applications access data through SDK, permissions determined by the following factors:

Permission Control Mechanism:

1. Authentication Method:

   • When using Cookie authentication, inherits current user's permissions
   • When using AccessKey authentication, inherits AccessKey's permissions

2. Dataset Permissions:

   • Can only access configured datasets
   • Subject to platform permission system restrictions

3. Field Permissions:

   • Follows dataset field permission settings
   • Sensitive fields may be hidden or masked

Security Recommendations:

• ✅ Use AccessKey on server-side (don't leak)
• ✅ Use Token or Cookie in browser
• ✅ Follow principle of least privilege
• ❌ Don't store sensitive data on client
• ❌ Never hardcode AccessKey in frontend code

---

⚠️ Precautions

1. Security

• Never hardcode AccessKey in frontend code
• Use environment variables to manage sensitive information
• Use Token or Cookie authentication in production
• Follow HTTPS for data transmission
• Regularly update SDK and CLI versions

2. Version Compatibility

• Ensure SDK, CLI, MCP Server versions are compatible
• Pay attention to toolchain update logs
• Verify in test environment before deploying to production
• Use package.json to lock versions

Recommended Version Management:

{
  "dependencies": {
    "@lovrabet/sdk": "^1.1.18",
    "@lovrabet/cli": "^1.1.15"
  },
  "devDependencies": {
    "@lovrabet/dataset-mcp-server": "^1.0.8"
  }
}

3. Menu Naming

• Use Title comments to provide clear Chinese names
• Avoid special characters
• Ensure menu names are unique within the application
• Menu names should be concise and clear, no more than 10 characters

Good Menu Naming:

✅ Customer Analysis
✅ Sales Funnel
✅ Data Reports

Poor Menu Naming:

❌ page1
❌ Machine Learning-Based Customer Behavior Analysis and Prediction System (too long)
❌ analysis_page (uses underscore)

4. Data Security

• Don't store sensitive data on client
• Use HTTPS for data transmission
• Follow Lovrabet platform's security standards
• Regularly review code security issues
• Use environment variables to manage configuration

5. Code Quality

• Use TypeScript for type safety
• Write unit tests
• Follow code standards (ESLint, Prettier)
• Code review
• Continuous integration (CI/CD)

---

📚 Related Resources

Core Documentation

• 📖 Integration Development Introduction - Understand the philosophy and value of integration development
• 📖 Development Best Practices - Learn complete development process
• 📖 Lovrabet SDK Usage Guide - Deep dive into SDK
• 📖 Lovrabet CLI Usage Guide - Master CLI tools

Toolkits

• 📦 @lovrabet/sdk
• 📦 @lovrabet/cli
• 📦 @lovrabet/dataset-mcp-server

Example Projects

• 🎯 React Sub-App Example
• 🎯 More examples coming soon...

Technical Support

• 💬 Developer Community
• 📧 support@lovrabet.com
• 🐛 Submit Issue

---

🤝 Have Other Questions?

If your question isn't answered here:

1. 📖 Check detailed SDK Documentation
2. 📖 Check detailed CLI Documentation
3. 💬 Ask in the developer community
4. 📧 Send email to support@lovrabet.com
5. 🐛 Submit Issue on GitHub

We will continuously update this document, adding more FAQs and solutions.