AI native

अपने एजेंट के साथ Beam प्रोजेक्ट पर काम करें

Beam CLI बाहरी एजेंट को वास्तविक Screenshot और वीडियो प्रोजेक्ट देखने और संपादित करने देता है। उससे दस्तावेज़ पढ़ने, बदलाव करने और परिणाम जाँचने को कहें। वही प्रोजेक्ट Beam में संपादन योग्य बना रहता है।

• मूल सामग्री संपादित करें: क्लिप ट्रिम या खिसकाएँ, ज़ूम और बैकग्राउंड समायोजित करें, या Screenshot लेयर, ग्रुप और प्रभाव व्यवस्थित करें।
• Vue, GSAP या WebGL वैकल्पिक रूप से उपयोग करके HTML और TypeScript कलाकृति बनाएँ और उसे लेयर के रूप में प्रकाशित करें।
• लाइव कैनवस देखें, संपादन पूर्ववत करें और Beam के रेंडरर से एक्सपोर्ट करें।

कमांड-लाइन लॉन्चर सेटअप करें

Beam के साथ शामिल beam-cli लॉन्चर उपयोग करें। स्रोत चेकआउट से चलाते समय beam-cli की जगह bun run beam लिखें और रिपॉज़िटरी रूट से कमांड चलाएँ। पहले टूल सूचीबद्ध करें और उनके स्कीमा पढ़ें; खोज के ये कमांड डेस्कटॉप ऐप के बिना काम करते हैं।

टूल कॉल में सीधे JSON, at sign से शुरू होने वाली आर्ग्युमेंट फ़ाइल, या stdin से JSON के लिए डैश दिया जा सकता है। परिणाम stdout पर और त्रुटियाँ nonzero exit code के साथ stderr पर जाती हैं। सीधे दिए उदाहरण POSIX quoting उपयोग करते हैं। Windows पर आर्ग्युमेंट फ़ाइल से shell quoting का अंतर टलता है। फ़ाइल में पथ उसी फ़ोल्डर के सापेक्ष और सीधे दिए पथ कार्यशील डायरेक्टरी के सापेक्ष होते हैं।

beam-cli tools list
beam-cli tools describe html.publish
beam-cli docs agent
beam-cli docs html
beam-cli docs gradients
beam-cli docs commands
beam-cli commands

Beam skills इंस्टॉल करें

उस प्रोजेक्ट में टर्मिनल खोलें जहाँ आपका एजेंट काम करता है, फिर skills इंस्टॉल करें। डिफ़ॉल्ट स्थान उसी प्रोजेक्ट के भीतर .agents/skills है। --global स्पष्ट रूप से दिए बिना कुछ भी वैश्विक रूप से इंस्टॉल नहीं होता। इसके बाद एजेंट की skills फिर लोड करें या नया सत्र शुरू करें।

इस पैक में दस खास skills हैं। नीचे दिए कमांड से सभी इंस्टॉल करें या beam-cli beam-design beam-composition beam-animation जैसे नाम जोड़कर कुछ चुनें। एजेंट-विशिष्ट फ़ोल्डर के लिए --agent claude, --agent cursor या --agent gemini उपयोग करें; ये भी मौजूदा प्रोजेक्ट के भीतर रहते हैं। आपका CLI अभी skills नहीं पहचानता तो नया Beam CLI बिल्ड या अद्यतन स्रोत चेकआउट से bun run beam उपयोग करें।

beam-cli skills install

Skills जाँचें और अपडेट करें

ये कमांड उसी प्रोजेक्ट फ़ोल्डर से चलाएँ। check इंस्टॉल की गई फ़ाइलों की BeamRecorder/Beam के पैक से तुलना करता है और कुछ नहीं बदलता। इसकी JSON रिपोर्ट मौजूदा, अनुपलब्ध, पुरानी, संशोधित या टकराती skills बताती है; चुनी गई कोई skill अद्यतन न हो तो यह code 1 के साथ समाप्त होता है। update अनुपलब्ध skills सहित मौजूदा पैक डाउनलोड करता है और आपके स्थानीय संपादन सुरक्षित रखता है।

संचालित पैक Beam के GitHub रिपॉज़िटरी में .skills/Beam-cli पर है। इंस्टॉल से पहले फ़ाइलें सत्यापित होती हैं। अपडेट स्पष्ट रूप से चलाने पड़ते हैं; सामान्य संपादन कमांड नई skills नहीं जाँचते। स्थिर संस्करण चाहिए तो --ref के साथ tag या commit दें और कस्टम फ़ोल्डर तथा सुरक्षित स्थानीय बदलावों के लिए docs skills पढ़ें।

beam-cli skills check
beam-cli skills update
beam-cli docs skills

प्रोजेक्ट खोलें और उसकी स्थिति पढ़ें

Beam शुरू करें, फिर प्रोजेक्ट सूचीबद्ध करें। नीचे का उदाहरण पारदर्शी Screenshot कैनवस बनाता है। PROJECT_UUID को लौटाई गई id से बदलें, उसे खोलें और projects.list में उसके open होने तक प्रतीक्षा करें। फिर मौजूदा दस्तावेज़ और revision के लिए documents.snapshot माँगें।

Studio के लिए बनाने और खोलने, दोनों में kind: video उपयोग करें। projects.open सामान्यतः नया एडिटर खोलता है; disposition: reuse सक्रिय एडिटर की जगह लेता है। एक से अधिक Beam instance चल रहे हों तो instances से मिली id के साथ --instance PID जोड़ें।

beam-cli instances
beam-cli tools call projects.list
beam-cli tools call projects.create '{"kind":"image","name":"Feature card","width":1920,"height":1080}'
beam-cli tools call projects.open '{"projectId":"PROJECT_UUID","kind":"image"}'
beam-cli tools call documents.snapshot '{"projectId":"PROJECT_UUID"}'

Screenshot लेयर संपादित करें

यह उदाहरण ऊपर बनाए खाली कैनवस के बजाय कैप्चर की गई छवि वाले प्रोजेक्ट में उपयोग करें। इसे edit.json के रूप में सहेजें और SCREENSHOT_UUID तथा expectedRevision को documents.snapshot के मानों से बदलें। कैप्चर की गई स्रोत लेयर की id image है; यह ट्रांज़ैक्शन उसका नाम बदलता और 3D कोण जोड़ता है।

अन्य लेयर id स्नैपशॉट में मिलेंगी। कमांड इंटरफ़ेस में स्थान, क्रॉप, ग्रुपिंग, क्रम, रंग, प्रभाव और PNG/WebP सेटिंग बदली जा सकती हैं। संपादन से पहले पेलोड स्कीमा पढ़ें। effects array पूरा स्टैक बदलता है, इसलिए जिन मौजूदा प्रभावों को रखना है उन्हें भी शामिल करें।

{
  "projectId": "SCREENSHOT_UUID",
  "expectedRevision": 0,
  "operationId": "screenshot-perspective-1",
  "commands": [
    {
      "type": "still.layer.rename",
      "payload": {
        "layerId": "image",
        "name": "Product capture"
      }
    },
    {
      "type": "still.layer.compositing",
      "payload": {
        "layerId": "image",
        "patch": {
          "rotation3d": {
            "x": 6,
            "y": -12,
            "perspective": 1200
          }
        }
      }
    }
  ]
}

मौजूदा वीडियो क्लिप संपादित करें

क्लिप वाले वीडियो प्रोजेक्ट में इसके बजाय यह ट्रांज़ैक्शन edit.json के रूप में उपयोग करें। ताज़ा snapshot से VIDEO_UUID, expectedRevision और CLIP_ID बदलें। इससे बैकग्राउंड ब्लर सेट होता है और क्लिप टाइमलाइन पर एक सेकंड पर चली जाती है।

वीडियो कमांड में ट्रिमिंग, स्प्लिटिंग, प्लेबैक गति, आवाज़, कैप्शन, एलिमेंट, दृश्य समूह, property animation और ज़ूम भी शामिल हैं। assets.import मीडिया को प्रोजेक्ट में कॉपी करता है; फिर उसे टाइमलाइन पर रखने के लिए document कमांड उपयोग करें।

{
  "projectId": "VIDEO_UUID",
  "expectedRevision": 0,
  "operationId": "video-layout-1",
  "commands": [
    {
      "type": "render.patch",
      "payload": {
        "blurPercent": 12
      }
    },
    {
      "type": "clip.move",
      "payload": {
        "clipId": "CLIP_ID",
        "startMs": 1000
      }
    }
  ]
}

ट्रांज़ैक्शन लागू करें

edit.json को उसमें बताए प्रोजेक्ट पर लागू करें। कमांड एक परमाणु संपादन और एक undo चरण बनाते हैं: बैच अमान्य हो तो कोई आंशिक बदलाव लागू नहीं होता। लॉक की गई सामग्री सुरक्षित रहती है।

हर नए संपादन को नया operationId दें। किसी id का पुनः उपयोग केवल उसी अनुरोध को ज्यों का त्यों दोहराने के लिए करें। Beam में पूर्ववत करें या मौजूदा expectedRevision और विशिष्ट requestId के साथ documents.undo/documents.redo कॉल करें।

beam-cli tools call documents.transact @edit.json

स्थिर HTML कार्ड बनाएँ

नीचे के उदाहरण से composition/index.html बनाएँ। फ़ॉन्ट, शैली और मीडिया स्थानीय रखें। HTML और TypeScript, Vue के बिना काम करते हैं; आयात की गई लाइब्रेरी इस स्रोत प्रोजेक्ट में इंस्टॉल करें।

स्थिर कार्ड को animation clock की ज़रूरत नहीं होती। Beam स्थानीय फ़ॉन्ट और छवि डिकोड होने तक प्रतीक्षा करता है। असिंक्रोनस शुरुआत के लिए window.beamComposition पर ready promise उपलब्ध कराएँ।

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html, body { margin: 0; width: 100%; height: 100%;
        overflow: hidden; background: transparent; }
      .card { position: absolute; inset: 100px; padding: 80px;
        border-radius: 40px; background: #151517; color: white;
        font: 64px sans-serif; }
    </style>
  </head>
  <body><div class="card">Beam feature</div></body>
</html>

प्रकाशन अनुरोध तैयार करें

publish.json को composition फ़ोल्डर के पास सहेजें। खुले Screenshot प्रोजेक्ट की id और मौजूदा revision उपयोग करें। Width और height HTML कैनवस के पिक्सेल आयाम हैं। Screenshot प्रकाशन के लिए durationMs: 0 आवश्यक है। framework: html या Vue स्रोत के लिए vue दें।

{
  "projectId": "SCREENSHOT_UUID",
  "expectedRevision": 0,
  "entry": "./composition/index.html",
  "width": 1920,
  "height": 1080,
  "durationMs": 0,
  "framework": "html",
  "name": "Feature card"
}

कार्ड Beam में जोड़ें

html.publish स्रोत कंपाइल करता है, उसका स्रोत और बंडल प्रोजेक्ट में सहेजता है और HTML लेयर जोड़ता है। यह layerId और नया revision लौटाता है। Screenshot प्रोजेक्ट उस लेयर का रेंडर किया PNG भी सहेजता है।

उसी कार्ड का दूसरा संस्करण बनाने के लिए publish.json में लौटाया गया layerId रखें और expectedRevision रीफ़्रेश करें। अपडेट स्थान, लेयर क्रम, दृश्यता और प्रभाव बनाए रखता है। प्रकाशित स्रोत संस्करण दोबारा खोले गए प्रोजेक्ट और undo इतिहास में उपलब्ध रहते हैं।

beam-cli tools call html.publish @publish.json

Seekable clock से वीडियो लेयर एनिमेट करें

कार्ड को पाँच सेकंड तक एनिमेट करने के लिए स्रोत प्रोजेक्ट में GSAP इंस्टॉल करें और नीचे का कोड composition/main.ts में सहेजें। index.html में ./main.ts के लिए module script जोड़ें। publish.json में खुले वीडियो प्रोजेक्ट की id, durationMs: 5000 और fps: 30 दें। इस वीडियो में पहली बार प्रकाशित करने से पहले Screenshot layerId हटाएँ।

window.beamComposition.seek(timeMs) उपलब्ध कराएँ। Beam मिलीसेकंड में सटीक समय माँगता है और पीछे भी seek कर सकता है। GSAP को paused रखें और उसकी timeline का समय स्पष्ट रूप से सेट करें। Vue में प्रतिक्रियाशील अपडेट की प्रतीक्षा करें; WebGL में पूरा फ़्रेम बनाएँ। असिंक्रोनस तैयारी के लिए seek promise लौटा सकता है।

import { gsap } from 'gsap';

const timeline = gsap.timeline({ paused: true });
timeline.fromTo('.card',
  { opacity: 0, y: 80 },
  { opacity: 1, y: 0, duration: 1 }, 0);
timeline.to('.card', { scale: 1.05, duration: 3 }, 1);
timeline.to('.card', { opacity: 0, duration: 1 }, 4);

Object.assign(window, {
  beamComposition: {
    seek(timeMs: number) {
      timeline.time(timeMs / 1000, false);
    },
  },
});

Beam में स्रोत सेव का प्रीव्यू देखें

publish.json में मौजूदा layerId रखें और html watch शुरू करें। यह एक बार प्रकाशित करता है, बाद के अपडेट से पहले लाइव revision पढ़ता है और स्रोत सेव होने पर फिर प्रकाशित करता है। Ctrl+C watcher रोकता है। कंपाइल या revision त्रुटि होने पर पिछली प्रकाशित लेयर उपलब्ध रहती है।

सहेजी लेयर के कोड पर लौटने के लिए documents.snapshot से HTML descriptor लेकर html.source कॉल करें। संपादन से पहले उस सहेजे स्रोत की प्रति कार्यशील फ़ोल्डर में रखें; प्रकाशित स्रोत संस्करण अपरिवर्तनीय हैं। प्रीव्यू अनुरोधों को मिलाकर भेज सकता है, जबकि एक्सपोर्ट टाइमलाइन का हर अनुरोधित फ़्रेम रेंडर करता है।

beam-cli html watch @publish.json

छवियाँ और फ़ॉन्ट शामिल करें

• स्थानीय छवियाँ और फ़ॉन्ट स्रोत फ़ोल्डर में रखें या name और source फ़ील्ड वाले references प्रविष्टियाँ दें। Beam इन फ़ाइलों को HTML के पास references के अंतर्गत कॉपी करता है।
• दूसरे सहेजे प्रोजेक्ट के प्रोजेक्ट-मीडिया रेफ़रेंस के लिए उसका projectId शामिल करें। assets.resolve निरीक्षण हेतु प्रोजेक्ट की फ़ाइल ढूँढ़ता है; html.publish उसे बंडल में कॉपी कर सकता है।
• Beam में शब्दावली संपादित करनी हो तो मूल टेक्स्ट उपयोग करें: Screenshot के लिए still.layer.add या वीडियो एलिमेंट के लिए clip.insert। HTML के भीतर का टेक्स्ट उसके स्रोत कोड में संपादित होता है।
• fonts.import TTF, OTF, WOFF और WOFF2 स्वीकार करता है। लौटे family और id के लिए text.style.fontFamily तथा text.style.fontAssetId सेट करें, ताकि संपादन योग्य टेक्स्ट प्रीव्यू और एक्सपोर्ट में वही फ़ॉन्ट उपयोग करे।

beam-cli tools call fonts.list
beam-cli tools call fonts.import '{"source":"./fonts/HankenGrotesk.ttf"}'

परिणाम जाँचें और एक्सपोर्ट करें

CLI Chromium backend एक बार इंस्टॉल करें या BEAM_CHROMIUM_EXECUTABLE को संगत ब्राउज़र पर सेट करें। HTML लेयर वाला खुला प्रोजेक्ट एक्सपोर्ट करते समय Beam चालू रखें: वही उनके रेंडर किए फ़्रेम उपलब्ध कराता है। नीचे की id बदलें और वीडियो की अवधि के भीतर का फ़्रेम समय चुनें।

Screenshot अपने दस्तावेज़ की PNG/WebP सेटिंग उपयोग करता है; आउटपुट एक्सटेंशन उसी फ़ॉर्मैट से मिलाएँ। वीडियो कंपोज़िशन की लेयर, कैप्शन और ज़ूम सहित MP4 और WebM समर्थित करता है। मौजूदा गंतव्य को जानबूझकर बदलने के लिए overwrite: true दें।

beam-cli browser install
beam-cli tools call render.export '{"projectId":"SCREENSHOT_UUID","output":"feature.png"}'
beam-cli tools call render.export '{"projectId":"VIDEO_UUID","output":"demo.mp4","format":"mp4"}'
beam-cli tools call render.frame '{"projectId":"VIDEO_UUID","timeMs":2000,"output":"frame.png"}'

डेस्कटॉप ऐप के बिना छवि फ़ाइल संपादित करें

मौजूदा PNG और उसके वास्तविक आयामों से शुरुआत करें। Screenshot ट्रांज़ैक्शन का केवल commands array edits.json में सहेजें, फिर नीचे दिखाया standalone दस्तावेज़ बनाएँ, संपादित करें और एक्सपोर्ट करें। यह कार्यप्रवाह फ़ाइल दस्तावेज़ बदलता है, खुले Beam एडिटर को नहीं।

Standalone edit और serve को डेस्कटॉप ऐप नहीं चाहिए। एक्सपोर्ट के लिए CLI Chromium backend आवश्यक है। एडिटर के बिना HTML वीडियो के लिए job file के साथ motion उपयोग करें; beam-cli docs html entry, dimensions, duration in seconds, fps और format बताता है।

beam-cli create image capture.png 1920 1080 screenshot.json
beam-cli edit screenshot.json edits.json edited-screenshot.json
beam-cli export edited-screenshot.json finished.png

समझें कि स्थानीय रूप से क्या चलता है

CLI प्रमाणित स्थानीय endpoint के ज़रिए डेस्कटॉप से जुड़ता है। Beam स्थानीय रूप से रेंडर करता है। प्रकाशित HTML, Node पहुँच या Beam preload के बिना sandbox की गई विंडो में चलता है; बाहरी नेटवर्क अनुरोध अवरुद्ध होते हैं, इसलिए संसाधन स्थानीय रूप से बंडल करें।

एजेंट और मॉडल आप देते हैं। उनका डेटा प्रबंधन आपके चुने प्रदाता पर निर्भर है। Beam दस्तावेज़ टूल और रेंडरिंग इंटरफ़ेस देता है; इसमें AI चैट सदस्यता, MCP stdio सर्वर या साझा नेटवर्क संपादन शामिल नहीं हैं।