io.github.MattStellisoft/stellify-mcp
编码与调试by stellify-software-ltd
通过对话构建 Laravel 应用,代码以结构化 JSON 存储,便于 AI 进行精细、定点式修改。
什么是 io.github.MattStellisoft/stellify-mcp?
通过对话构建 Laravel 应用,代码以结构化 JSON 存储,便于 AI 进行精细、定点式修改。
README
Stellify MCP Server
Model Context Protocol (MCP) server for Stellify - the AI-native code generation platform.
What is This?
This MCP server lets AI assistants (like Claude Desktop) interact with your Stellify projects to build Laravel and Vue.js applications incrementally. Instead of generating full code files at once, AI can:
- Create file structures (classes, controllers, models, middleware, Vue components)
- Add method signatures with type hints
- Parse PHP/JavaScript code into structured JSON (statement-by-statement)
- Convert HTML to Stellify elements in a single operation
- Search existing code in your projects
- Install reusable code from the global library
- Build applications through natural conversation
Quick Start
Prerequisites
- Node.js 18 or higher
- A Stellify account - Sign up at stellisoft.com
- Claude Desktop (or another MCP-compatible AI client)
Installation
Install globally via npm:
npm install -g @stellisoft/stellify-mcp
Configuration
-
Get your Stellify API token:
- Log into Stellify
- Navigate to Settings → API Tokens
- Click "Create New Token"
- Copy your token
-
Configure Claude Desktop:
Edit your Claude Desktop configuration file:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json - Linux:
~/.config/claude/claude_desktop_config.json
Add the Stellify MCP server:
json{ "mcpServers": { "stellify": { "command": "stellify-mcp", "env": { "STELLIFY_API_URL": "https://api.stellisoft.com/v1", "STELLIFY_API_TOKEN": "your-token-here" } } } } - macOS:
-
Restart Claude Desktop
That's it! The Stellify tools should now be available in Claude Desktop.
Usage
Once configured, you can talk to Claude naturally to build applications:
Example Conversations
Create a new controller:
"Create a UserController in my Stellify project"
Add methods:
"Add a method called 'store' that takes a Request parameter and returns a JsonResponse"
Implement method logic:
"Add this implementation to the store method:
$user = User::create($request->validated());
return response()->json($user, 201);"
Build a Vue component:
"Create a Counter component with an increment button"
Convert HTML to elements:
"Convert this HTML to Stellify elements:
<div class='container'><h1>Hello</h1><button>Click me</button></div>"
Search your codebase:
"Search for all controller files in my project"
"Find methods related to authentication"
Available Tools
Project & Directory Tools
get_project
Get the active Stellify project for the authenticated user. Call this first before any other operations.
Parameters: None
Returns:
uuid: Project UUID (needed for most operations)name: Project namedirectories: Array of{uuid, name}for existing directories
get_directory
Get a directory by UUID to see its contents.
Parameters:
uuid(required): The UUID of the directory
create_directory
Create a new directory for organizing files.
Parameters:
name(required): Directory name (e.g., "js", "css", "components")
File Tools
create_file
Create a new file in a Stellify project. This creates an empty file shell - no methods, statements, or template yet.
Parameters:
directory(required): UUID of the directory (get fromget_projectdirectories array)name(required): File name without extension (e.g., "Counter", "UserController")type(required): File type - "class", "model", "controller", "middleware", or "js"extension(optional): File extension. Use "vue" for Vue components.namespace(optional): PHP namespace (e.g., "App\Services\"). Only for PHP files.includes(optional): Array of fully-qualified class names to import (e.g.,["App\\Models\\User", "Illuminate\\Http\\Request"]). Stellify will resolve these to file UUIDs, fetching from Laravel API or vendor directory if needed.
Directory selection: Match the directory to your file's purpose. If the directory doesn't exist, create it first with create_directory.
| File Type | Directory | Namespace |
|---|---|---|
| Controllers | controllers | App\Http\Controllers\ |
| Models | models | App\Models\ |
| Services | services | App\Services\ |
| Middleware | middleware | App\Http\Middleware\ |
| Vue/JS | js | N/A |
Example workflow:
create_file→ creates empty shell, returns file UUIDcreate_statement+add_statement_code→ add variables/importscreate_method+add_method_body→ add functionshtml_to_elements→ create template elements (for Vue)save_file→ finalize with all UUIDs wired together
Auto-dependency creation (when auto_create_dependencies: true):
When you create a file with code like:
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function store(Request $request)
{
$user = User::create($request->validated());
return response()->json($user);
}
}
Stellify will:
- Parse
usestatements to find dependencies (User,Request,Socialite) - Check Application DB for framework classes → find cached classes
- For core Laravel classes → fetch from api.laravel.com
- For vendor packages (Socialite, Spatie, etc.) → read from
vendor/directory - Create missing App classes → create
Usermodel file - Wire up the file's
includesarray with all dependency UUIDs
Supported sources:
- Laravel API - Core
Illuminate\*classes fetched from api.laravel.com - Vendor packages -
Laravel\Socialite\*,Laravel\Cashier\*,Spatie\*,Livewire\*, etc. read directly from yourvendor/directory using PHP-Parser
The response includes a dependencies report showing what was created/resolved and from which source.
get_file
Get a file by UUID with all its metadata, methods, and statements.
Parameters:
uuid(required): UUID of the file
save_file
Save/update a file with its full configuration. This finalizes the file after create_file.
Parameters:
uuid(required): UUID of the filename(required): File name (without extension)type(required): File type ("js", "class", "controller", "model", "middleware")extension(optional): File extension ("vue" for Vue SFCs)template(optional): Array of root element UUIDs for Vue<template>sectiondata(optional): Array of METHOD UUIDs only (functions)statements(optional): Array of STATEMENT UUIDs (imports, variables, refs)includes(optional): Array of file UUIDs to import
Important: data = method UUIDs only, statements = statement UUIDs (code outside methods)
search_files
Search for files in the project by name or type.
Parameters:
name(optional): File name pattern to search fortype(optional): File type filter
Method Tools
create_method
Create a method signature in a file (without implementation).
Parameters:
file(required): UUID of the file to add the method toname(required): Method name (e.g., "increment", "store", "handleClick")visibility(optional): "public", "protected", or "private" (PHP only, default: "public")is_static(optional): Whether the method is static (PHP only, default: false)returnType(optional): Return type (e.g., "int", "string", "void")parameters(optional): Array of{name, type}objects
add_method_body
Parse and add code to a method body. Stellify parses the code into structured JSON statements.
Parameters:
file_uuid(required): UUID of the file containing the methodmethod_uuid(required): UUID of the method to add code tocode(required): Code for the method body (just the statements, no function declaration)
Example:
code: "return $a + $b;"
search_methods
Search for methods in the project by name or within a specific file.
Parameters:
name(optional): Method name to search for (supports wildcards)file_uuid(optional): Filter results to a specific file
Statement Tools
create_statement
Create an empty statement in a file. This is step 1 of 2 - you must call add_statement_code next.
Parameters:
file(optional): UUID of the file to add the statement tomethod(optional): UUID of the method to add the statement to (for method body statements)
Use cases:
- PHP: Class properties, use statements, constants
- JS/Vue: Variable declarations, imports, reactive refs
add_statement_code
Add code to an existing statement. This is step 2 of 2 - call after create_statement.
Parameters:
file_uuid(required): UUID of the file containing the statementstatement_uuid(required): UUID of the statement to add code tocode(required): The code to add
Examples:
code: "use Illuminate\\Http\\Request;"
code: "const count = ref(0);"
code: "import { ref } from 'vue';"
get_statement
Get a statement by UUID with its clauses (code tokens).
Parameters:
uuid(required): The UUID of the statement
Route Tools
create_route
Create a new route/page in a Stellify project.
Parameters:
project_id(required): The UUID of the Stellify projectname(required): Route/page name (e.g., "Home", "Counter", "About")path(required): URL path (e.g., "/", "/counter", "/about")method(required): HTTP method ("GET", "POST", "PUT", "DELETE", "PATCH")type(optional): Route type - "web" for pages, "api" for API endpoints (default: "web")data(optional): Additional route data
get_route
Get a route/page by UUID.
Parameters:
uuid(required): The UUID of the route
search_routes
Search for routes/pages in the project by name.
Parameters:
search(optional): Search term to match route namestype(optional): Filter by route type ("web" or "api")per_page(optional): Results per page (default: 10)
Views & Blade Templates
Stellify stores Blade views as elements instead of files. The root element's name field maps to the view name:
- Element with
name="notes.index"→view('notes.index', $data) - Element with
name="layouts.app"→@extends('layouts.app') - Element with
name="components.card"→<x-card>
Use update_element to set the name on a root element after creating it with html_to_elements.
Convention for reusable templates: Attach layouts, components, and partials to a template route (e.g., /template/app-layout, /template/card) to keep them organized and editable.
Element Tools (UI Components)
create_element
Create a new UI element. Provide either page (route UUID) for root elements, or parent (element UUID) for child elements.
Parameters:
type(required): Element type - one of:- HTML5:
s-wrapper,s-input,s-form,s-svg,s-shape,s-media,s-iframe - Components:
s-transition,s-freestyle,s-motion - Blade:
s-directive - Shadcn/ui:
s-chart,s-table,s-combobox,s-accordion,s-calendar,s-contiguous
- HTML5:
page(optional): UUID of the page/route (for root elements)parent(optional): UUID of the parent element (for child elements)
Using s-directive for Blade Conditionals:
s-directive elements output Blade directives (like @if, @foreach, @endif). They are sibling elements — they don't wrap children. To conditionally render content:
- Create an
s-directiveelement with a statement for the opening directive (e.g.,@if(...)) - Create the content element(s) as the next sibling(s)
- Create another
s-directiveelement with a statement for the closing directive (e.g.,@endif)
Example — conditionally showing an image:
// 1. Create statement for @if
create_statement_with_code({
file: "<file-uuid>",
code: "@if($item->featured_image)"
})
// 2. Create opening directive element and set its statement
create_element({ type: "s-directive", page: "<route-uuid>" })
update_element({ uuid: "<if-directive-uuid>", data: { "statement": "<if-statement-uuid>" } })
// 3. Create the image as the next sibling
html_to_elements({ page: "<route-uuid>", elements: "<img class=\"w-full\" />" })
// Then update with dynamic src:
update_element({ uuid: "<img-uuid>", data: { "srcField": "featured_image" } })
// 4. Create statement for @endif
create_statement_with_code({ file: "<file-uuid>", code: "@endif" })
// 5. Create closing directive element
create_element({ type: "s-directive", page: "<route-uuid>" })
update_element({ uuid: "<endif-directive-uuid>", data: { "statement": "<endif-statement-uuid>" } })
The three elements render in order as siblings:
@if($item->featured_image)
<img class="w-full" src="{{ $item->featured_image }}" />
@endif
Using s-directive for Loops:
// 1. Create @foreach directive
create_statement_with_code({ file: "<file-uuid>", code: "@foreach($posts as $item)" })
create_element({ type: "s-directive", page: "<route-uuid>" })
update_element({ uuid: "<foreach-uuid>", data: { "statement": "<foreach-statement-uuid>" } })
// 2. Create loop content (article with dynamic fields)
html_to_elements({ page: "<route-uuid>", elements: "<article><h2></h2><p></p></article>" })
// Update elements to use loop item fields:
update_element({ uuid: "<h2-uuid>", data: { "textField": "title" } }) // → {{ $item->title }}
update_element({ uuid: "<p-uuid>", data: { "textField": "excerpt" } }) // → {{ $item->excerpt }}
// 3. Create @endforeach directive
create_statement_with_code({ file: "<file-uuid>", code: "@endforeach" })
create_element({ type: "s-directive", page: "<route-uuid>" })
update_element({ uuid: "<endforeach-uuid>", data: { "statement": "<endforeach-statement-uuid>" } })
Loop Item Attributes:
Inside @foreach loops, use these attributes on elements to reference $item:
textField: "fieldName"→ outputs{{ $item->fieldName }}hrefField: "fieldName"→ outputshref="{{ $item->fieldName }}"srcField: "fieldName"→ outputssrc="{{ $item->fieldName }}"hrefExpression: "{{ route('posts.show', $item->slug) }}"→ for complex expressionssrcExpression,altExpression→ same pattern for other attributes
update_element
Update an existing UI element.
Parameters:
uuid(required): UUID of the element to updatedata(required): Object with HTML attributes and Stellify fields
Standard HTML attributes: placeholder, href, src, type, etc.
Stellify fields:
name: Element name in editortype: Element typelocked: Prevent editing (boolean)tag: HTML tag (div, input, button, etc.)classes: CSS classes array["class1", "class2"]text: Static text contentstatements: Array of statement UUIDs for dynamic Blade content
Loop item fields (for elements inside @foreach loops, references $item):
textField: Field name → outputs{{ $item->fieldName }}hrefField: Field name → outputshref="{{ $item->fieldName }}"srcField: Field name → outputssrc="{{ $item->fieldName }}"
Expression attributes (for complex Blade expressions):
hrefExpression: Full Blade expression for href (e.g.,"{{ route('posts.show', $item->slug) }}")srcExpression: Full Blade expression for srcaltExpression: Full Blade expression for alt
Event handlers (set value to method UUID):
click: @clicksubmit: @submitchange: @changeinput: @inputfocus: @focusblur: @blurkeydown: @keydownkeyup: @keyupmouseenter: @mouseentermouseleave: @mouseleave
get_element
Get a single element by UUID.
Parameters:
uuid(required): UUID of the element
get_element_tree
Get an element with all its descendants as a hierarchical tree structure.
Parameters:
uuid(required): UUID of the root element
delete_element
Delete an element and all its children (CASCADE).
Parameters:
uuid(required): UUID of the element to delete
search_elements
Search for elements in the project.
Parameters:
search(optional): Search query to match element name, type, or contenttype(optional): Filter by element typeinclude_metadata(optional): Include additional metadata (default: false)per_page(optional): Results per page, 1-100 (default: 20)
html_to_elements
Convert HTML to Stellify elements in ONE operation. This is the fastest way to build interfaces!
Parameters:
elements(required): HTML string to convertpage(optional): Route UUID to attach elements to. Omit for Vue components.selection(optional): Parent element UUID to attach to (alternative to page)file(optional): Vue component file UUID. Pass this to auto-wire @click handlers to method UUIDs.test(optional): If true, returns structure without creating elements
⚠️ CRITICAL: Multiple Root Elements
When passing HTML with multiple root-level elements (e.g., <header>, <main>, <footer>), only the FIRST root element gets attached to the route via routeParent. Other elements are created but become orphaned (not attached to the route).
Wrong approach (causes orphaned elements):
html_to_elements(page: routeUUID, elements: "<header>...</header><main>...</main><footer>...</footer>")
// Result: Only <header> is attached to the route. <main> and <footer> are orphaned!
Correct approach (make separate calls for each root element):
// Call 1: Header
html_to_elements(page: routeUUID, elements: "<header>...</header>")
// Call 2: Main content
html_to_elements(page: routeUUID, elements: "<main>...</main>")
// Call 3: Footer
html_to_elements(page: routeUUID, elements: "<footer>...</footer>")
Features:
- Parses HTML structure
- Creates all elements with proper nesting
- Preserves attributes, classes, text content
- Auto-detects Vue bindings (
{{ variable }}) and creates linked statements - Returns element UUIDs for use in
save_filetemplate array
Element type mapping:
button,input,textarea,select→s-inputdiv,span,p,section, etc. →s-wrapperform→s-formimg,video,audio→s-media
Global Library Tools
list_globals
List all global files in the Application database. Globals are reusable, curated code that can be installed into tenant projects.
Parameters: None
get_global
Get a global file with all its methods, statements, and clauses.
Parameters:
uuid(required): UUID of the global file
install_global
Install a global file from the Application database into a tenant project.
Parameters:
file_uuid(required): UUID of the global file to installdirectory_uuid(required): UUID of the directory to install into
search_global_methods
Search for methods across the Application database (global/framework methods).
Parameters:
query(required): Search query to find methods by name
Module Tools
Modules are named collections of related global files that can be installed together.
list_modules
List all available modules.
Parameters: None
get_module
Get a module with all its files.
Parameters:
uuid(required): UUID of the module
create_module
Create a new module to group related global files.
Parameters:
name(required): Unique name for the module (e.g., "laravel-sanctum-auth")description(optional): Description of what the module providesversion(optional): Version string (default: "1.0.0")tags(optional): Tags for categorization (e.g.,["auth", "api", "sanctum"])
add_file_to_module
Add a global file to a module.
Parameters:
module_uuid(required): UUID of the modulefile_uuid(required): UUID of the global file to addorder(optional): Installation order (auto-increments if not specified)
install_module
Install all files from a module into a tenant project.
Parameters:
module_uuid(required): UUID of the module to installdirectory_uuid(required): UUID of the directory to install files into
How Stellify Works
Stellify stores your application code as structured JSON in a database, not text files. This architecture enables:
- Surgical precision: AI modifies specific methods without touching other code
- Query your codebase like data: Find all methods that use a specific class
- Instant refactoring: Rename a method across your entire application instantly
- Version control at the statement level: Track changes to individual code statements
- AI-native development: Give AI granular access without worrying about breaking existing code
- Auto-dependency resolution: Framework classes are automatically fetched from Laravel API docs
When you build with Stellify through this MCP server, code is parsed into structured data and can be assembled back into executable code when you deploy.
Dependency Resolution
When you use auto_create_dependencies, Stellify resolves dependencies in this order:
- Tenant Database - Check if the class exists in your project
- Application Database - Check the global library of pre-defined classes
- Laravel API Docs - For core
Illuminate\*classes, fetch from api.laravel.com - Vendor Directory - For installed packages, read directly from
vendor/
Supported Package Sources
| Source | Namespaces | Method |
|---|---|---|
| Laravel API | Illuminate\* | Fetches from api.laravel.com |
| Vendor | Laravel\Socialite\* | Reads from vendor/laravel/socialite |
| Vendor | Laravel\Cashier\* | Reads from vendor/laravel/cashier |
| Vendor | Laravel\Sanctum\* | Reads from vendor/laravel/sanctum |
| Vendor | Laravel\Passport\* | Reads from vendor/laravel/passport |
| Vendor | Spatie\* | Reads from vendor/spatie/* packages |
| Vendor | Livewire\* | Reads from vendor/livewire/livewire |
| Vendor | Inertia\* | Reads from vendor/inertiajs/inertia-laravel |
For vendor packages, Stellify uses PHP-Parser to extract the actual method signatures from your installed package version - ensuring accuracy with your specific dependencies.
Code Structure
Directory
└── File
└── Method
├── Parameters (Clauses)
└── Statements
└── Clauses / Language Tokens
Each piece of code is broken down into:
- Directory: Organizational container for files
- File: Contains methods and file metadata
- Method: Function with parameters and body statements
- Statement: A single line/statement of code
- Clause: Leaf node (variable, string, number, etc.)
- Language Token: System-defined keywords and symbols (reusable)
Workflows
PHP Controller Workflow
get_project→ Find directory UUIDcreate_file→ type='controller', name='UserController'create_method→ name='store', parameters=[{name:'request', type:'Request'}]add_method_body→ code='return response()->json($request->all());'
Vue Component Workflow
get_project→ Find the 'js' directory UUIDcreate_file→ type='js', extension='vue' in js directory- Create statements for imports and data:
create_statement+add_statement_code:"import { ref } from 'vue';"create_statement+add_statement_code:"const count = ref(0);"
create_method+add_method_body→ Create functionshtml_to_elements→ Convert template HTML to elementsupdate_element→ Wire event handlers (click → method UUID)save_file→ Finalize with:extension: 'vue'template: [rootElementUuid]data: [methodUuid] (METHOD UUIDs only)statements: [importStmtUuid, refStmtUuid] (STATEMENT UUIDs)
Development
Watch mode (auto-rebuild on changes):
npm run watch
Manual build:
npm run build
Troubleshooting
"STELLIFY_API_TOKEN environment variable is required"
Make sure your .env file exists and contains your API token.
"Connection refused" or API errors
- Verify your API token is valid
- Check that
STELLIFY_API_URLis correct - Test the API directly:
curl -H "Authorization: Bearer YOUR_TOKEN" https://stellisoft.com/api/v1/file/search
Claude Desktop doesn't see the tools
- Verify the configuration file path is correct for your OS
- Check that the Stellify API token is valid
- Restart Claude Desktop completely (Quit, not just close window)
- Check Claude Desktop logs for error messages
TypeScript errors during build
rm -rf node_modules package-lock.json
npm install
npm run build
Installation issues
# Clear npm cache and reinstall
npm cache clean --force
npm uninstall -g @stellisoft/stellify-mcp
npm install -g @stellisoft/stellify-mcp
Architecture
Claude Desktop (AI)
↓ (stdio)
Stellify MCP Server (Node.js)
↓ (HTTPS)
Stellify API (Laravel)
↓
Database (Structured Code)
The MCP server is a thin client that:
- Exposes tools to Claude
- Translates tool calls to API requests
- Returns formatted responses
Contributing
We welcome contributions! Please see our contributing guidelines and feel free to submit pull requests.
Support
For issues or questions:
- GitHub Issues: Report a bug or request a feature
- Email: support@stellisoft.com
- Documentation: https://stellisoft.com/docs
- Discord: Join our community (coming soon)
About Stellify
Stellify is building the future of AI-native software development. By storing code as structured data instead of text files, we enable a new paradigm where AI and humans collaborate seamlessly to build better software, faster.
Learn more at stellisoft.com
License
MIT License - see LICENSE file for details
Built with love by the Stellify team
常见问题
io.github.MattStellisoft/stellify-mcp 是什么?
通过对话构建 Laravel 应用,代码以结构化 JSON 存储,便于 AI 进行精细、定点式修改。
相关 Skills
网页构建器
by anthropics
面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。
✎ 在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。
前端设计
by anthropics
面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。
✎ 想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。
网页应用测试
by anthropics
用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。
✎ 借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。
相关 MCP Server
GitHub
编辑精选by GitHub
GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。
✎ 这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。
Context7 文档查询
编辑精选by Context7
Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。
✎ 它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。
by tldraw
tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。
✎ 这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。