Building Anthropic Claude 3.5 Sonnet Artifacts: Step-by-Step Tutorial

Поделиться
HTML-код
  • Опубликовано: 13 окт 2024

Комментарии • 19

  • @DevelopersDigest
    @DevelopersDigest  3 месяца назад +1

    Updates coming to the repo here shortly: git.new/answr ⭐

    • @oakgnarl5021
      @oakgnarl5021 3 месяца назад +2

      wen repo update??? nice work by the way!

    • @DevelopersDigest
      @DevelopersDigest  3 месяца назад +1

      @@oakgnarl5021 Thank you - I will try and get it up tonight (mind you I am still working through number of pieces but I have started to figure out the initial support for both react + memaid)

    • @stonedizzleful
      @stonedizzleful 3 месяца назад +2

      @@DevelopersDigest Did you end up uploading to github?

    • @Timetravelingdeveloper
      @Timetravelingdeveloper 3 месяца назад +2

      Has this been uploaded yet?

  • @Rrr_gh
    @Rrr_gh 2 месяца назад +1

    So epic!👏 Any idea when the code repo for this project will be out ? Or if anyone knows any other currently available ?

  • @somare2364
    @somare2364 3 месяца назад +3

    This is so great! I've been looking into it and I was pretty sure someone had already tried it, and I was right. Thanks a lot, I hope you keep working on it.

    • @DevelopersDigest
      @DevelopersDigest  3 месяца назад +1

      Thank you 🙏 I am planning to continue working on this. I just got the initial react support working and rendering. There are a lot of other pieces I am still working through. I will make a part 2 once I figure out some more pieces of this 🙂
      x.com/Dev__Digest/status/1805657511158235333

  • @stonedizzleful
    @stonedizzleful 3 месяца назад +2

    Absolutely fantastic

  • @Dedjkeorrn42
    @Dedjkeorrn42 3 месяца назад +2

    This is amazing! I'd love to work with this in rust.
    Artifacts are so useful but the code limit, languages limit, and needing to write the entire script every time pains me.
    Some way to allow the current script to be edited without rewriting it from start to finish would be great as this would reduce how long it takes for the AI to edit the script and reduce API use.
    Open source is king!

    • @DevelopersDigest
      @DevelopersDigest  3 месяца назад +1

      Thanks - yes they are very useful and a really interesting UX feature to work through :)

  • @yann7460
    @yann7460 3 месяца назад +2

    Great work! How can we reach out to you? I'd love to contribute

  • @Dedjkeorrn42
    @Dedjkeorrn42 3 месяца назад +1

    Its been a week and a half without updating the repo.
    Not to be rude but whats the holdup?

  • @Daniel_Gauerke
    @Daniel_Gauerke 2 месяца назад

    Has this been updated yet?

    • @DevelopersDigest
      @DevelopersDigest  2 месяца назад

      Apologies for the delay on this - stand alone repo coming soon!

  • @dominikandritsch9358
    @dominikandritsch9358 2 месяца назад

    🎯 Key points for quick navigation:
    00:00 *🛠️ Building out an anthropic CLA artifacts feature*
    - Erläuterung zur Funktionsweise und Anzeige von Artefakten auf dem Bildschirm
    - Demonstration eines funktionierenden Schlangenspiels
    - Einstellung der Webentwicklungsumgebung mit HTML, JavaScript und CSS
    02:18 *💻 Verwendung des Systemnachrichten-Prompts von Claude*
    - Verwendung des von Claude generierten Systemprompt-Textes
    - Modell folgt dem Systemprompt und modelliert die Artefakte entsprechend
    - Beeindruckende prompt-Engineering-Techniken und Tests mit verschiedenen Modellen
    05:07 *🧩 Rendering von Artefakten und Verwendung verschiedener Arten von Artefakten*
    - Verwendung von s für HTML und direktes Rendern von SVG
    - Arbeit an der React-Rendering-Funktion
    - Potenzielle Verwendung von Mermaid-Diagrammen als Artefakte und deren Integration
    06:01 *🔄 Filtrieren von Inhalten basierend auf unterschiedlichen Artefaktarten*
    - Unterscheidung zwischen entwickelnden, verdaulichen und artefaktbezogenen Inhalten
    - Bereinigung und Anpassung von XML-Tags für die jeweiligen Arten von Inhalten
    - Anpassung der Darstellung von Artefakten in verschiedenen Anzeigebereichen
    07:09 *📊 Rendering verschiedener Ansichten und Methoden zur Funktionsaufrufabfolge*
    - Definition und Aufruf von Funktionen für die Inhaltsrendering-Logik
    - Einbindung eines Skelett-Laders und des anthropic Logos
    - Implementierung von Viewer-Wrap für Markdown-Inhalte und Anzeigefunktionen.
    Made with HARPA AI