Build your first app

my-dashboard/
├── app.json                 ← manifest (required)
├── agents/
│   └── sample-agent.json    ← agent definition
├── skills/
│   └── sample-skill/
│       └── SKILL.md         ← skill knowledge file
├── ui/                      ← frontend (if app has UI)
│   ├── package.json
│   ├── vite.config.ts
│   ├── src/App.tsx
│   └── .gitignore
└── README.md

{
  "name": "my-dashboard",
  "version": "0.1.0",
  "displayName": "My Dashboard",
  "description": "A Crew app: My Dashboard",
  "author": "yourname",
  "agents": ["agents/sample-agent.json"],
  "skills": ["skills/sample-skill"],
  "ui": {
    "entry": "dist/index.mjs",
    "pages": [
      {
        "route": "/apps/my-dashboard",
        "label": "My Dashboard",
        "icon": "Package"
      }
    ]
  },
  "permissions": {
    "api": ["/api/crons", "/api/status"],
    "events": ["notification"]
  }
}

import { useAppApi, useAppEvents } from '@kirocrew/app-sdk'
import { Card, CardTitle, PageHeader, StatCard } from '@kirocrew/app-sdk/ui'
import { useState, useEffect } from 'react'

export default function MyDashboard() {
  const api = useAppApi()
  const [data, setData] = useState(null)

  useEffect(() => {
    api.get('/api/status').then(setData)
  }, [])

  useAppEvents('notification', (event) => {
    console.log('New notification:', event)
  })

  return (
    <>
      <PageHeader title="My Dashboard" subtitle="Custom app page" />
      <div className="px-6 pb-8 overflow-y-auto flex-1 min-h-0">
        <div className="grid gap-3.5 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] mb-6">
          <StatCard label="Status" value={data ? 'Online' : '...'} accent />
        </div>
        <Card>
          <CardTitle>Content</CardTitle>
          <p className="text-sm text-muted">Your app content here.</p>
        </Card>
      </div>
    </>
  )
}

{
  "name": "my-agent",
  "model": "auto",
  "description": "Analyzes data and generates reports",
  "prompt": "You are a data analyst assistant.",
  "tools": ["@kirocrew-core"]
}

---
name: sample-skill
description: A sample skill that teaches the agent about my domain.
triggers: [sample, domain]
always: false
---

# Sample skill

When the user asks about the sample domain:

1. Do the domain-specific first thing
2. Then check for the domain-specific second thing
3. Return the result in the standard format

cd my-dashboard/ui
npm install
npm run build

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/App.tsx',
      formats: ['es'],
      fileName: 'index',
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime', 'lucide-react', /^@kirocrew\/app-sdk/],
    },
  },
})

# Install via REST API
curl -X POST http://localhost:5476/api/apps/install \
  -H 'Content-Type: application/json' \
  -d '{"source": "./my-dashboard"}'

# Enable
curl -X POST http://localhost:5476/api/apps/my-dashboard/enable

kirocrew app dev my-dashboard

ln -sfn /path/to/my-dashboard/ui ~/.kiro/crew/apps/my-dashboard/ui

{
  "backend": {
    "entryPoint": "backend/server.py",
    "port": "auto",
    "healthCheck": "/health",
    "routes": "/api/apps/my-dashboard",
    "type": "python"
  }
}

from kirocrew_client import verify_proxy_request
if not verify_proxy_request(request, 'my-dashboard'):
    return Response(status=401)

{
  "crons": [
    {
      "name": "daily-check",
      "cron_expr": "0 9 * * 1-5",
      "message": "Run the daily check for my-dashboard",
      "agent": "my-agent"
    }
  ]
}

{
  "setup": {
    "onInstall": "cd ui && npm install && npm run build",
    "onUpdate": "cd ui && npm install && npm run build"
  }
}