appsmith
Appsmithは、ドラッグ&ドロップでCRUD画面や管理画面、ダッシュボードを簡単に作成し、データベースやAPIと連携、JavaScriptで業務ロジックを記述、DockerやKubernetesでの自己ホストも可能な内製ツール開発を支援するSkill。
📜 元の英語説明(参考)
Build internal tools, admin panels, and dashboards with Appsmith. Use when a user asks to create CRUD interfaces, connect to databases or APIs with drag-and-drop widgets, write JSObjects for business logic, or self-host Appsmith with Docker or Kubernetes.
🇯🇵 日本人クリエイター向け解説
Appsmithは、ドラッグ&ドロップでCRUD画面や管理画面、ダッシュボードを簡単に作成し、データベースやAPIと連携、JavaScriptで業務ロジックを記述、DockerやKubernetesでの自己ホストも可能な内製ツール開発を支援するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o appsmith.zip https://jpskill.com/download/14643.zip && unzip -o appsmith.zip && rm appsmith.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14643.zip -OutFile "$d\appsmith.zip"; Expand-Archive "$d\appsmith.zip" -DestinationPath $d -Force; ri "$d\appsmith.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
appsmith.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
appsmithフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Appsmith — オープンソースの社内ツールビルダー
概要
あなたは、社内ツール、管理パネル、ダッシュボードを構築するためのオープンソースのローコードプラットフォームである Appsmith のエキスパートです。開発者がデータベースや API に接続し、ドラッグアンドドロップウィジェットで CRUD インターフェースを構築し、カスタム JavaScript を記述し、完全なデータ制御のためにプラットフォームをセルフホストするのを支援します。
手順
データクエリ
// バインディングを使用した PostgreSQL クエリ
// Appsmith は、ウィジェット値への動的なバインディングに {{ }} を使用します
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 データソース
// URL: https://api.example.com/users/{{ Table1.selectedRow.id }}
// Method: PUT
// Body: {
// "plan": {{ PlanSelect.selectedOptionValue }},
// "note": {{ NoteInput.text }}
// }
JavaScript オブジェクト (JSObjects)
// JSObject — 再利用可能なビジネスロジック
export default {
// チャート用のクエリデータを変換します
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;
}, {});
},
// 複数ステップのワークフロー
async processRefund() {
const order = Table1.selectedRow;
if (!order) {
showAlert("Select an order first", "warning");
return;
}
const confirmed = await showModal("ConfirmRefundModal");
if (!confirmed) return;
// ステップ 1: Stripe で払い戻しを作成します
await StripeRefundAPI.run({ chargeId: order.stripe_charge_id });
// ステップ 2: 注文ステータスを更新します
await UpdateOrderQuery.run({
orderId: order.id,
status: "refunded",
});
// ステップ 3: 通知を送信します
await SlackNotifyAPI.run({
message: `Refund processed for order #${order.id} ($${order.amount})`,
});
showAlert("Refund processed successfully", "success");
await OrdersQuery.run(); // テーブルを更新します
},
// フォームの検証
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;
},
};
デプロイメント
# Docker でのセルフホスト (推奨)
curl -L https://bit.ly/docker-compose-appsmith -o docker-compose.yml
docker compose up -d
# ダッシュボード: http://localhost:80
# Helm を使用した Kubernetes
helm repo add appsmith https://helm.appsmith.com
helm install appsmith appsmith/appsmith -n appsmith --create-namespace
Git 同期
# バージョン管理のために Appsmith を Git に接続します
# Settings → Git Connection → Connect to Git Repository
# サポート: GitHub, GitLab, Bitbucket
# ワークフロー:
# 1. フィーチャーブランチで開発します
# 2. Appsmith UI から変更をコミットします
# 3. レビューのために PR を作成します
# 4. マージ → 本番インスタンスへの自動デプロイ
例
例 1: ユーザーが appsmith のセットアップを依頼
ユーザー: "プロジェクトのために appsmith をセットアップするのを手伝ってください"
エージェントは以下を行う必要があります:
- システム要件と前提条件を確認します
- appsmith をインストールまたは構成します
- 初期プロジェクト構造をセットアップします
- セットアップが正しく動作することを確認します
例 2: ユーザーが appsmith で機能を構築することを依頼
ユーザー: "appsmith を使用してダッシュボードを作成してください"
エージェントは以下を行う必要があります:
- コンポーネントまたは構成をスキャフォールドします
- 適切なデータソースに接続します
- 要求された機能を実装します
- 出力をテストおよび検証します
ガイドライン
- セキュリティのためにセルフホスト — Appsmith はオープンソースです。データがネットワークから出られない場合は、インフラストラクチャでセルフホストしてください
- ロジックには JSObjects — ビジネスロジックをウィジェットイベントハンドラーではなく、JSObjects に保持します。テストと再利用が容易になります
- チームには Git 同期 — バージョン管理のために Git に接続します。コードのように PR でアプリの変更をレビューします
- プリペアドステートメント — Appsmith は SQL に対してデフォルトでプリペアドステートメントを使用します。SQL インジェクションを防止します
- 環境 — 開発/ステージング/本番データベースの URL には、Appsmith の環境変数を使用します
- きめ細かい権限 — ロールベースのアクセス制御を使用します。破壊的なクエリを表示/編集/実行できるユーザーを制限します
- 再利用可能なウィジェット — 一般的なパターン (検索 + テーブル + ページネーション) を再利用可能なテンプレートに抽出します
- 監査証跡 — コンプライアンスのために監査ログを有効にします。誰がいつ何をしたかを追跡します
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
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
// 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)
// 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
# 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
# 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:
- Check system requirements and prerequisites
- Install or configure appsmith
- Set up initial project structure
- Verify the setup works correctly
Example 2: User asks to build a feature with appsmith
User: "Create a dashboard using appsmith"
The agent should:
- Scaffold the component or configuration
- Connect to the appropriate data source
- Implement the requested feature
- Test and validate the output
Guidelines
- Self-host for security — Appsmith is open-source; self-host on your infrastructure when data can't leave your network
- JSObjects for logic — Keep business logic in JSObjects, not in widget event handlers; easier to test and reuse
- Git sync for teams — Connect to Git for version control; review app changes in PRs like code
- Prepared statements — Appsmith uses prepared statements by default for SQL; prevents SQL injection
- Environments — Use Appsmith's environment variables for dev/staging/prod database URLs
- Granular permissions — Use role-based access control; limit who can view/edit/run destructive queries
- Reusable widgets — Extract common patterns (search + table + pagination) into reusable templates
- Audit trail — Enable audit logging for compliance; track who did what and when