BuilderIO / gpt-crawler

Crawl a site to generate knowledge files to create your own custom GPT from a URL
https://www.builder.io/blog/custom-gpt
ISC License
18.14k stars 1.88k forks source link

How to supply read-able code to the GPT? #155

Closed lucastobrazil closed 3 months ago

lucastobrazil commented 3 months ago

I am hoping to get the crawler to read the docs on our design system website (https://www.vitalitydesignsystem.com/) which it does perfectly! However, as you can see on the website (this page for example), the code snippets and examples are rendered inline in the html key and chatGPT does not appear to be able to read them.

I have turned on code interpreter and asked a prompt like the below, however even when asking something like "write me an example usage of the Button component in vitality design system. make it a primary appearance", it says "The document doesn't directly provide an example of a Button component with a primary appearance in the Vitality Design System"

Here is the ChatGPT i created

and below is a snippet of how the page got parsed. I was hoping to try and somehow get it understood by the GPT.

{
    "title": "Avatar - Vitality Design System",
    "url": "https://www.vitalitydesignsystem.com/components/avatar/",
    "html": "Avatar\nJump to Props\nRepresent users in a visual way\nOn this page\nImport\nContents\nSizes\nColour Variants\nOn Primary\nInteractive Avatars\nFigma Library\nProps\nAvatar Props\nAvatarButton Props\nAvatarLink Props\n\nThe Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.\n\nImport\nimport { Avatar, AvatarButton, AvatarLink } from \"@vitality-ds/core\";\n\nContents\n\nAn Avatar can contain either a user profile photo or the user's initials. When both details are present, the initials will show before the image loads.\n\nSizes\n\nUse the default size when possible. Depending on the visual context in which the Avatar is used, there are options to alter its size. The size should generally match the surrounding font size.\n\nTM\nMM\nQT\nLA\nWW\nLA\nTM\n<Stack direction=\"horizontal\" spacing=\"sm\">\n\n  <Avatar initials=\"TM\" />\n\n  <Avatar size=\"xs\" initials=\"MM\" />\n\n  <Avatar size=\"sm\" initials=\"QT\" />\n\n  <Avatar size=\"md\" initials=\"LA\" />\n\n  <Avatar size=\"lg\" initials=\"WWW\" />\n\n  <Avatar size=\"lg\" imageSrc=\"https://i.pravatar.cc/300\" initials=\"LA\" />\n\n "
  },