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.

Origin's Command Deck

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

Origin's Edit Window

Viral Meme Coin Tracker

// 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.