langchain supabase website chatbot

Langchain & Supabase- 웹 사이트를위한 chatgpt chatbot 만들기

langchain, supabase, typescript, openai 및 next.js를 사용하여 웹 사이트의 chatgpt chatbot을 만듭니다. Langchain은 확장 가능한 AI/LLM 앱을보다 쉽게 ​​구축 할 수있는 프레임 워크입니다. Supabase는 PG 벡터 확장을 사용하여 임베딩을 저장할 수있는 오픈 소스 Postgres 데이터베이스입니다.

튜토리얼 비디오

도움이 필요하면 트위터를 통해 연락하십시오

이 Repo 및 Tutorial의 시각적 안내서는 visual guide 폴더에 있습니다.

개발

1. 레포를 복제하십시오

 git clone [github https url]

2. 패키지를 설치하십시오

 pnpm install

3. .env 파일을 설정하십시오

• .env.local.example .env 로 복사하십시오 .env 파일은 다음과 같습니다.

 OPENAI_API_KEY=

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

• OpenAi를 방문하여 API 키를 검색하고 .env 파일에 삽입하십시오.
• Supabase를 방문하여 데이터베이스를 작성하고 Docs 지침에 따라 사용자 대시 보드에서 키를 검색하십시오.

4. config 폴더에서 배열의 URL을 웹 사이트 URL로 바꾸십시오 (스크립트에는 둘 이상의 URL이 필요함).

5. utils/custom_web_loader.ts 에서 load 기능 내부에서 title , date 및 content 의 값을 주어진 웹 페이지에서 추출하려는 텍스트의 CSS 요소로 바꾸십시오. Cheerio 사용 방법에 대해 자세히 알아볼 수 있습니다.

사용자 정의 요소를 메타 데이터에 추가하여 요구 사항을 충족시킬 수 있습니다. 그러나 아래에 따라 기본 로더 형식은 source 속성을 반환 된 값으로 포함하는 pageContent 및 metadata 에 대한 적어도 문자열을 기대합니다.

 async load(): Promise<Document[]>{
  const $ = await this.scrape();
      const text = $("body").text();
    const metadata = { source: this.webPath };
    return [new Document({ pageContent: text, metadata })];
  }

pageContent 및 metadata 나중에 Supabase 데이터베이스 테이블에 저장됩니다.

6. supabase sql 편집기에서 schema.sql 복사 및 실행

• 크로스 확인 documents 테이블은 데이터베이스 및 match_documents 기능에 존재합니다.

? 스크래핑 및 임베딩에 대한 지침

스크래핑 및 포함 스크립트를 scripts/scrape-embed.ts 에서 실행하려면 간단히 실행됩니다.

npm run scrape-embed

이 스크립트는 config 폴더에 표시된 모든 URL을 방문하여 custom_web_loader.ts 파일에 지정된 데이터를 추출합니다.

그런 다음 OpenAI의 임베딩 ( text-embedding-ada-002 )을 사용하여 긁힌 데이터를 벡터로 변환합니다.

앱을 실행하십시오

임베딩 및 컨텐츠가 Supabase 테이블에 성공적으로 추가되었는지 확인한 후에는 앱 npm run dev 실행하고 웹 사이트를 요청할 수있는 질문을 입력 할 수 있습니다.

신용 거래

이 repo의 프론트 엔드는 Langchain-Chat-Nextjs에서 영감을 받았습니다

이 repo는 생산성 전문가 인 Thomas Frank 웹 사이트의 심층적 인 개념 가이드를 사용합니다.