@stellisoft/stellify-mcp 0.1.2 → 0.1.7

package/test-html-conversion.js

@@ -0,0 +1,117 @@
+import { StellifyClient } from './dist/stellify-client.js';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const client = new StellifyClient({
+  apiUrl: process.env.STELLIFY_API_URL,
+  apiToken: process.env.STELLIFY_API_TOKEN,
+});
+
+const PROJECT_ID = 'b11ba1ac-ad5e-45c7-8285-57f0b7aa0196';
+
+async function testHtmlConversion() {
+  console.log('Testing HTML to Elements Conversion\n');
+
+  try {
+    // Step 1: Create a route
+    console.log('1. Creating test route...');
+    const timestamp = Date.now();
+    const route = await client.createRoute({
+      project_id: PROJECT_ID,
+      name: `HTML Test ${timestamp}`,
+      path: `/html-test-${timestamp}`,
+      method: 'GET',
+      type: 'web',
+    });
+    console.log('✅ Route created:', route.data.uuid);
+    console.log('');
+
+    // Step 2: Test preview mode first
+    console.log('2. Testing preview mode (test: true)...');
+    const html = `
+      <div class="container mx-auto p-8">
+        <h1 class="text-3xl font-bold mb-4">Contact Form</h1>
+        <form method="POST" action="/api/contact" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium mb-2">Email</label>
+            <input type="email" name="email" placeholder="your@email.com" required class="form-input w-full" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-2">Message</label>
+            <textarea name="message" rows="4" placeholder="Your message..." class="form-textarea w-full"></textarea>
+          </div>
+          <button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
+            Send Message
+          </button>
+        </form>
+      </div>
+    `;
+
+    const preview = await client.htmlToElements({
+      elements: html,
+      page: route.data.uuid,
+      test: true,
+    });
+    console.log('✅ Preview generated:');
+    console.log('   Elements created:', Object.keys(preview.data).length);
+    console.log('   Root element:', Object.values(preview.data)[0].tag);
+    console.log('');
+
+    // Step 3: Actually create the elements
+    console.log('3. Converting HTML to real elements...');
+    const result = await client.htmlToElements({
+      elements: html,
+      page: route.data.uuid,
+      test: false,
+    });
+    console.log('✅ Result:', JSON.stringify(result, null, 2));
+
+    if (!result.data || Object.keys(result.data).length === 0) {
+      console.log('❌ No elements were created');
+      return;
+    }
+
+    console.log('✅ Elements created:', Object.keys(result.data).length);
+    console.log('');
+
+    // Step 4: Get the element tree to verify structure
+    console.log('4. Verifying created structure...');
+    const rootUuid = Object.keys(result.data)[0];
+    const tree = await client.getElementTree(rootUuid);
+
+    function printTree(element, indent = '') {
+      const tag = element.tag || 'unknown';
+      const classes = element.classes ? ` [${element.classes.join(' ')}]` : '';
+      const text = element.text ? ` "${element.text}"` : '';
+      console.log(`${indent}${tag}${classes}${text}`);
+
+      if (element.children) {
+        element.children.forEach(child => printTree(child, indent + '  '));
+      }
+    }
+
+    console.log('✅ Element hierarchy:');
+    printTree(tree.data);
+    console.log('');
+
+    console.log('🎉 HTML conversion working perfectly!');
+    console.log('\n📋 What This Means:');
+    console.log('   ✅ Write complete HTML structures');
+    console.log('   ✅ All attributes preserved');
+    console.log('   ✅ Proper nesting maintained');
+    console.log('   ✅ Single API call creates everything');
+    console.log('   ✅ Can preview before creating');
+    console.log('\n🚀 This is THE fastest way to build interfaces!');
+
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    if (error.response) {
+      console.error('Response data:', JSON.stringify(error.response.data, null, 2));
+      console.error('Response status:', error.response.status);
+    }
+    process.exit(1);
+  }
+}
+
+testHtmlConversion();

package/test-read-delete.js

@@ -0,0 +1,133 @@
+import { StellifyClient } from './dist/stellify-client.js';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const client = new StellifyClient({
+  apiUrl: process.env.STELLIFY_API_URL,
+  apiToken: process.env.STELLIFY_API_TOKEN,
+});
+
+const PROJECT_ID = 'b11ba1ac-ad5e-45c7-8285-57f0b7aa0196';
+
+async function testReadDelete() {
+  console.log('Testing Read, Search, and Delete Operations\n');
+
+  try {
+    // Step 1: Create test elements
+    console.log('1. Creating test page with elements...');
+    const timestamp = Date.now();
+    const route = await client.createRoute({
+      project_id: PROJECT_ID,
+      name: `Test CRUD ${timestamp}`,
+      path: `/test-crud-${timestamp}`,
+      method: 'GET',
+      type: 'web',
+    });
+    console.log('✅ Route created:', route.data.uuid);
+
+    const container = await client.createElement({
+      page: route.data.uuid,
+      type: 's-wrapper',
+    });
+    await client.updateElement(container.data.uuid, {
+      name: 'Container',
+      tag: 'div',
+      classes: ['container', 'mx-auto'],
+    });
+    console.log('✅ Container created:', container.data.uuid);
+
+    const button1 = await client.createElement({
+      parent: container.data.uuid,
+      type: 's-wrapper',
+    });
+    await client.updateElement(button1.data.uuid, {
+      name: 'Button 1',
+      tag: 'button',
+      text: 'Click Me',
+    });
+
+    const button2 = await client.createElement({
+      parent: container.data.uuid,
+      type: 's-wrapper',
+    });
+    await client.updateElement(button2.data.uuid, {
+      name: 'Button 2',
+      tag: 'button',
+      text: 'Cancel',
+    });
+    console.log('✅ Created 2 buttons');
+    console.log('');
+
+    // Step 2: Get single element
+    console.log('2. Testing get_element...');
+    const element = await client.getElement(container.data.uuid);
+    console.log('✅ Retrieved element:');
+    console.log('   Name:', element.data.name);
+    console.log('   Tag:', element.data.tag);
+    console.log('   Classes:', element.data.classes);
+    console.log('');
+
+    // Step 3: Get element tree
+    console.log('3. Testing get_element_tree...');
+    const tree = await client.getElementTree(container.data.uuid);
+    console.log('✅ Retrieved element tree:');
+    console.log('   Root:', tree.data.name);
+    console.log('   Children:', tree.data.children ? tree.data.children.length : 0);
+    if (tree.data.children) {
+      tree.data.children.forEach((child, i) => {
+        console.log(`     ${i+1}. ${child.name} (${child.tag}): "${child.text}"`);
+      });
+    }
+    console.log('');
+
+    // Step 4: Search elements
+    console.log('4. Testing search_elements...');
+    const searchResults = await client.searchElements({
+      search: 'Button',
+      per_page: 10,
+    });
+    console.log('✅ Search results:');
+    console.log('   Found:', searchResults.data.length, 'elements');
+    console.log('   Total in project:', searchResults.pagination.total);
+    searchResults.data.slice(0, 3).forEach((el, i) => {
+      console.log(`     ${i+1}. ${el.name || 'Unnamed'} (${el.type})`);
+    });
+    console.log('');
+
+    // Step 5: Delete element
+    console.log('5. Testing delete_element (deleting button 2)...');
+    const deleteResult = await client.deleteElement(button2.data.uuid);
+    console.log('✅ Deleted:', deleteResult.deleted_count, 'element(s)');
+    console.log('');
+
+    // Step 6: Verify deletion by getting tree again
+    console.log('6. Verifying deletion...');
+    const updatedTree = await client.getElementTree(container.data.uuid);
+    console.log('✅ Updated tree:');
+    console.log('   Children remaining:', updatedTree.data.children ? updatedTree.data.children.length : 0);
+    if (updatedTree.data.children) {
+      updatedTree.data.children.forEach((child, i) => {
+        console.log(`     ${i+1}. ${child.name}`);
+      });
+    }
+    console.log('');
+
+    console.log('🎉 All read/delete operations working!');
+    console.log('\n📋 Capabilities Verified:');
+    console.log('   ✅ get_element - Read single element');
+    console.log('   ✅ get_element_tree - Read element hierarchy');
+    console.log('   ✅ search_elements - Find elements by criteria');
+    console.log('   ✅ delete_element - Remove elements (with CASCADE)');
+
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    if (error.response) {
+      console.error('Response data:', JSON.stringify(error.response.data, null, 2));
+      console.error('Response status:', error.response.status);
+    }
+    process.exit(1);
+  }
+}
+
+testReadDelete();

package/.mcpregistry_github_token

@@ -1 +0,0 @@
-ghu_3W7vsOlZ9o23SbW83wQm9s5XntKI8D4KxkzX

package/.mcpregistry_registry_token

@@ -1 +0,0 @@
-{"token":"eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJtY3AtcmVnaXN0cnkiLCJleHAiOjE3Njc5OTk0MTcsIm5iZiI6MTc2Nzk5OTExNywiaWF0IjoxNzY3OTk5MTE3LCJhdXRoX21ldGhvZCI6ImdpdGh1Yi1hdCIsImF1dGhfbWV0aG9kX3N1YiI6Ik1hdHRTdGVsbGlzb2Z0IiwicGVybWlzc2lvbnMiOlt7ImFjdGlvbiI6InB1Ymxpc2giLCJyZXNvdXJjZSI6ImlvLmdpdGh1Yi5NYXR0U3RlbGxpc29mdC8qIn1dfQ.0rIqxME0TcokcAmBXE8lk0joXzIo0Fty4-D0tA3X6jkrL1OjYsQtuB0PJYbSwRoxRvvGgIsTFXskr28WEkd5Bg","expires_at":1767999417}

package/ANNOUNCEMENTS.md

@@ -1,322 +0,0 @@
-# Stellify MCP Server Launch Announcements
-
-## Twitter/X (280 characters)
-
-🚀 Just launched Stellify MCP Server - build Laravel apps through natural conversation with Claude!
-
-Store code as structured JSON for surgical AI edits, instant refactoring & version control at the statement level.
-
-Try it: npm install -g @stellisoft/stellify-mcp
-
-https://github.com/Stellify-Software-Ltd/stellify-mcp
-
-#AI #Laravel #Claude #AITooling
-
----
-
-## LinkedIn Post
-
-🎉 Excited to announce the launch of Stellify MCP Server!
-
-We've just released an open-source Model Context Protocol (MCP) server that lets you build Laravel applications through natural conversation with Claude Desktop.
-
-🔥 What makes Stellify different?
-
-Instead of text files, Stellify stores your code as structured JSON in a database. This enables:
-
-✅ Surgical precision - AI modifies specific methods without touching other code
-✅ Query your codebase like data - Find all methods using a specific class
-✅ Instant refactoring - Rename across your entire app instantly
-✅ Statement-level version control - Track changes granularly
-✅ AI-native development - Give AI access without breaking existing code
-
-🚀 Get Started:
-```
-npm install -g @stellisoft/stellify-mcp
-```
-
-Then configure Claude Desktop and start building Laravel apps through conversation.
-
-📦 npm: https://www.npmjs.com/package/@stellisoft/stellify-mcp
-🔧 GitHub: https://github.com/Stellify-Software-Ltd/stellify-mcp
-📖 Docs: https://stellisoft.com/docs
-
-This is just the beginning. We're building the future of AI-native software development where code is data, and collaboration between humans and AI is seamless.
-
-Would love your feedback! Try it out and let me know what you think.
-
-#Laravel #AI #SoftwareDevelopment #OpenSource #Claude #Anthropic #WebDevelopment #PHP
-
----
-
-## Reddit (r/laravel, r/PHP, r/ClaudeAI)
-
-**Title:** [Release] Stellify MCP Server - Build Laravel Apps Through Conversation with Claude
-
-**Body:**
-
-Hey everyone! 👋
-
-I'm excited to share something I've been working on - an MCP (Model Context Protocol) server that lets you build Laravel applications through natural conversation with Claude Desktop.
-
-## What is this?
-
-Stellify MCP Server bridges Claude Desktop with Stellify, an AI-native code generation platform. Instead of working with text files, Stellify stores your Laravel code as structured JSON in a database.
-
-## Why does this matter?
-
-**Traditional approach:**
-- AI generates entire files at once
-- Hard to make surgical changes
-- Easy to break existing code
-- No granular version control
-
-**With Stellify:**
-- Create files incrementally (classes, controllers, models)
-- Add methods one at a time with type hints
-- Parse PHP code statement-by-statement
-- Query your codebase like data
-- Instant refactoring across your entire app
-- Version control at the statement level
-
-## Quick Start
-
-```bash
-# Install globally
-npm install -g @stellisoft/stellify-mcp
-
-# Configure Claude Desktop (see repo for details)
-# Then just talk naturally:
-# "Create a UserController in my Stellify project"
-# "Add a store method that validates and saves a user"
-```
-
-## Example Conversation
-
-```
-You: "Create a UserController with a store method"
-Claude: [Creates controller structure]
-
-You: "Add validation for email and password"
-Claude: [Adds validated request handling]
-
-You: "Now add the logic to save the user and return JSON"
-Claude: [Implements the logic]
-```
-
-All code is parsed into structured JSON and stored in a database, giving you surgical control and the ability to query/refactor at scale.
-
-## Links
-
-- 📦 **npm:** https://www.npmjs.com/package/@stellisoft/stellify-mcp
-- 🔧 **GitHub:** https://github.com/Stellify-Software-Ltd/stellify-mcp
-- 📖 **Stellify:** https://stellisoft.com
-
-This is v0.1.1 - the first public release. I'd love to hear your feedback and any features you'd like to see!
-
----
-
-## Hacker News
-
-**Title:** Stellify MCP Server – Build Laravel apps through conversation with Claude
-
-**URL:** https://github.com/Stellify-Software-Ltd/stellify-mcp
-
-**Comment to add context:**
-
-Author here. I built this MCP server for Stellify, a platform where code is stored as structured JSON instead of text files.
-
-The key insight: when you store code as data, you can query it like data. Want to find every method that calls a specific function? Just query the database. Want to rename a method across your entire app? Update one record.
-
-For AI, this means surgical precision. Instead of regenerating entire files (and potentially breaking things), AI can modify individual statements. It's like giving AI a scalpel instead of a sledgehammer.
-
-The MCP server lets Claude Desktop interact with Stellify projects, so you can build Laravel apps through natural conversation while maintaining fine-grained control.
-
-Would love feedback from the HN community. What other languages/frameworks would you want to see this for?
-
----
-
-## Dev.to Article
-
-**Title:** Introducing Stellify MCP Server: Build Laravel Apps Through Conversation
-
-**Tags:** #laravel #ai #claude #php #opensource
-
-**Article:**
-
-# Introducing Stellify MCP Server: Build Laravel Apps Through Conversation
-
-Have you ever wished you could just _describe_ what you want your code to do, and have it built incrementally with precision? That's exactly what Stellify MCP Server enables.
-
-## The Problem with Traditional AI Coding
-
-When AI generates code, it typically:
-1. Generates entire files at once
-2. Can't make surgical changes to existing code
-3. Lacks context about your project structure
-4. Can easily break working code
-
-## The Stellify Approach
-
-Stellify takes a different approach: **code as structured data**.
-
-Instead of storing your Laravel application as text files, Stellify stores it as JSON in a database. Each class, method, statement, and even operator has its own database record with metadata.
-
-This enables:
-
-- **Surgical Precision:** AI modifies specific methods without touching other code
-- **Query Your Codebase:** Find all methods using a specific class with a database query
-- **Instant Refactoring:** Rename a method across your entire app by updating one record
-- **Statement-Level Version Control:** Track changes at the granular level
-- **AI-Native Development:** Give AI access without worrying about breaking things
-
-## How It Works
-
-The MCP (Model Context Protocol) server acts as a bridge between Claude Desktop and your Stellify projects.
-
-### Installation
-
-```bash
-npm install -g @stellisoft/stellify-mcp
-```
-
-### Configuration
-
-Add to your Claude Desktop config:
-
-```json
-{
-  "mcpServers": {
-    "stellify": {
-      "command": "stellify-mcp",
-      "env": {
-        "STELLIFY_API_URL": "https://api.stellisoft.com/v1",
-        "STELLIFY_API_TOKEN": "your-token"
-      }
-    }
-  }
-}
-```
-
-### Usage
-
-Just talk naturally to Claude:
-
-**You:** "Create a UserController in my Stellify project"
-
-**Claude:** [Creates the controller structure]
-
-**You:** "Add a store method that validates email and password, then saves the user"
-
-**Claude:** [Creates method signature, adds validation, implements save logic]
-
-**You:** "Return a JSON response with the created user"
-
-**Claude:** [Adds the return statement]
-
-Every step is parsed into structured JSON and stored precisely in the database.
-
-## What's Inside?
-
-The MCP server provides these tools to Claude:
-
-- `create_file` - Create classes, controllers, models, middleware
-- `create_method` - Add method signatures with parameters and return types
-- `add_method_body` - Parse and store PHP code statement-by-statement
-- `search_files` - Find files in your project
-- `search_methods` - Find methods by name or signature
-
-## The Future
-
-This is just v0.1.1 - the beginning. Future plans include:
-
-- Global method library (reuse battle-tested code across projects)
-- Support for more frameworks (React, Vue, Node.js)
-- Rich metadata extraction (complexity analysis, dependencies)
-- Team collaboration features
-- Visual code editor integrated with the database
-
-## Try It Out
-
-- 📦 npm: https://www.npmjs.com/package/@stellisoft/stellify-mcp
-- 🔧 GitHub: https://github.com/Stellify-Software-Ltd/stellify-mcp
-- 📖 Docs: https://stellisoft.com/docs
-
-I'd love to hear your thoughts! What would you build with this?
-
----
-
-## Product Hunt
-
-**Tagline:** Build Laravel apps through conversation with Claude Desktop
-
-**Description:**
-
-Stellify MCP Server lets you build Laravel applications through natural conversation with Claude Desktop. Unlike traditional AI coding tools, Stellify stores code as structured JSON in a database, enabling surgical precision, instant refactoring, and query-like access to your entire codebase.
-
-**Key Features:**
-• Create files, methods, and code incrementally
-• AI modifies specific methods without touching other code
-• Query your codebase like data
-• Statement-level version control
-• Open source & free to use
-
-**What makes us different:**
-Most AI coding tools work with text files, leading to imprecise changes and broken code. Stellify stores code as structured data, giving AI (and you) surgical control over every statement, method, and class.
-
-**Getting Started:**
-```
-npm install -g @stellisoft/stellify-mcp
-```
-Configure Claude Desktop, then start building through conversation!
-
----
-
-## Email Template (for Laravel newsletters, dev communities)
-
-**Subject:** New MCP Server: Build Laravel Apps Through Conversation with Claude
-
-**Body:**
-
-Hi [Community],
-
-I'm excited to share Stellify MCP Server - a new way to build Laravel applications through natural conversation with Claude Desktop.
-
-**What's different?**
-
-Instead of text files, Stellify stores your code as structured JSON in a database. This means:
-
-✓ AI can modify specific methods without breaking other code
-✓ You can query your entire codebase like data
-✓ Refactoring happens instantly across your whole app
-✓ Version control works at the statement level
-
-**Quick Example:**
-
-```
-You: "Create a PostController with CRUD methods"
-Claude: [Creates controller structure]
-
-You: "Add validation to the store method"
-Claude: [Adds FormRequest validation]
-
-You: "Search for all methods that use the Post model"
-Claude: [Returns searchable results from your database]
-```
-
-**Try it out:**
-
-```bash
-npm install -g @stellisoft/stellify-mcp
-```
-
-Then configure Claude Desktop (instructions in the repo) and start building!
-
-📦 npm: https://www.npmjs.com/package/@stellisoft/stellify-mcp
-🔧 GitHub: https://github.com/Stellify-Software-Ltd/stellify-mcp
-
-This is v0.1.1 - the first public release. I'd love your feedback!
-
-Best regards,
-The Stellify Team
-https://stellisoft.com

package/REGISTRY_SUBMISSIONS.md

@@ -1,117 +0,0 @@
-# MCP Registry Submissions Guide
-
-## Status
-
-✅ **npm Published**: Package is live at https://www.npmjs.com/package/@stellisoft/stellify-mcp
-✅ **GitHub Published**: Repository at https://github.com/Stellify-Software-Ltd/stellify-mcp
-🔄 **Auto-indexing**: mcpdir should automatically detect via npm `mcp` keyword
-
-## 1. Official MCP Registry
-
-**Website**: https://registry.modelcontextprotocol.io/
-**GitHub**: https://github.com/modelcontextprotocol/registry
-
-### Submission Steps:
-
-1. **Install the publisher CLI:**
-   ```bash
-   git clone https://github.com/modelcontextprotocol/registry.git
-   cd registry
-   make publisher
-   ./bin/mcp-publisher --help
-   ```
-
-2. **Authenticate:**
-   Choose one method:
-   - **GitHub OAuth**: For manual publishing
-   - **GitHub OIDC**: For automated GitHub Actions publishing
-   - **DNS/HTTP verification**: For custom domain ownership
-
-3. **Publish:**
-   ```bash
-   ./bin/mcp-publisher publish
-   ```
-
-4. **Namespace Ownership:**
-   Since our package is `@stellisoft/stellify-mcp`, we need to verify:
-   - GitHub user/org: `Stellify-Software-Ltd`
-   - Package: `stellify-mcp`
-
-### Documentation:
-- Full guide: Check "publisher guide" in registry docs
-- API docs: https://registry.modelcontextprotocol.io/docs
-- GitHub Discussions: For help and questions
-
-## 2. MCP Directory (mcpdir)
-
-**Website**: https://mcpdir.dev
-**GitHub**: https://github.com/eL1fe/mcpdir
-
-### Automatic Indexing:
-
-✅ **Already configured!** Our package will be automatically indexed because:
-- Published to npm with `mcp` keyword in package.json
-- GitHub repo tagged appropriately
-- Meets MCP protocol standards
-
-### Manual Submission (if needed):
-
-1. Visit: https://mcpdir.dev/submit
-2. Fill out the submission form with:
-   - Package name: `@stellisoft/stellify-mcp`
-   - Repository: https://github.com/Stellify-Software-Ltd/stellify-mcp
-   - npm link: https://www.npmjs.com/package/@stellisoft/stellify-mcp
-   - Description and features
-
-3. Validation process includes:
-   - Docker-based testing for protocol compliance
-   - MCP handshake verification
-   - Capability discovery (tools, resources, prompts)
-
-## 3. Other Directories to Consider
-
-### Anthropic's Official Servers List
-**GitHub**: https://github.com/modelcontextprotocol/servers
-
-This is for reference servers maintained by the MCP steering group. We can submit a PR to add Stellify to their community list if they have one.
-
-### PulseMCP
-Mentioned as a community directory - check their website for submission process.
-
-### Glama.ai
-Another MCP directory that feeds into mcpdir - may auto-index or require manual submission.
-
-## 4. Community Promotion
-
-Once listed in registries, promote in:
-
-- [x] Reddit r/ClaudeAI
-- [x] Reddit r/laravel
-- [x] Dev.to article
-- [x] Twitter/X announcement
-- [x] LinkedIn post
-- [x] Product Hunt launch
-- [x] Hacker News
-- [x] Laravel newsletters
-
-## Next Steps
-
-1. **Submit to Official MCP Registry** using publisher CLI (priority)
-2. **Check mcpdir** after 24-48 hours to see if auto-indexed
-3. **Manual submit to mcpdir** if not auto-detected
-4. **Post announcements** on social media and dev communities
-5. **Monitor** GitHub issues and npm for user feedback
-
-## Verification
-
-After 48 hours, verify listings:
-- [ ] Search "Stellify" on https://registry.modelcontextprotocol.io/
-- [ ] Search "Stellify" on https://mcpdir.dev
-- [ ] Check npm weekly download stats
-- [ ] Monitor GitHub stars and issues
-
-## Support Channels
-
-- GitHub Issues: https://github.com/Stellify-Software-Ltd/stellify-mcp/issues
-- Email: support@stellisoft.com
-- Documentation: https://stellisoft.com/docs