appsmith

What this skill does

# Appsmith — Open-Source Internal Tool Builder

## Overview

You are an expert in Appsmith, the open-source low-code platform for building internal tools, admin panels, and dashboards. You help developers connect to databases and APIs, build CRUD interfaces with drag-and-drop widgets, write custom JavaScript, and self-host the platform for full data control.

## Instructions

### Data Queries

```javascript
// PostgreSQL query with bindings
// Appsmith uses {{ }} for dynamic bindings to widget values
SELECT * FROM orders
WHERE status = {{ StatusDropdown.selectedOptionValue }}
  AND created_at BETWEEN {{ DateRange.startDate }} AND {{ DateRange.endDate }}
  AND ({{ SearchInput.text }} = '' OR customer_email ILIKE '%' || {{ SearchInput.text }} || '%')
ORDER BY created_at DESC
LIMIT 50 OFFSET {{ (Table1.pageNo - 1) * 50 }}

// REST API datasource
// URL: https://api.example.com/users/{{ Table1.selectedRow.id }}
// Method: PUT
// Body: {
//   "plan": {{ PlanSelect.selectedOptionValue }},
//   "note": {{ NoteInput.text }}
// }
```

### JavaScript Objects (JSObjects)

```javascript
// JSObject — reusable business logic
export default {
  // Transform query data for charts
  getRevenueByMonth() {
    return OrdersQuery.data.reduce((acc, order) => {
      const month = moment(order.created_at).format("YYYY-MM");
      acc[month] = (acc[month] || 0) + order.amount;
      return acc;
    }, {});
  },

  // Multi-step workflow
  async processRefund() {
    const order = Table1.selectedRow;
    if (!order) {
      showAlert("Select an order first", "warning");
      return;
    }

    const confirmed = await showModal("ConfirmRefundModal");
    if (!confirmed) return;

    // Step 1: Create refund in Stripe
    await StripeRefundAPI.run({ chargeId: order.stripe_charge_id });

    // Step 2: Update order status
    await UpdateOrderQuery.run({
      orderId: order.id,
      status: "refunded",
    });

    // Step 3: Send notification
    await SlackNotifyAPI.run({
      message: `Refund processed for order #${order.id} ($${order.amount})`,
    });

    showAlert("Refund processed successfully", "success");
    await OrdersQuery.run(); // Refresh table
  },

  // Form validation
  validateForm() {
    const errors = {};
    if (!EmailInput.text?.includes("@")) errors.email = "Invalid email";
    if (AmountInput.text <= 0) errors.amount = "Amount must be positive";
    if (!ReasonSelect.selectedOptionValue) errors.reason = "Select a reason";
    return errors;
  },
};
```

### Deployment

```bash
# Self-hosted with Docker (recommended)
curl -L https://bit.ly/docker-compose-appsmith -o docker-compose.yml
docker compose up -d
# Dashboard at http://localhost:80

# Kubernetes with Helm
helm repo add appsmith https://helm.appsmith.com
helm install appsmith appsmith/appsmith -n appsmith --create-namespace
```

### Git Sync

```bash
# Connect Appsmith to Git for version control
# Settings → Git Connection → Connect to Git Repository
# Supports: GitHub, GitLab, Bitbucket

# Workflow:
# 1. Develop on feature branch
# 2. Commit changes from Appsmith UI
# 3. Create PR for review
# 4. Merge → auto-deploy to production instance
```

## Examples

**Example 1: User asks to set up appsmith**

User: "Help me set up appsmith for my project"

The agent should:
1. Check system requirements and prerequisites
2. Install or configure appsmith
3. Set up initial project structure
4. Verify the setup works correctly

**Example 2: User asks to build a feature with appsmith**

User: "Create a dashboard using appsmith"

The agent should:
1. Scaffold the component or configuration
2. Connect to the appropriate data source
3. Implement the requested feature
4. Test and validate the output

## Guidelines

1. **Self-host for security** — Appsmith is open-source; self-host on your infrastructure when data can't leave your network
2. **JSObjects for logic** — Keep business logic in JSObjects, not in widget event handlers; easier to test and reuse
3. **Git sync for teams** — Connect to Git for version control; review app changes in PRs like code
4. **Prepared statements** — Appsmith uses prepared statements by default for SQL; prevents SQL injection
5. **Environments** — Use Appsmith's environment variables for dev/staging/prod database URLs
6. **Granular permissions** — Use role-based access control; limit who can view/edit/run destructive queries
7. **Reusable widgets** — Extract common patterns (search + table + pagination) into reusable templates
8. **Audit trail** — Enable audit logging for compliance; track who did what and when