How To Use Origin
Ready when you are.
How to Build an App
In Origin, building software starts with one step: say what you want. The cockpit interface is designed for direct natural language control. You don’t need to write code, wire components, or configure settings. Just speak your intention—and Origin S1 handles the rest.
1. Enter Your Prompt
The first field you’ll see in your Command Deck is a dark input bar labeled with Origin S1. This is where you describe what you want to build.
Examples:
"Create a viral meme coin tracker"
"Build a to-do list with color tags and due dates"
"Make a landing page for a crypto project called MoonScan"
The model understands plain English. You don’t need to explain logic or UI. Just describe the idea.
2. Let Origin S1 Work
Once your prompt is submitted, the AI enters a brief generation phase. You’ll see a visual cue showing that Origin S1 is building your app.
Behind the scenes, it’s doing this:
Parsing your intent
Mapping it to a software archetype (game, tool, dashboard, etc.)
Generating code (HTML, CSS, JavaScript, sometimes React or Vue)
Building a live sandbox for preview
This process usually takes just a few seconds.
3. Watch It Appear
After processing, you’ll see two panes:
Left: your prompt and AI conversation
Right: the Code & Preview area, where the full application is displayed
// Some codeimport { useState, useMemo } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card"
import { Input } from "/components/ui/input"
import { Button } from "/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "/components/ui/select"
import { Search, TrendingUp, TrendingDown, Rocket, Zap, Crown } from 'lucide-react'
interface MemeCoin {
id: string
name: string
symbol: string
price: number
marketCap: number
change24h: number
volume24h: number
rank: number
emoji: string
isViral: boolean
}
const memeCoins: MemeCoin[] = [
{
id: '1',
name: 'Dogecoin',
symbol: 'DOGE',
price: 0.0823,
marketCap: 11750000000,
change24h: 5.67,
volume24h: 892000000,
rank: 1,
emoji: '🐕',
isViral: true
},
{
id: '2',
name: 'Shiba Inu',
symbol: 'SHIB',
price: 0.0000089,
marketCap: 5240000000,
change24h: -2.34,
volume24h: 234000000,
rank: 2,
emoji: '🐕🦺',
isViral: true
},
{
id: '3',
name: 'Pepe',
symbol: 'PEPE',
price: 0.00000123,
marketCap: 518000000,
change24h: 12.45,
volume24h: 89000000,
rank: 3,
emoji: '🐸',
isViral: true
},
{
id: '4',
name: 'Floki Inu',
symbol: 'FLOKI',
price: 0.000156,
marketCap: 1490000000,
change24h: 8.92,
volume24h: 45000000,
rank: 4,
emoji: '🐺',
isViral: false
},
{
id: '5',
name: 'Baby Doge Coin',
symbol: 'BABYDOGE',
price: 0.0000000024,
marketCap: 165000000,
change24h: -5.67,
volume24h: 12000000,
rank: 5,
emoji: '🐶',
isViral: false
},
{
id: '6',
name: 'Bonk',
symbol: 'BONK',
price: 0.0000234,
marketCap: 1560000000,
change24h: 15.23,
volume24h: 78000000,
rank: 6,
emoji: '🔨',
isViral: true
},
{
id: '7',
name: 'Wojak',
symbol: 'WOJAK',
price: 0.000045,
marketCap: 45000000,
change24h: 23.45,
volume24h: 5600000,
rank: 7,
emoji: '😭',
isViral: false
},
{
id: '8',
name: 'Mog Coin',
symbol: 'MOG',
price: 0.0000012,
marketCap: 478000000,
change24h: 7.89,
volume24h: 23000000,
rank: 8,
emoji: '😸',
isViral: false
}
]
type SortOption = 'rank' | 'price' | 'marketCap' | 'change24h' | 'name'
export default function ViralMemeCoinTracker() {
const [searchQuery, setSearchQuery] = useState('')
const [sortBy, setSortBy] = useState<SortOption>('rank')
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
const filteredAndSortedCoins = useMemo(() => {
let filtered = memeCoins.filter(coin =>
coin.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
coin.symbol.toLowerCase().includes(searchQuery.toLowerCase())
)
filtered.sort((a, b) => {
let aValue: number | string
let bValue: number | string
switch (sortBy) {
case 'name':
aValue = a.name.toLowerCase()
bValue = b.name.toLowerCase()
break
case 'price':
aValue = a.price
bValue = b.price
break
case 'marketCap':
aValue = a.marketCap
bValue = b.marketCap
break
case 'change24h':
aValue = a.change24h
bValue = b.change24h
break
default:
aValue = a.rank
bValue = b.rank
}
if (typeof aValue === 'string' && typeof bValue === 'string') {
return sortOrder === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
}
return sortOrder === 'asc' ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number)
})
return filtered
}, [searchQuery, sortBy, sortOrder])
const formatPrice = (price: number) => {
if (price < 0.001) {
return `$${price.toFixed(8)}`
}
return `$${price.toFixed(4)}`
}
const formatMarketCap = (marketCap: number) => {
if (marketCap >= 1000000000) {
return `$${(marketCap / 1000000000).toFixed(2)}B`
}
if (marketCap >= 1000000) {
return `$${(marketCap / 1000000).toFixed(2)}M`
}
return `$${(marketCap / 1000).toFixed(2)}K`
}
const formatVolume = (volume: number) => {
if (volume >= 1000000000) {
return `$${(volume / 1000000000).toFixed(2)}B`
}
if (volume >= 1000000) {
return `$${(volume / 1000000).toFixed(2)}M`
}
return `$${(volume / 1000).toFixed(2)}K`
}
const toggleSortOrder = () => {
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
}
return (
<div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 p-4">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-2 mb-4">
<Rocket className="w-8 h-8 text-purple-600" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Viral Meme Coin Tracker
</h1>
<Zap className="w-8 h-8 text-pink-600" />
</div>
<p className="text-gray-600 text-lg">Track the hottest meme coins in the crypto space 🚀</p>
</div>
{/* Controls */}
<Card className="mb-6">
<CardContent className="p-6">
<div className="flex flex-col md:flex-row gap-4 items-center">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
placeholder="Search meme coins..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10"
/>
</div>
<div className="flex gap-2 items-center">
<Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="rank">Rank</SelectItem>
<SelectItem value="name">Name</SelectItem>
<SelectItem value="price">Price</SelectItem>
<SelectItem value="marketCap">Market Cap</SelectItem>
<SelectItem value="change24h">24h Change</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" onClick={toggleSortOrder} className="px-3">
{sortOrder === 'asc' ? '↑' : '↓'}
</Button>
</div>
</div>
</CardContent>
</Card>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<Card>
<CardContent className="p-4">
<div className="flex items-center gap-2">
<Crown className="w-5 h-5 text-yellow-500" />
<div>
<p className="text-sm text-gray-600">Total Meme Coins</p>
<p className="text-2xl font-bold">{memeCoins.length}</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center gap-2">
<TrendingUp className="w-5 h-5 text-green-500" />
<div>
<p className="text-sm text-gray-600">Viral Coins</p>
<p className="text-2xl font-bold">{memeCoins.filter(coin => coin.isViral).length}</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center gap-2">
<Zap className="w-5 h-5 text-purple-500" />
<div>
<p className="text-sm text-gray-600">Total Market Cap</p>
<p className="text-2xl font-bold">
{formatMarketCap(memeCoins.reduce((sum, coin) => sum + coin.marketCap, 0))}
</p>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Coin List */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<span>Meme Coin Rankings</span>
{filteredAndSortedCoins.length !== memeCoins.length && (
<span className="text-sm font-normal text-gray-500">
({filteredAndSortedCoins.length} of {memeCoins.length})
</span>
)}
</CardTitle>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b">
<th className="text-left p-3 font-semibold">#</th>
<th className="text-left p-3 font-semibold">Coin</th>
<th className="text-right p-3 font-semibold">Price</th>
<th className="text-right p-3 font-semibold">24h Change</th>
<th className="text-right p-3 font-semibold">Market Cap</th>
<th className="text-right p-3 font-semibold">Volume (24h)</th>
</tr>
</thead>
<tbody>
{filteredAndSortedCoins.map((coin) => (
<tr key={coin.id} className="border-b hover:bg-gray-50 transition-colors">
<td className="p-3">
<div className="flex items-center gap-2">
<span className="font-semibold">{coin.rank}</span>
{coin.isViral && (
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" title="Viral" />
)}
</div>
</td>
<td className="p-3">
<div className="flex items-center gap-3">
<span className="text-2xl">{coin.emoji}</span>
<div>
<div className="font-semibold">{coin.name}</div>
<div className="text-sm text-gray-500">{coin.symbol}</div>
</div>
</div>
</td>
<td className="p-3 text-right font-mono">
{formatPrice(coin.price)}
</td>
<td className="p-3 text-right">
<div className={`flex items-center justify-end gap-1 ${
coin.change24h >= 0 ? 'text-green-600' : 'text-red-600'
}`}>
{coin.change24h >= 0 ? (
<TrendingUp className="w-4 h-4" />
) : (
<TrendingDown className="w-4 h-4" />
)}
<span className="font-semibold">
{coin.change24h >= 0 ? '+' : ''}{coin.change24h.toFixed(2)}%
</span>
</div>
</td>
<td className="p-3 text-right font-mono">
{formatMarketCap(coin.marketCap)}
</td>
<td className="p-3 text-right font-mono text-gray-600">
{formatVolume(coin.volume24h)}
</td>
</tr>
))}
</tbody>
</table>
</div>
{filteredAndSortedCoins.length === 0 && (
<div className="text-center py-8">
<p className="text-gray-500">No meme coins found matching your search.</p>
</div>
)}
</CardContent>
</Card>
{/* Footer */}
<div className="text-center mt-8 text-gray-500">
<p>🚀 To the moon! Data updates every few seconds 📈</p>
</div>
</div>
</div>
)
}You can toggle between the code view and live preview using the buttons at the bottom.
From here, you can:
Inspect the full frontend
Test inputs and interactions
See how your idea translated into an interface
4. Iterate in the chat
After your app is generated, the conversation continues. You can keep evolving the build by sending more prompts in the chat. There’s no need to touch code manually.
Try instructions like:
add a dark mode toggle
connect this to a Solana wallet
make it mobile responsive
replace the header with a logo and subtitle
turn this into a dashboard with multiple views
Each message updates the current app state. The code and preview panels reflect changes instantly. You never start over—each prompt builds on what’s already there.
This is how iteration works in Origin: fast, conversational, continuous.
5. Evolve or explore
Once your app is up and running, you can choose how to move forward. Options include:
fork the app and keep experimenting
export the code to run it externally
tokenize it using the Launcher
publish it to the App Gallery
save it to your cockpit for future edits
If you’re looking for inspiration, you can also use one of the quick example prompts listed under the chat box:
Meme Coin Landing
APY Calculator
Diamond Hands Tracker
Crypto Dictionary
Clicking one of these will auto-generate a working app you can test, remix, or share.
Last updated