Build interactive dashboards, tables, and forms with simple TypeScript specifications
# Install and initialize
npx @glyphtek/unspecd init
# Create a tool file
echo 'export default {
id: "hello",
title: "Hello World",
content: {
type: "displayRecord",
dataLoader: { functionName: "loadData" },
displayConfig: { fields: [{ field: "message", label: "Message" }] }
},
functions: { loadData: async () => ({ message: "Hello from Unspecd!" }) }
}' > hello.tool.ts
# Start dashboard
unspecd dev# Install the package
bun add @glyphtek/unspecd
# Create hello-world.ts and run it
bun hello-world.tsCreate hello-world.ts:
import { UnspecdUI } from '@glyphtek/unspecd';
import { startServer } from '@glyphtek/unspecd/server';
// Minimal tool example - just displays a message
const helloTool = {
id: 'hello-world',
title: 'Hello World',
content: {
type: 'displayRecord' as const,
dataLoader: {
functionName: 'loadMessage'
},
displayConfig: {
fields: [
{
field: 'message',
label: 'Message'
},
{
field: 'timestamp',
label: 'Created At',
formatter: 'datetime'
}
]
}
},
functions: {
loadMessage: async () => {
return {
message: 'Hello from Unspec\'d! 🚀',
timestamp: new Date()
};
}
}
};
// Start the server
const app = new UnspecdUI({ tools: [helloTool] });
await startServer(app);Run it: bun hello-world.ts → Opens at http://localhost:3000
unspecd init # Initialize project
unspecd dev # Dashboard with auto-discovery
unspecd exec my-tool.ts # Focus mode for single toolCreate your first tool:
import { UnspecdUI, startServer } from '@glyphtek/unspecd'
const userEditor = {
id: 'user-editor',
title: 'User Management',
content: {
type: 'editableTable',
columns: {
name: { type: 'text', label: 'Name' },
email: { type: 'text', label: 'Email' },
role: {
type: 'select',
label: 'Role',
options: [
{ value: 'admin', label: 'Admin' },
{ value: 'user', label: 'User' }
]
}
}
},
functions: {
loadData: async () => {
return [
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user' }
]
},
updateUser: async (userData) => {
// Update user logic here
return { success: true }
}
}
}
// Start the server
const app = new UnspecdUI({ tools: [userEditor] })
await startServer(app)That's it! Your internal tool is now running with a beautiful, interactive interface.
Stop building the same CRUD interfaces over and over. Unspec'd gives you powerful components specifically designed for internal dashboards, admin panels, and data management tools.
Ready to build something amazing?