AI native

Pracuj z agentem nad projektem Beam

Beam CLI pozwala zewnętrznemu agentowi sprawdzać i edytować rzeczywiste projekty Screenshot i wideo. Poproś go o odczytanie dokumentu, wprowadzenie zmiany i sprawdzenie wyniku. Ten sam projekt pozostaje edytowalny w Beam.

• Edytuj natywną zawartość: przycinaj lub przesuwaj klipy, dostosowuj zbliżenia i tła albo układaj warstwy, grupy i efekty Screenshot.
• Twórz grafiki HTML i TypeScript, opcjonalnie z użyciem Vue, GSAP lub WebGL, i publikuj je jako warstwę.
• Sprawdź bieżący obszar roboczy, cofnij edycję i eksportuj za pomocą renderera Beam.

Skonfiguruj program uruchamiający wiersza poleceń

Użyj programu beam-cli dołączonego do Beam. W repozytorium źródłowym zastąp beam-cli przez bun run beam i uruchom polecenie z katalogu głównego repozytorium. Zacznij od wyświetlenia narzędzi i odczytania ich schematów; te polecenia rozpoznawcze działają bez aplikacji desktopowej.

Wywołania narzędzi przyjmują wbudowany JSON, plik argumentów poprzedzony znakiem @ albo myślnik oznaczający JSON ze stdin. Wyniki trafiają do stdout, a błędy do stderr z niezerowym kodem wyjścia. Przykłady wbudowane używają cytowania POSIX. W Windows pliki argumentów pozwalają uniknąć różnic w cytowaniu powłoki. Ścieżki w pliku są rozwiązywane względem niego; ścieżki wbudowane względem katalogu roboczego.

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

Zainstaluj umiejętności Beam

Otwórz terminal w projekcie, nad którym pracuje agent, a następnie zainstaluj umiejętności. Domyślne miejsce docelowe to .agents/skills w tym projekcie. Nic nie jest instalowane globalnie, chyba że jawnie podasz --global. Następnie przeładuj umiejętności agenta lub rozpocznij nową sesję.

Pakiet zawiera dziesięć specjalistycznych umiejętności. Zainstaluj wszystkie poleceniem poniżej albo dopisz nazwy, aby wybrać podzbiór, na przykład beam-cli beam-design beam-composition beam-animation. Dla folderu konkretnego agenta użyj --agent claude, --agent cursor lub --agent gemini; pozostaną one w bieżącym projekcie. Jeśli zainstalowany CLI nie rozpoznaje jeszcze umiejętności, użyj nowszej kompilacji Beam CLI albo bun run beam z aktualnego repozytorium źródłowego Beam.

beam-cli skills install

Sprawdź i zaktualizuj umiejętności

Uruchom te polecenia z tego samego folderu projektu. check porównuje zainstalowane pliki z pakietem w BeamRecorder/Beam i niczego nie zmienia. Raport JSON wskazuje umiejętności aktualne, brakujące, nieaktualne, zmodyfikowane lub powodujące konflikt; kod wyjścia wynosi 1, gdy dowolna wybrana umiejętność nie jest aktualna. update pobiera bieżący pakiet, w tym brakujące umiejętności, i chroni lokalne zmiany.

Utrzymywany pakiet znajduje się w .skills/Beam-cli w repozytorium GitHub Beam. Pliki są weryfikowane przed instalacją. Aktualizacje są jawne; zwykłe polecenia edycji nie sprawdzają nowych umiejętności. Użyj --ref z tagiem lub commitem, aby przypiąć wersję, i przeczytaj dokumentację umiejętności o niestandardowych folderach i chronionych lokalnych zmianach.

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

Otwórz projekt i odczytaj jego stan

Uruchom Beam, a następnie wyświetl listę projektów. Przykład tworzy przezroczysty obszar roboczy Screenshot. Zastąp PROJECT_UUID zwróconym identyfikatorem, otwórz go i zaczekaj, aż projects.list uwzględni ten identyfikator w open. Następnie zażądaj documents.snapshot dla bieżącego dokumentu i rewizji.

W przypadku Studio użyj kind: video zarówno przy tworzeniu, jak i otwieraniu. projects.open zwykle otwiera nowy edytor; disposition: reuse zastępuje aktywny edytor. Jeśli działa więcej niż jedna instancja Beam, dodaj --instance PID z identyfikatorem pobranym z instances.

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"}'

Edytuj warstwę Screenshot

Użyj tego przykładu z projektem zawierającym przechwycony obraz, a nie z pustym obszarem roboczym utworzonym powyżej. Zapisz go jako edit.json i zastąp SCREENSHOT_UUID oraz expectedRevision wartościami z documents.snapshot. Warstwa źródłowego obrazu ma identyfikator image; transakcja zmienia jej nazwę i dodaje kąt 3D.

Znajdź identyfikatory innych warstw w migawce. Interfejs poleceń obsługuje pozycjonowanie, przycinanie, grupowanie, kolejność, kolor, efekty oraz ustawienia PNG/WebP. Przed edycją odczytaj schemat danych. Tablica effects zastępuje cały stos, więc uwzględnij istniejące efekty, które chcesz zachować.

{
  "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
          }
        }
      }
    }
  ]
}

Edytuj istniejący klip wideo

W przypadku projektu wideo zawierającego klip użyj tej transakcji jako edit.json. Zastąp VIDEO_UUID, expectedRevision i CLIP_ID wartościami z nowej migawki. Ustawia rozmycie tła i przesuwa klip na pierwszą sekundę osi czasu.

Polecenia wideo obejmują też przycinanie, dzielenie, szybkość odtwarzania, głośność, napisy, elementy, grupy scen, animację właściwości i zbliżenia. assets.import kopiuje multimedia do projektu; później użyj poleceń dokumentu, aby umieścić je na osi czasu.

{
  "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
      }
    }
  ]
}

Zastosuj transakcję

Zastosuj edit.json do opisanego w nim projektu. Polecenia tworzą jedną atomową edycję i jeden krok cofania: jeśli partia jest nieprawidłowa, żadna częściowa zmiana nie zostanie zatwierdzona. Zablokowana zawartość pozostaje chroniona.

Każdej nowej edycji nadaj nowy operationId. Używaj tego samego identyfikatora tylko przy identycznej ponownej próbie. Możesz cofnąć zmianę w Beam albo wywołać documents.undo/documents.redo z bieżącym expectedRevision i unikalnym requestId.

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

Utwórz statyczną kartę HTML

Utwórz composition/index.html na podstawie przykładu poniżej. Przechowuj czcionki, style i multimedia lokalnie. HTML i TypeScript działają bez Vue; zainstaluj wszystkie importowane biblioteki w tym repozytorium źródłowym.

Statyczna karta nie wymaga zegara animacji. Beam czeka na lokalne czcionki i dekodowanie obrazów. W przypadku asynchronicznej inicjalizacji udostępnij obietnicę ready na window.beamComposition.

<!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>

Przygotuj żądanie publikacji

Zapisz publish.json obok folderu kompozycji. Użyj identyfikatora i bieżącej rewizji otwartego projektu Screenshot. Width i height to wymiary obszaru HTML w pikselach. Publikacje Screenshot wymagają durationMs: 0. Użyj framework: html albo vue dla źródła Vue.

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

Dodaj kartę do Beam

html.publish kompiluje źródło, przechowuje je i pakiet w projekcie oraz wstawia warstwę HTML. Zwraca layerId i nową rewizję. Projekt Screenshot zapisuje też wyrenderowany plik PNG tej warstwy.

Aby opublikować kolejną wersję tej samej karty, pozostaw zwrócony layerId w publish.json i zaktualizuj expectedRevision. Aktualizacja zachowuje położenie, kolejność warstw, widoczność i efekty. Opublikowane wersje źródła pozostają dostępne dla ponownie otwartego projektu i historii cofania.

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

Animuj warstwę wideo za pomocą przewijalnego zegara

Aby animować kartę przez pięć sekund, zainstaluj GSAP w projekcie źródłowym i zapisz poniższy kod jako composition/main.ts. Dodaj do index.html skrypt modułowy ./main.ts. W publish.json ustaw identyfikator otwartego projektu wideo, durationMs: 5000 i fps: 30. Przed pierwszą publikacją w tym wideo usuń Screenshot layerId.

Udostępnij window.beamComposition.seek(timeMs). Beam żąda dokładnych czasów w milisekundach i może cofać się. Wstrzymaj GSAP i jawnie ustaw czas jego osi. W Vue zaczekaj na aktualizacje reaktywne; w WebGL narysuj gotową klatkę. seek może zwracać promise na potrzeby asynchronicznego przygotowania.

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);
    },
  },
});

Wyświetlaj w Beam zapisane zmiany źródła

Pozostaw istniejący layerId w publish.json i uruchom html watch. Publikuje raz, przed kolejnymi aktualizacjami odczytuje bieżącą rewizję i publikuje ponownie po zapisaniu źródła. Ctrl+C zatrzymuje obserwowanie. Błąd kompilacji lub rewizji nie usuwa poprzedniej opublikowanej warstwy.

Aby wrócić do kodu zapisanej warstwy, wywołaj html.source z deskryptorem HTML z documents.snapshot. Przed edycją skopiuj zapisane źródło do folderu roboczego; opublikowane wersje źródła są niezmienne. Podgląd może łączyć żądania, podczas gdy eksport renderuje każdą żądaną klatkę osi czasu.

beam-cli html watch @publish.json

Dodaj obrazy i czcionki

• Przechowuj lokalne obrazy i czcionki w folderze źródłowym albo przekaż wpisy references z polami name i source. Beam kopiuje te pliki do folderu references obok HTML.
• Aby użyć multimedia z innego zapisanego projektu, podaj projectId. assets.resolve lokalizuje plik należący do projektu do inspekcji; html.publish może skopiować go do pakietu.
• Użyj natywnego tekstu, gdy chcesz edytować treść w Beam: still.layer.add dla Screenshot lub clip.insert dla elementów wideo. Tekst w HTML edytuje się w kodzie źródłowym.
• fonts.import akceptuje TTF, OTF, WOFF i WOFF2. Ustaw text.style.fontFamily i text.style.fontAssetId na zwróconą rodzinę i identyfikator, aby edytowalny tekst używał tej czcionki w podglądzie i eksporcie.

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

Sprawdź i eksportuj wynik

Zainstaluj raz backend Chromium CLI albo ustaw BEAM_CHROMIUM_EXECUTABLE na zgodną przeglądarkę. Podczas eksportu otwartego projektu z warstwami HTML pozostaw Beam uruchomiony: udostępnia wyrenderowane klatki. Zastąp identyfikatory poniżej i wybierz czas klatki mieszczący się w czasie trwania wideo.

Screenshot używa ustawień PNG/WebP dokumentu; rozszerzenie pliku wyjściowego musi odpowiadać formatowi. Wideo obsługuje MP4 i WebM wraz z warstwami kompozycji, napisami i zbliżeniami. Aby celowo zastąpić istniejący plik docelowy, podaj 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"}'

Edytuj plik obrazu bez aplikacji desktopowej

Zacznij od istniejącego pliku PNG i jego rzeczywistych wymiarów. Zapisz tylko tablicę commands z transakcji Screenshot jako edits.json, a następnie utwórz, edytuj i eksportuj poniższy samodzielny dokument. Ten przepływ pracy zmienia dokument plikowy, a nie otwarty edytor Beam.

Samodzielne edit i serve nie wymagają aplikacji desktopowej. Eksport wymaga backendu Chromium CLI. Aby utworzyć wideo HTML bez edytora, użyj motion z plikiem zadania; beam-cli docs html opisuje wpis, wymiary, czas w sekundach, fps i 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

Dowiedz się, co działa lokalnie

CLI łączy się z aplikacją desktopową przez uwierzytelniony lokalny punkt końcowy. Beam renderuje lokalnie. Opublikowany HTML działa w izolowanych oknach bez dostępu do Node ani preload Beam; zewnętrzne żądania sieciowe są blokowane, dlatego dołącz zasoby lokalnie.

Ty dostarczasz agenta i model. Sposób przetwarzania ich danych zależy od wybranego dostawcy. Beam udostępnia narzędzia dokumentu i interfejs renderowania; nie obejmuje subskrypcji czatu AI, serwera MCP stdio ani współdzielonej edycji sieciowej.