Stellify Framework

0.2.2 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: stellify_framework_1.Form.create is not a function
```
cause Attempting to use CommonJS 'require' syntax or an incorrect named import for an ES Module-first library.

fix Ensure you are using ES module import syntax: `import { Form } from 'stellify-framework';`.
```
Property 'data' does not exist on type 'FormInstance<any>'
```
cause Applying a Vue adapter-specific pattern (e.g., `form.data.name`) within a React context, or vice-versa, due to misunderstanding adapter usage.

fix Use the correct adapter pattern for your framework: for React, use `{...form.bind('name')}`; for Vue, use `v-model="form.data.name"`.
```
Module not found: Error: Can't resolve 'stellify-framework/adapters/svelt'
```
cause Trying to import an adapter for a framework that does not have an official Stellify adapter (e.g., Svelte, Angular).

fix Stellify currently provides official adapters only for React and Vue. For other frameworks, use the core modules directly and manage integration manually.

Warnings

gotcha 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.
Fix: Consult the official `STELLIFY_FRAMEWORK.md` documentation for the intended 'Stellify way' to accomplish tasks, rather than seeking alternative methods.
breaking 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.
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.
gotcha 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.
Fix: For unsupported frameworks, directly use Stellify's core modules (e.g., `Form.create()`) and manage state integration manually, bypassing adapter hooks like `useForm`.

Install

npm install stellify-framework npm
yarn add stellify-framework yarn
pnpm add stellify-framework pnpm

Imports

Form
wrong:
```
const { Form } = require('stellify-framework')
```
correct:
```
import { Form } from 'stellify-framework'
```
Stellify is primarily designed for ES Modules. CommonJS 'require' syntax may not work or is discouraged.

Stream

wrong:

import Stream from 'stellify-framework'

correct:

import { Stream } from 'stellify-framework'

Most Stellify modules are named exports, not default exports.

useForm (React adapter)
wrong:
```
import { useForm } from 'stellify-framework'
```
correct:
```
import { useForm } from 'stellify-framework/adapters/react'
```
Framework-specific hooks like `useForm` are located in their respective adapter sub-paths.
useForm (Vue adapter)
```
import { useForm } from 'stellify-framework/adapters/vue'
```
Framework-specific hooks like `useForm` are located in their respective adapter sub-paths.

Quickstart

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.

import { Form, Stream, Chat, Speech } from 'stellify-framework';

// Mock function for UI interaction
function appendToUI(text) {
  const streamOutput = document.getElementById('stream-output');
  if (streamOutput) {
    streamOutput.textContent += text;
  } else {
    console.log('Stream chunk:', text);
  }
}

// Mock chat state
const chat = {
  messages: [],
  addUser(text) {
    this.messages.push({ role: 'user', content: text });
    console.log('User added message:', text);
  },
  addAssistant(text) {
    this.messages.push({ role: 'assistant', content: text });
    console.log('Assistant added message:', text);
  },
  getMessages() { return this.messages; },
  fork() { console.log('Chat forked for regeneration.'); }
};

// Form with validation
const userForm = Form.create({ name: '', email: '' })
  .validate({ email: v => v?.includes('@') ? null : 'Invalid' })
  .onSuccess(data => console.log('Form submission successful:', data))
  .onError(errors => console.error('Form validation errors:', errors))
  .store('/api/users'); // This would typically trigger a fetch

console.log('Initial form data:', userForm.getData());
userForm.setData({ name: 'Jane Doe', email: 'jane@example.com' });
userForm.store('/api/users'); // Re-run store with new data

// LLM streaming
const dataStream = Stream.create('/api/chat')
  .onChunk(text => appendToUI(text))
  .onComplete(() => console.log('Streaming complete.'))
  .post({ messages: chat.getMessages() }); // Post initial chat messages

// Voice input
const speechInput = Speech.create()
  .onResult(text => chat.addUser(text))
  .onError(error => console.error('Speech recognition error:', error))
  .listen({ continuous: true }); // Start listening continuously

// Conversation management
chat.addUser('What is 2+2?');
chat.addAssistant('4');
chat.fork(); // Branch for regeneration

view raw JSON →