> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orchids.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Full Tutorial

> Watch the full Orchids walkthrough.

<div style={{ textAlign: 'center', margin: '2rem 0' }}>
  <video
    id="full-tutorial-video"
    src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/hero-assets/orchids-walkthrough.mp4"
    controls
    preload="metadata"
    playsInline
    style={{
  width: '560px',
  height: '315px',
  maxWidth: '100%',
  borderRadius: '8px',
}}
  />
</div>

## Jump to a section

<ul style={{ textAlign: 'left', paddingLeft: '1.25rem', marginTop: '1rem' }}>
  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 0; video.play(); } }}>
      00:00 - Build any app, any stack (ChatGPT Chrome Extension prompt)
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 43; video.play(); } }}>
      00:43 - Use your existing subscriptions or API keys (ChatGPT, Gemini, Github Copilot, Claude Code, GLM, etc.)
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 73; video.play(); } }}>
      01:13 - Use Claude Code directly in Orchids
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 93; video.play(); } }}>
      01:33 - Complete VS Code Editor
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 150; video.play(); } }}>
      02:30 - Use any database and payments provider (Supabase, Neon, Stripe, RevenueCat, etc.)
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 186; video.play(); } }}>
      03:06 - Full Github functionality
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 197; video.play(); } }}>
      03:17 - One click deploy any project
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 219; video.play(); } }}>
      03:39 - Built in browser to view, test, and edit any web app
    </button>
  </li>

  <li style={{ marginBottom: '0.5rem' }}>
    <button type="button" style={{ background: 'none', border: 'none', padding: 0, color: '#FCAA26', font: 'inherit', fontWeight: 600, cursor: 'pointer', textAlign: 'left', width: '100%', lineHeight: '1.5', textDecoration: 'underline', textUnderlineOffset: '3px' }} onClick={() => { const video = document.getElementById('full-tutorial-video'); if (video) { video.currentTime = 235; video.play(); } }}>
      03:55 - Running the fully built Chrome Extension
    </button>
  </li>
</ul>