Mini apps

Mini apps are custom web applications that agents can create and deploy on-the-fly to provide interactive, visual experiences beyond text-based conversations. They allow agents to build specialized interfaces for complex tasks, data visualization, and interactive workflows.

What are Mini Apps?

Mini apps are lightweight React applications that run in iframes within the Bigmind interface. When an agent needs to provide a richer, more interactive experience than text alone can offer, it can create a mini app.

Key characteristics:

Agent-created: Built by AI agents during conversations, not pre-coded
TypeScript/React: Built using modern TypeScript and React for type safety and component reusability
Pre-installed packages: Come with a rich set of UI libraries out of the box (Recharts, Radix UI, Tailwind CSS, etc.)
Sandboxed: Run securely in iframes with controlled permissions
One-click deployment: Deploy instantly to Bigmind's infrastructure with a single click
Context-aware: Receive props from the parent application for customization
Multiple access points: Accessible via web page, Sidekick, or conversational context

How Mini Apps Work

The mini app lifecycle involves several steps:

Request: A user asks the agent for something that would benefit from a custom interface
Agent decision: The agent determines a mini app would be helpful
Code generation: The agent writes TypeScript/React code for the mini app
Auto-save: Code is automatically saved as a draft in Bigmind
One-click deployment: With a single click, the mini app is bundled and deployed to Bigmind's infrastructure
Rendering: The mini app loads in an iframe within Bigmind (in chat, Sidekick, or standalone)
Interaction: The user interacts with the mini app's custom interface

Where Mini Apps Appear

Mini apps can be accessed in multiple contexts:

In Conversations

When an agent creates a mini app during a conversation, it appears inline within the chat interface, allowing users to interact with it immediately without leaving the conversation.

In Sidekick

Mini apps can be configured to appear automatically in the Sidekick Chrome extension based on what the user is viewing. For example, when viewing a specific CRM record or visiting a website, a contextual mini app can display relevant information or tools.

See the Sidepanel Rules section below for configuration details.

As Standalone Pages

Every mini app gets its own URL (/mini-apps/{miniAppId}) that can be shared and accessed directly by authorized users in your organization.

Mini App Capabilities

Mini apps can do virtually anything a web application can do:

Data Visualization

Charts and graphs for sales metrics
Interactive dashboards
Timeline visualizations
Pipeline funnels
Heatmaps and geographic displays

Interactive Tools

Calculators (pricing, ROI, commission)
Configurators (product options, packages)
Comparison tables
Interactive forms and surveys
Decision trees and workflows

Data Exploration

Filterable data tables
Search interfaces
Drill-down views
Multi-dimensional data browsers

Example Use Cases

Territory Planning Dashboard

An agent creates a mini app that visualizes account distribution across sales territories, allowing the user to see account density, revenue potential, and coverage gaps on an interactive map.

Deal Health Scorecard

A mini app that displays deal health metrics in an interactive scorecard format, with color-coded indicators, trend arrows, and clickable sections to drill into specific risk factors.

ROI Calculator

An interactive calculator mini app where prospects can input their own numbers and see real-time ROI calculations, complete with visualizations and comparison charts.

Competitive Comparison Matrix

A mini app that displays a filterable, sortable comparison table of your products vs competitors, with hover states showing detailed feature descriptions.

Agent Tools for Mini Apps

Agents have access to specialized tools for building mini apps:

createFile: Create new TypeScript/TSX files in the mini app
editFile: Modify existing mini app files
deleteFile: Remove files from the mini app
testBuild: Test the mini app build before deployment

The "Mini App Builder" agent is specifically configured with these tools and optimized for creating mini apps.

Mini App Architecture

File Structure

Mini apps are built with TypeScript and React. The file structure consists of:

main.tsx: The main entry point (required) - this is where your React component starts
Additional .tsx files: Additional React components or utilities you create
index.html: System-managed HTML wrapper (read-only, not editable)
package.json: System-managed dependencies (read-only, not editable)

You work primarily in main.tsx and any additional TypeScript files you create. The system automatically handles the HTML wrapper and dependency management.

Pre-installed Packages

Mini apps come with a comprehensive set of packages out of the box, enabling you to build sophisticated UIs without manual package management:

React & React DOM: Core React framework
Recharts: Powerful charting library for data visualization
Radix UI: Accessible, unstyled UI components
Tailwind CSS: Utility-first CSS framework
Lucide React: Beautiful, consistent icons
clsx: Conditional className utility
date-fns: Date manipulation utilities

These packages allow you to create rich, interactive experiences without worrying about dependency management.

Props System

Mini apps can receive props (properties) from the parent application to customize their behavior:

objectType: The type of CRM object (account, deal, contact, etc.)
objectId: The specific object ID to display data for
Custom props: Any additional data the agent wants to pass

Props are passed as URL query parameters and accessible via JavaScript in the mini app.

Authentication

Mini apps automatically receive authentication from the parent application via postMessage:

Secure: Auth tokens are never exposed in URLs
Automatic: No manual auth setup required
Scoped: Mini apps have the same permissions as the user viewing them

Deployment Process

Mini apps use a streamlined, one-click deployment process to Bigmind's infrastructure:

Develop: Create and edit TypeScript files in the mini app editor
Auto-save: Changes are automatically saved as drafts (staged version)
Test: Use the built-in preview and test functionality to validate behavior
Publish: Click "Publish" to bundle and deploy to Bigmind's infrastructure
Serve: Mini app is immediately available at /mini-apps/{miniAppId}

The deployment process is handled entirely by Bigmind - there's no need to manage servers, configure domains, or handle infrastructure. Just click publish and your mini app is live.

Draft vs Published

Mini apps maintain two versions:

Staged (Draft): Your working version with auto-saved changes
Published: The live version users interact with

This allows you to iterate and test changes without affecting the production version until you're ready to publish.

Sidepanel Rules

One of the most powerful features of mini apps is the ability to display them automatically in Sidekick based on what the user is viewing. This creates contextual, intelligent experiences that adapt to the user's current focus.

What are Sidepanel Rules?

Sidepanel rules determine which mini app appears in the Sidekick Chrome extension based on the object type or website the user is viewing. You can configure rules for:

Leads: When viewing a lead record
Contacts: When viewing a contact record
Deals: When viewing a deal/opportunity
Accounts: When viewing an account/company
Websites: When browsing any website

How It Works

When a user opens Sidekick, Bigmind automatically:

Detects the current context: Identifies if the user is viewing a CRM record (HubSpot, Salesforce, or Bigmind) or a website
Extracts object information: Determines the object type (lead, contact, deal, account) and ID
Applies rules: Checks if there's a mini app configured for this object type
Loads the mini app: Displays the appropriate mini app with context (objectType and objectId as props)

This means users get relevant tools and information automatically based on what they're working on, without manual selection.

Configuring Sidepanel Rules

To configure which mini apps appear in Sidekick:

Navigate to Settings → AI → Mini Apps → Sidepanel Rules
Set global defaults: Choose which mini app (or "Auto") should appear for each object type
Add user-specific overrides (optional): Configure different mini apps for specific team members
Save your configuration

Global Settings

Global settings apply to all users in your organization by default:

Auto: Let Bigmind intelligently decide which mini app to show (or show default CRM view)
Specific mini app: Always show a particular mini app for this object type

User-Specific Overrides

For team members with specialized needs, you can create user-specific rules that override global settings. For example:

SDRs might see a lead qualification mini app when viewing leads
AEs might see a deal intelligence mini app when viewing deals
Customer Success might see an account health mini app when viewing accounts

Example Use Cases

Account Intelligence Dashboard

Create a mini app that displays account health metrics, recent activities, expansion opportunities, and risk indicators. Configure it to appear automatically when any user views an account in their CRM.

Lead Enrichment Tool

Build a mini app that enriches lead data by pulling information from external sources. Set it to appear when SDRs view lead records, giving them instant context without leaving the CRM.

Deal Coach

Develop a mini app that analyzes deal health, suggests next actions based on your sales methodology, and shows relevant case studies. Configure it for the "Deal" object type so it appears whenever reps review opportunities.

Using Mini Apps with Custom Tools

Mini apps become even more powerful when combined with Custom Tools. While mini apps provide the visual interface, custom tools can fetch data from your own backend systems, creating a complete solution.

The Pattern

Create a custom tool that connects to your backend API
Build a mini app that calls this tool to fetch data
Display the data in a rich, interactive interface
Configure sidepanel rules so the mini app appears contextually

Example: Territory Planning

Let's say you have a custom backend system that calculates territory assignments and quotas:

Create a custom tool getTerritoryData that calls your backend API
Build a mini app that uses this tool to fetch territory information
Visualize the data using Recharts (pre-installed) in an interactive map or dashboard
Set a sidepanel rule to show this mini app when viewing account records

Now, whenever a rep views an account in their CRM, they automatically see the territory planning dashboard with live data from your backend, all without leaving the CRM.

Authentication & Security

When mini apps call custom tools that access your backend:

Automatic authentication: The user's Bigmind session is passed through
Same permissions: Custom tools have the same access rights as the user
Secure communication: All requests go through Bigmind's infrastructure

See the Custom Tools documentation for more details on building tools that connect to your systems.

Security Model

Mini apps run in a secure, sandboxed environment:

Iframe Sandbox

Restricted permissions: Only allow-scripts and allow-same-origin
No top-level navigation: Mini apps can't navigate the parent window
Isolated execution: Mini app code can't access parent application code

Access Control

Tenant isolation: Mini apps only accessible to their owning organization/user
Member validation: Organization members are verified before access
Status checks: Only active, deployed mini apps are served

Code Validation

No arbitrary code execution: Code is reviewed and sandboxed
Resource limits: CPU and memory usage is constrained
Network restrictions: Outbound requests are controlled

Managing Mini Apps

You can manage mini apps in Settings → AI → Mini Apps:

Mini App List

View all mini apps created in your organization:

See which agents created each mini app
Check deployment status
Monitor usage and performance

Mini App Details

Click into a mini app to:

View the source code
Edit files manually (for advanced users)
Test the mini app
Redeploy after changes
Deactivate or delete the mini app

Building Mini Apps

While agents typically build mini apps, you can also create them manually in the mini app editor:

Navigate to Settings → AI → Mini Apps
Click "Create Mini App"
Provide a name and description
Write your TypeScript/React code in main.tsx
Create additional files if needed for components or utilities
Use the Preview tab to see your mini app in action
Test with sample props in the Test panel
Publish when ready

The Mini App Editor

The editor provides a complete development environment:

Code editor: Full TypeScript support with autocomplete and type checking
Multi-file support: Create and organize multiple .tsx files
Live preview: See your changes in real-time
Test panel: Pass sample props as JSON to test different scenarios
Console: View console logs and errors from your mini app
Auto-save: Changes are saved automatically as you work
AI assistant: Chat with an AI agent specialized in mini app development

Working with Props

Mini apps receive props through the SidepanelProps interface from the @bigmind/embed-sdk package. Your main React component should accept these props as a parameter:

import { FC } from 'react';
import { SidepanelProps } from '@bigmind/embed-sdk';

const MiniApp: FC<SidepanelProps> = (props) => {
  const { objectType, objectId } = props;
  return (
    <div className="p-3">
      <div className="bg-white p-3 shadow rounded-lg w-full">
        <p className="text-lg font-semibold text-black">Start building your mini app here...</p>
        <p className="text-sm text-black mt-2">Props: {JSON.stringify({
          objectType,
          objectId,
        })}</p>
      </div>
    </div>
  );
};

export default MiniApp;

The SidepanelProps interface includes properties like objectType (e.g., 'account', 'deal', 'contact', 'lead') and objectId (the specific record ID), along with any additional custom props passed to the mini app.

Use the Test panel in the editor to pass sample props as JSON and validate your mini app works with different inputs.

Development Tips

Keep it simple: Mini apps should be focused on a single task or view
Use TypeScript: Take advantage of type safety to catch errors early
Leverage pre-installed packages: Use Recharts for charts, Radix UI for components, Tailwind for styling
Mobile-friendly: Design responsive interfaces that work on all screen sizes
Fast loading: The pre-installed packages are optimized; avoid adding heavy external dependencies
Accessible: Follow web accessibility standards (Radix UI helps with this)
Error handling: Gracefully handle missing data or failed requests
Test with props: Use the Test panel to validate behavior with different inputs

Mini App vs Custom Tools

When should you use a mini app vs a custom tool?

Use Mini Apps For	Use Custom Tools For
Visual, interactive experiences	Data processing and retrieval
Complex data visualization	API integrations
User input collection	Business logic execution
Multi-step workflows	Background processing
Dashboards and reports	CRM operations

Often, mini apps and custom tools work together - a custom tool fetches data from your backend, and a mini app visualizes it in a rich interface.

Best Practices

Purpose-built: Create mini apps for specific, well-defined use cases
Performance: Keep code lightweight and optimize for fast loading
Testing: Always test mini apps with realistic data before deploying
Documentation: Add comments in your code explaining complex logic
Version control: Keep track of changes when you modify mini apps
User feedback: Monitor how users interact with mini apps and iterate

Limitations

Mini apps have some constraints to be aware of:

Sandbox restrictions: Limited browser APIs available due to iframe sandbox
No server-side state: Each request is independent (use props to pass data)
Size limits: Keep total code size reasonable for fast loading
No native integrations: Can't directly access CRM APIs without going through Bigmind

Troubleshooting

Mini app not loading:

Check that the mini app status is "active" and deployment_status is "deployed"
Verify you have access to the organization that owns the mini app
Look for TypeScript or React errors in the browser console
Ensure your code compiles without errors in the editor
Try republishing the mini app

Mini app not receiving props:

Check that props are being passed correctly in the URL query parameters
Verify your code is correctly parsing URLSearchParams
Use the Test panel in the editor to simulate props
Test with simple, hardcoded data first before using dynamic props

Mini app not appearing in Sidekick:

Verify sidepanel rules are configured in Settings → AI → Mini Apps → Sidepanel Rules
Check that the mini app is published (not just saved as draft)
Ensure you're viewing a supported CRM record or website
Try refreshing the Sidekick panel

Authentication issues:

Ensure your mini app is listening for postMessage events for auth token
Verify the auth token is being included in API requests
Check that the token hasn't expired (refresh if needed)

TypeScript errors:

Check the editor for inline error indicators
Ensure you're using types correctly with pre-installed packages
Refer to package documentation (Recharts, Radix UI, etc.) for correct usage
Use the Preview tab to see runtime errors in the console

What are Mini Apps?

How Mini Apps Work

Where Mini Apps Appear

In Conversations

In Sidekick

As Standalone Pages

Mini App Capabilities

Data Visualization

Interactive Tools

Data Exploration

Example Use Cases

Territory Planning Dashboard

Deal Health Scorecard

ROI Calculator

Competitive Comparison Matrix

Agent Tools for Mini Apps

Mini App Architecture

File Structure

Pre-installed Packages

Props System

Authentication

Deployment Process

Draft vs Published

Sidepanel Rules

What are Sidepanel Rules?

How It Works

Configuring Sidepanel Rules

Global Settings

User-Specific Overrides

Example Use Cases

Account Intelligence Dashboard

Lead Enrichment Tool

Deal Coach

Using Mini Apps with Custom Tools

The Pattern

Example: Territory Planning

Authentication & Security

Security Model

Iframe Sandbox

Access Control

Code Validation

Managing Mini Apps

Mini App List

Mini App Details

Building Mini Apps

The Mini App Editor

Working with Props

Development Tips

Mini App vs Custom Tools

Best Practices

Limitations

Troubleshooting

Related Documentation