✓ Verified
💻 Development
✓ Enhanced Data
Supernal Interface
Universal AI Interface framework for making applications AI-controllable.
- Rating
- 3.9 (18 reviews)
- Downloads
- 851 downloads
- Version
- 1.0.0
Overview
Universal AI Interface framework for making applications AI-controllable.
Complete Documentation
View Source →
Supernal Interface - AI Controllability Framework
Installation
bash
npm install @supernal/interface
Core Concept
Decorate functions → AI can call them with full type safety.
Quick Start
1. Decorate Functions
typescript
import { Tool } from '@supernal/interface';
class TodoApp {
@Tool({
name: 'add_todo',
description: 'Add a new todo item',
category: 'productivity'
})
async addTodo(text: string): Promise<Todo> {
return this.db.create({ text, done: false });
}
@Tool({
name: 'complete_todo',
description: 'Mark a todo as complete'
})
async completeTodo(id: string): Promise<void> {
await this.db.update(id, { done: true });
}
}
2. Set Up Adapter
typescript
import { createCopilotKitAdapter, ChatUIProvider } from '@supernal/interface';
const adapter = createCopilotKitAdapter({
autoRegisterTools: true,
autoRegisterReadables: true
});
function App() {
return (
<ChatUIProvider adapter={adapter}>
<YourApp />
</ChatUIProvider>
);
}
3. Done
AI assistants can now discover and call your decorated functions.
Decorators
| Decorator | Purpose |
|---|---|
| @Tool | Expose function as AI-callable tool |
| @ToolProvider | Class containing multiple tools |
| @Component | React component with AI context |
Adapters
CopilotKit (recommended)
typescript
import { createCopilotKitAdapter } from '@supernal/interface';
const adapter = createCopilotKitAdapter({
autoRegisterTools: true
});
Custom Adapter
typescript
import { ChatUIAdapter } from '@supernal/interface';
class MyAdapter implements ChatUIAdapter {
name = 'my-adapter';
registerTools(tools) { /* convert to your format */ }
render(props) { return <MyChat {...props} />; }
}
React Hooks
typescript
import { useToolBinding, usePersistedState, useChatWithContext } from '@supernal/interface';
// Bind a tool to component state
const [todos, setTodos] = useToolBinding('todos', []);
// Persist state across sessions
const [prefs, setPrefs] = usePersistedState('user-prefs', defaults);
// Chat with app context
const { messages, send } = useChatWithContext();
Storage Adapters
typescript
import { StateManager, LocalStorageAdapter } from '@supernal/interface/storage';
const storage = StateManager.getInstance('myapp', new LocalStorageAdapter());
await storage.setState('user', { name: 'Alice' });
Testing
typescript
import { GherkinParser, TestRunner } from '@supernal/interface/testing';
const feature = GherkinParser.parseFeature(gherkinText);
const tests = await TestRunner.generateTests({ framework: 'jest' });
Enterprise Features
Available at supernal.ai/enterprise:
- Auto test generation from decorators
- Story system (50-80% performance boost)
- Architecture visualization
- Multi-model routing
- Audit & compliance logging
Installation
Terminal bash
openclaw install supernal-interface
Copied!
💻Code Examples
npm install @supernal/interface
npm-install-supernalinterface.txt
## Core Concept
Decorate functions → AI can call them with full type safety.
## Quick Start
### 1. Decorate Functions}
.txt
### 3. Done
AI assistants can now discover and call your decorated functions.
## Decorators
| Decorator | Purpose |
|-----------|---------|
| `@Tool` | Expose function as AI-callable tool |
| `@ToolProvider` | Class containing multiple tools |
| `@Component` | React component with AI context |
## Adapters
### CopilotKit (recommended)example.ts
import { Tool } from '@supernal/interface';
class TodoApp {
@Tool({
name: 'add_todo',
description: 'Add a new todo item',
category: 'productivity'
})
async addTodo(text: string): Promise<Todo> {
return this.db.create({ text, done: false });
}
@Tool({
name: 'complete_todo',
description: 'Mark a todo as complete'
})
async completeTodo(id: string): Promise<void> {
await this.db.update(id, { done: true });
}
}example.ts
import { createCopilotKitAdapter, ChatUIProvider } from '@supernal/interface';
const adapter = createCopilotKitAdapter({
autoRegisterTools: true,
autoRegisterReadables: true
});
function App() {
return (
<ChatUIProvider adapter={adapter}>
<YourApp />
</ChatUIProvider>
);
}example.ts
import { createCopilotKitAdapter } from '@supernal/interface';
const adapter = createCopilotKitAdapter({
autoRegisterTools: true
});example.ts
import { ChatUIAdapter } from '@supernal/interface';
class MyAdapter implements ChatUIAdapter {
name = 'my-adapter';
registerTools(tools) { /* convert to your format */ }
render(props) { return <MyChat {...props} />; }
}example.ts
import { useToolBinding, usePersistedState, useChatWithContext } from '@supernal/interface';
// Bind a tool to component state
const [todos, setTodos] = useToolBinding('todos', []);
// Persist state across sessions
const [prefs, setPrefs] = usePersistedState('user-prefs', defaults);
// Chat with app context
const { messages, send } = useChatWithContext();example.ts
import { StateManager, LocalStorageAdapter } from '@supernal/interface/storage';
const storage = StateManager.getInstance('myapp', new LocalStorageAdapter());
await storage.setState('user', { name: 'Alice' });example.ts
import { GherkinParser, TestRunner } from '@supernal/interface/testing';
const feature = GherkinParser.parseFeature(gherkinText);
const tests = await TestRunner.generateTests({ framework: 'jest' });Tags
#coding_agents-and-ides
Quick Info
Category Development
Model Claude 3.5
Complexity One-Click
Author ianderrington
Last Updated 3/10/2026
🚀
Optimized for
Claude 3.5
Ready to Install?
Get started with this skill in seconds
openclaw install supernal-interface
Related Skills
✓ Verified
💻 Development
4claw
4claw — a moderated imageboard for AI agents.
🧠 Claude-Ready
)}
★ 4.4 (118)
↓ 4,990
v1.0.0
✓ Verified
💻 Development
Aap Passport
Agent Attestation Protocol - The Reverse Turing Test.
🧠 Claude-Ready
)}
★ 4.3 (89)
↓ 4,621
v1.0.0
✓ Verified
💻 Development
Acestep Lyrics Transcription
Transcribe audio to timestamped lyrics using OpenAI Whisper or ElevenLabs Scribe API.
⚡ GPT-Optimized
)}
★ 3.8 (274)
↓ 17,648
v1.0.0
✓ Verified
💻 Development
Adaptive Suite
A continuously adaptive skill suite that empowers Clawdbot.
🧠 Claude-Ready
)}
★ 4.7 (88)
↓ 1,625
v1.0.0