@stellisoft/stellify-mcp 0.1.22 → 0.1.23

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.
@@ -1390,14 +1394,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 +1418,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 +1461,63 @@ 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:
+   - create_file with type='js', extension='js', name='app'
+2. Add statements:
+   - "import { createApp } from 'vue';"
+   - "import NotesApp from './NotesApp.vue';"
+   - "createApp(NotesApp).mount('#app');"
+3. save_file with all 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 statements
+3. Add ONLY the new import statement:
+   - "import Counter from './Counter.vue';"
+4. Update the mount code to register the new component:
+   - Create new statement: "app.component('Counter', Counter);"
+   - Or recreate the initialization to include all components
+5. save_file with updated statements array
+
+**DO NOT create duplicate app.js files or duplicate createApp imports!**
+
+### 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!**
+
+Example app.js with multiple components:
+\`\`\`javascript
+import { createApp } from 'vue';
+import NotesApp from './NotesApp.vue';
+import Counter from './Counter.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.23',
 }, {
     capabilities: {
         tools: {},
@@ -1892,7 +1959,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellisoft/stellify-mcp",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "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.23",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "@stellisoft/stellify-mcp",
-      "version": "0.1.22",
+      "version": "0.1.23",
       "transport": {
         "type": "stdio"
       },