feat: AI Integration

agents.md

@@ -0,0 +1,34 @@
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly

claude.md

@@ -0,0 +1,34 @@
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly

frontend/components.d.ts

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AIChatPanel: typeof import('./src/components/AIChatPanel.vue')['default']
     AppComponent: typeof import('./src/components/AppComponent.vue')['default']
     AppDialog: typeof import('./src/components/AppDialog.vue')['default']
     AppHeader: typeof import('./src/components/AppLayout/AppHeader.vue')['default']
@@ -96,6 +97,7 @@ declare module 'vue' {
     StudioLeftPanel: typeof import('./src/components/StudioLeftPanel.vue')['default']
     StudioLogo: typeof import('./src/components/Icons/StudioLogo.vue')['default']
     StudioRightPanel: typeof import('./src/components/StudioRightPanel.vue')['default']
+    StudioSettingsDialog: typeof import('./src/components/StudioSettingsDialog.vue')['default']
     StudioToolbar: typeof import('./src/components/StudioToolbar.vue')['default']
     TextBlock: typeof import('./src/components/AppLayout/TextBlock.vue')['default']
   }