Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL
Published: 2023-12-21 15:11:39

> ✒️ _Written by [Steve Sewell](https://twitter.com/steve8708)_

Let's create a custom GPT in just two minutes using a new open-source project called [GPT Crawler](https://github.com/BuilderIO/gpt-crawler). This project allows us to provide a site URL, which it will crawl and use as the knowledge base for the GPT.

You can either share this GPT or integrate it as a custom assistant into your sites and apps.

## Why create a custom GPT from a site

I created my first custom GPT based on the [Builder.io](http://builder.io/) [docs site](https://www.builder.io/c/docs/developers), [forum](https://forum.builder.io/), and [example projects on github](https://github.com/builderio/builder) and it can now answer detailed questions with code snippets about integrating [Builder.io](http://builder.io/) into your site or app. You can try it [here](https://chat.openai.com/g/g-kywiqipmR-builder-io-assistant) (currently requires a paid ChatGPT plan).

Our hope is that by making our docs site interactive, people can more simply find the answers they are looking for using a chat interface.

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1a38a684a7d548d6a0f57e0772397648%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=1a38a684a7d548d6a0f57e0772397648&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>

And this can help not just with discoverability, saving people time not having to dig through to find the specific docs they need, but also personalize the results, so even the most esoteric questions can be answered.

This method can be applied to virtually anything to create custom bots with up-to-date information from any resource on the web.

## Get started with GPT Crawler

First, we'll use this new GPT crawler project that I've just open-sourced.

### Clone the repo

To get started, all we need to do is clone the repository, which we can do via a simple git clone command.

```
git clone https://github.com/builderio/gpt-crawler
```

### Install dependencies

After cloning, I'll cd into the repository and then install the dependencies with NPM install.

```
cd gpt-crawler
npm install
```

### Configure the crawler

Next, we open the config.ts file in the code and supply our configuration. Here, we can provide a base URL, where the crawl will start and look for links to crawl subsequent pages. We can also provide a matching pattern. For instance, I might want to crawl only docs and nothing else.

```
export const config: Config = {
  // Start the crawl at this URL
  url: "https://www.builder.io/c/docs/developers",
  // Only crawl URLs matching this pattern
  match: "https://www.builder.io/c/docs/**",
  // Only grab the text from within this selector
  selector: `.docs-builder-container`,
  // Don't crawl more than 1000 pages
  maxPagesToCrawl: 1000,
  // The file name that our results will output to
  outputFileName: "output.json",
};
```

I recommend providing a selector as well. For the Builder docs, for example, I set it to scrape only a specific area and not the sidebar, navigation, or other elements.

### Run the crawler

Now, we can run NPM start in our terminal and watch in real time as the crawler processes your pages.

```
npm start
```
<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc187d5f90175413089ac05c595ee2789%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=c187d5f90175413089ac05c595ee2789&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>

This crawler uses a headless browser, so it can include any markup, even those that are purely client-side rendered. You can also customize the crawler to log into a site to crawl non-public information as well

### Upload your knowledge file

After the crawl is complete, we'll have a new `output.json` file, which includes the title, URL, and extracted text from all the crawled pages.

```
[
  {
    "title": "Creating a Private Model - Builder.io",
    "url": "https://www.builder.io/c/docs/private-models",
    "html": "..."
  },
  {
    "title": "Integrating Sections - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-section-building",
    "html": "..."
  },
  ...
]
```

### Create a custom GPT (UI access)

We can now upload this directly to ChatGPT by creating a new GPT, configuring it, and then uploading the file we just generated for knowledge. Once uploaded, this GPT assistant will have all the information from those docs and be able to answer unlimited questions about them.

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0222b67a9aab4a0b8f1ccbb5e8e79605%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=0222b67a9aab4a0b8f1ccbb5e8e79605&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>
### Create a custom assistant (API access)

Alternatively, if you want to integrate this into your own products, you can go to the [OpenAI API dashboard](https://platform.openai.com/docs/overview), create a new assistant, and upload the generated file in a similar manner.

This allows you to access the assistant over an API, providing custom-tailored assistance within your products that have specific knowledge about your product, right from your docs or any other website, simply by providing a URL and crawling the web

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1c941e30667948c6a5c83367268c4be2%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=1c941e30667948c6a5c83367268c4be2&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>
## Conclusion

If you have a use case where you or others would value a custom GPT specifically focused on a given topic or information set that can be scanned via a website, give this a try and I can’t wait to see what you build!

And if you see ways to make this project better, [send a PR](https://github.com/BuilderIO/gpt-crawler)!

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0b0cf2694b0442f7a5c51628fa278e56%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=0b0cf2694b0442f7a5c51628fa278e56&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video> ![](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fa59bf5c79450490387c6ffe5914637d6?width=389) ![](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fec73bc7266784389afd672007bfbdc94?width=308)

Introducing Visual Copilot: a new AI model to convert Figma designs to high quality code in a click.  
  
No setup needed. 100% free. Supports all popular frameworks.

[Try Visual Copilot](https://builder.io/signup)
##### _Read the [full post](https://www.builder.io/blog/custom-gpt) on the [Builder.io blog](https://www.builder.io/blog)_