@stellisoft/stellify-mcp 0.1.22 → 0.1.24

package/dist/index.js

@@ -72,6 +72,10 @@ Use this tool when you need to:
 - Verify method names before generating code
 - Understand the full API surface
 
+IMPORTANT - Stellify Framework Import:
+The npm package is "stellify-framework" (NOT @stellify/core).
+Import like: import { Http, List, Form } from 'stellify-framework';
+
 IMPORTANT - List class and Vue reactivity:
 The List class methods return List instances, NOT plain arrays.
 Vue's v-for directive cannot iterate over List instances directly.
@@ -837,12 +841,20 @@ Examples:
         inputSchema: {
             type: 'object',
             properties: {
+                file: {
+                    type: 'string',
+                    description: 'UUID of the file containing the statement',
+                },
+                method: {
+                    type: 'string',
+                    description: 'UUID of the method containing the statement (use "file" for file-level statements)',
+                },
                 uuid: {
                     type: 'string',
                     description: 'UUID of the statement to delete',
                 },
             },
-            required: ['uuid'],
+            required: ['file', 'method', 'uuid'],
         },
     },
     {
@@ -1390,14 +1402,22 @@ Key concepts:
 
 ## Vue Component Workflow
 
-1. get_project → find 'js' directory UUID
-2. create_file → type='js', extension='vue'
-3. Create statements for imports: "import { ref } from 'vue';" (REQUIRED for ref())
+1. get_project → find 'js' directory UUID (or create it)
+2. create_file → type='js', extension='vue' for the component
+3. Create statements for imports:
+   - "import { ref } from 'vue';" (REQUIRED for ref())
+   - "import { Http, List } from 'stellify-framework';" (for Stellify classes)
+   NOTE: The npm package is "stellify-framework" (NOT @stellify/core)
 4. Create statements for data: "const count = ref(0);"
 5. create_method + add_method_body → functions
 6. html_to_elements → template (no 'page' param for components)
 7. update_element → wire click handlers to method UUIDs
 8. save_file with: extension='vue', template=[elementUuid], data=[methodUuids], statements=[importUuids, refUuids]
+9. **MANDATORY: Create app.js entry file** (see "CRITICAL: JavaScript Entry File" section below)
+10. Create web route for the page
+11. **MANDATORY: Add a div with id="app"** to the page using html_to_elements:
+    - html_to_elements with page=routeUuid and elements='<div id="app"></div>'
+    - This is where Vue mounts the component. Without it, nothing renders!
 
 ## Real-Time UI (broadcast_element_command)
 
@@ -1406,6 +1426,9 @@ Use html_to_elements/update_element for permanent/saved changes.
 
 ## Common Pitfalls
 
+- **Stellify imports:** Use "stellify-framework" package (NOT @stellify/core)
+  CORRECT: import { Http, List, Form } from 'stellify-framework';
+  WRONG: import { Http } from '@stellify/core';
 - v-model requires ref(), NOT Form class: const formData = ref({title: ''})
 - List.from() returns List, not array - use .toArray() for v-for
 - add_method_body APPENDS, doesn't replace - create new method to replace
@@ -1446,11 +1469,58 @@ When building features, group related files by passing a "module" parameter.
 - create_file(..., module: "blog-posts") - auto-groups file
 - create_route(..., module: "blog-posts") - auto-groups route
 
-Modules are auto-created if they don't exist. This helps users see all code related to a feature grouped together.`;
+Modules are auto-created if they don't exist. This helps users see all code related to a feature grouped together.
+
+## CRITICAL: JavaScript Entry File (app.js)
+
+**You MUST have a JS entry file to register Vue components for use on pages.**
+
+### First component in a project:
+1. Create app.js in the 'js' directory with the component in includes array:
+   - create_file with type='js', extension='js', name='app', includes=[component-file-uuid]
+2. Add statements for NAMED imports only:
+   - "import { createApp } from 'vue';"
+   - "createApp(NotesApp).mount('#app');"
+   NOTE: The component import (NotesApp) is handled by the includes array, NOT a statement!
+3. save_file with statement UUIDs
+
+### Adding more components (app.js already exists):
+1. **search_files** for "app" to find existing app.js
+2. **get_file** to retrieve current includes and statements
+3. Add the new component UUID to the includes array via save_file
+4. Update the mount code to register the new component:
+   - Create new statement: "app.component('Counter', Counter);"
+5. save_file with updated includes and statements arrays
+
+**DO NOT create duplicate app.js files or duplicate createApp imports!**
+**DO NOT use statements for file imports - use the includes array!**
+
+### Page mount point (div#app):
+Each page that uses Vue components needs a \`<div id="app"></div>\`.
+
+- **First time on a page:** html_to_elements(page=routeUuid, elements='<div id="app"></div>')
+- **Page already has it:** Do NOT add another one. Check with get_route first if unsure.
+
+**Without app.js AND div#app, Vue components will NOT render!**
+
+### Import types summary:
+- **File imports (components, classes):** Use \`includes\` array with file UUIDs
+- **Named imports (vue, stellify-framework):** Use statements with add_statement_code
+
+Example app.js structure:
+- includes: [notesAppFileUuid, counterFileUuid]
+- statements: ["import { createApp } from 'vue';", "const app = createApp({});", "app.component('NotesApp', NotesApp);", "app.component('Counter', Counter);", "app.mount('#app');"]
+
+## Efficiency Tips
+
+- **Move elements between routes:** Use \`update_element\` to change \`routeParent\` - don't delete/recreate
+- **Reparent elements:** Update \`parent\` attribute instead of recreating
+- **Reorder children:** Update parent's \`data\` array with new UUID order
+- Always prefer updating over deleting and recreating`;
 // Create MCP server
 const server = new Server({
     name: 'stellify-mcp',
-    version: '0.1.22',
+    version: '0.1.24',
 }, {
     capabilities: {
         tools: {},
@@ -1875,8 +1945,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 };
             }
             case 'delete_statement': {
-                const { uuid } = args;
-                const result = await stellify.deleteStatement(uuid);
+                const { file, method, uuid } = args;
+                const result = await stellify.deleteStatement(file, method, uuid);
                 return {
                     content: [
                         {
@@ -1892,7 +1962,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             }
             case 'save_statement': {
                 const { uuid, ...data } = args;
-                const result = await stellify.saveStatement(uuid, data);
+                const result = await stellify.saveStatement(uuid, { uuid, ...data });
                 return {
                     content: [
                         {

package/dist/stellify-client.d.ts

@@ -85,7 +85,7 @@ export declare class StellifyClient {
         method?: string;
     }): Promise<any>;
     getStatement(statement: string): Promise<any>;
-    deleteStatement(statement: string): Promise<any>;
+    deleteStatement(file: string, method: string, statement: string): Promise<any>;
     saveStatement(statement: string, data: any): Promise<any>;
     createRoute(params: CreateRouteParams): Promise<any>;
     getRoute(route: string): Promise<any>;

package/dist/stellify-client.js

@@ -67,8 +67,8 @@ export class StellifyClient {
         const response = await this.client.get(`/statement/${statement}`);
         return response.data;
     }
-    async deleteStatement(statement) {
-        const response = await this.client.delete(`/statement/${statement}`);
+    async deleteStatement(file, method, statement) {
+        const response = await this.client.delete(`/statement/${file}/${method}/${statement}`);
         return response.data;
     }
     async saveStatement(statement, data) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellisoft/stellify-mcp",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "mcpName": "io.github.MattStellisoft/stellify-mcp",
   "description": "MCP server for Stellify - AI-native code generation platform",
   "main": "dist/index.js",

package/server.json

@@ -6,12 +6,12 @@
     "url": "https://github.com/Stellify-Software-Ltd/stellify-mcp",
     "source": "github"
   },
-  "version": "0.1.22",
+  "version": "0.1.24",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "@stellisoft/stellify-mcp",
-      "version": "0.1.22",
+      "version": "0.1.24",
       "transport": {
         "type": "stdio"
       },