{"id":12077,"library":"stellify-framework","title":"Stellify Framework","description":"Stellify Framework, currently at version 0.2.2, is a nascent frontend library meticulously engineered for optimal interoperability with AI code generation tools. Its primary objective is to mitigate common AI-induced issues like hallucination and inconsistent output by enforcing a highly constrained and predictable API surface. Unlike traditional frameworks that often offer multiple ways to achieve a single task, Stellify adheres to a \"one obvious way\" philosophy, coupled with a strict \"Rule of Seven\" for API method counts per module. The framework differentiates itself with Laravel-style chainable patterns, a core that remains agnostic to frontend frameworks, and dedicated adapters for React and Vue. This design ethos aims to foster more reliable and consistent code generation from AI agents. While specific release cadence details are not yet public, its low version number indicates active, early-stage development, suggesting potential for rapid evolution and breaking changes as it matures.","status":"active","version":"0.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","framework","ai","frontend","typescript"],"install":[{"cmd":"npm install stellify-framework","lang":"bash","label":"npm"},{"cmd":"yarn add stellify-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add stellify-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for using the React adapter functionality.","package":"react","optional":true},{"reason":"Peer dependency required for using the Vue adapter functionality.","package":"vue","optional":true}],"imports":[{"note":"Stellify is primarily designed for ES Modules. CommonJS 'require' syntax may not work or is discouraged.","wrong":"const { Form } = require('stellify-framework')","symbol":"Form","correct":"import { Form } from 'stellify-framework'"},{"note":"Most Stellify modules are named exports, not default exports.","wrong":"import Stream from 'stellify-framework'","symbol":"Stream","correct":"import { Stream } from 'stellify-framework'"},{"note":"Framework-specific hooks like `useForm` are located in their respective adapter sub-paths.","wrong":"import { useForm } from 'stellify-framework'","symbol":"useForm (React adapter)","correct":"import { useForm } from 'stellify-framework/adapters/react'"},{"note":"Framework-specific hooks like `useForm` are located in their respective adapter sub-paths.","symbol":"useForm (Vue adapter)","correct":"import { useForm } from 'stellify-framework/adapters/vue'"}],"quickstart":{"code":"import { Form, Stream, Chat, Speech } from 'stellify-framework';\n\n// Mock function for UI interaction\nfunction appendToUI(text) {\n  const streamOutput = document.getElementById('stream-output');\n  if (streamOutput) {\n    streamOutput.textContent += text;\n  } else {\n    console.log('Stream chunk:', text);\n  }\n}\n\n// Mock chat state\nconst chat = {\n  messages: [],\n  addUser(text) {\n    this.messages.push({ role: 'user', content: text });\n    console.log('User added message:', text);\n  },\n  addAssistant(text) {\n    this.messages.push({ role: 'assistant', content: text });\n    console.log('Assistant added message:', text);\n  },\n  getMessages() { return this.messages; },\n  fork() { console.log('Chat forked for regeneration.'); }\n};\n\n// Form with validation\nconst userForm = Form.create({ name: '', email: '' })\n  .validate({ email: v => v?.includes('@') ? null : 'Invalid' })\n  .onSuccess(data => console.log('Form submission successful:', data))\n  .onError(errors => console.error('Form validation errors:', errors))\n  .store('/api/users'); // This would typically trigger a fetch\n\nconsole.log('Initial form data:', userForm.getData());\nuserForm.setData({ name: 'Jane Doe', email: 'jane@example.com' });\nuserForm.store('/api/users'); // Re-run store with new data\n\n// LLM streaming\nconst dataStream = Stream.create('/api/chat')\n  .onChunk(text => appendToUI(text))\n  .onComplete(() => console.log('Streaming complete.'))\n  .post({ messages: chat.getMessages() }); // Post initial chat messages\n\n// Voice input\nconst speechInput = Speech.create()\n  .onResult(text => chat.addUser(text))\n  .onError(error => console.error('Speech recognition error:', error))\n  .listen({ continuous: true }); // Start listening continuously\n\n// Conversation management\nchat.addUser('What is 2+2?');\nchat.addAssistant('4');\nchat.fork(); // Branch for regeneration","lang":"javascript","description":"Demonstrates core Stellify modules including form creation with validation, real-time LLM streaming to a UI element, voice input processing, and basic chat conversation management."},"warnings":[{"fix":"Consult the official `STELLIFY_FRAMEWORK.md` documentation for the intended 'Stellify way' to accomplish tasks, rather than seeking alternative methods.","message":"Stellify's deliberately constrained API surface, designed for AI predictability, may feel restrictive for human developers accustomed to more flexible frameworks. Adherence to 'one obvious way' is central.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Regularly review Stellify's release notes for breaking changes. Consider pinning exact versions or using tilde (`~`) ranges for patch stability, avoiding caret (`^`) ranges if stability is critical.","message":"As an early-stage framework (v0.2.2), significant breaking changes are highly probable in future minor and major versions. Users should anticipate frequent updates and potential code adjustments.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"For unsupported frameworks, directly use Stellify's core modules (e.g., `Form.create()`) and manage state integration manually, bypassing adapter hooks like `useForm`.","message":"Integrating Stellify with a frontend framework not officially supported by an adapter (e.g., Svelte, Angular) will require manual interaction with Stellify's framework-agnostic core, as adapter-specific patterns will not apply.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using ES module import syntax: `import { Form } from 'stellify-framework';`.","cause":"Attempting to use CommonJS 'require' syntax or an incorrect named import for an ES Module-first library.","error":"TypeError: stellify_framework_1.Form.create is not a function"},{"fix":"Use the correct adapter pattern for your framework: for React, use `{...form.bind('name')}`; for Vue, use `v-model=\"form.data.name\"`.","cause":"Applying a Vue adapter-specific pattern (e.g., `form.data.name`) within a React context, or vice-versa, due to misunderstanding adapter usage.","error":"Property 'data' does not exist on type 'FormInstance<any>'"},{"fix":"Stellify currently provides official adapters only for React and Vue. For other frameworks, use the core modules directly and manage integration manually.","cause":"Trying to import an adapter for a framework that does not have an official Stellify adapter (e.g., Svelte, Angular).","error":"Module not found: Error: Can't resolve 'stellify-framework/adapters/svelt'"}],"ecosystem":"npm"}