Ocean Protocol Tokengated Chatbot

A Web3 powered, Ocean Protocol tokengated, open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Supabase.

Features · Web3 Powered · Model Providers · Security Warning · Deploy Vercel App · Publish Datatoken · Running locally · Authors

Features

• Create a Web3 Tokengated app where users gain access by purchasing a DataNFT on the Mumbai Network.
• Sign a Web3 transaction to identify yourself and login via a custom Supabase Web3Auth.
• Prompt OpenAI (default), Anthropic, Hugging Face, or custom AI chat models and/or LangChain
• Chat History with Supabase Postgres DB
• Next.js App Router
• React Server Components (RSCs), Suspense, and Server Actions
• Vercel AI SDK for streaming chat UI
• shadcn/ui
  • Styling with Tailwind CSS
  • Radix UI for headless component primitives
  • Icons from Phosphor Icons
• Rainbowkit and Wagmi as wallet providers and React hooks
• Ethers.js and Infura for the low-level work

Web3 Powered

With a few clicks, you can deploy a Web3 enabled, tokengated, AI dApp that uses Ocean Protocol's DataNFT to prove ownership and access of the application.

What does this do?

1. Provides users with access by purchasing a DataNFT from the Ocean Marketplace.
2. Allows users to login and authorize with an off-chain Web3 signature.

Model Providers

This template ships with OpenAI gpt-3.5-turbo as the default. However, thanks to the Vercel AI SDK, you can switch LLM providers to Anthropic, Hugging Face, or using LangChain with just a few lines of code.

Security Warning

For the Web3 implementation to work, we need to implement Supabase's service_key in the app. You can learn more about this by reading the Supabase Web3Auth for more intuition.

If you are not careful with this as a developer you can easily expose your Supabase's admin role to the user. Please be careful to not expose getServiceSupabase() or NEXT_PUBLIC_SUPABASE_SERVICE_KEY.

What does this mean?

Never use a service key on the client

Deploy Vercel App

Before hopping into code, let's launch the app and play with it.

1. Fork this repository: tokengated-next-chatgpt via Github.
2. Get a new OpenAI API key
3. Deploy a new DB in Supabase
4. Setup your public.users table inside Supabase. We have provided you a screenshot of what ours looks like so you can configure it in the exact same way. .
5. Please note that your public.users.id should link to your auth.users.id record . Important: Make sure you make the id column nullable.
6. Setup your Supabase Row-Level Security (RLS) by executing the scripts located below inside the Supabase SQL Editor.
7. Get an infura API key
8. Get a Wallet Connect Project ID
9. Hop onto Vercel and Deploy your forked repository as a new Vercel project and configure your environment variables.
10. Configure your Vercel->project->settings to rebuild sdk.ts by overriding the build command with: yarn generate && yarn build
11. You should now have all the initial ENV_VARS required to deploy the initial version of the app.
12. Finally, after Vercel is deployed, update your Supabase's Project: Authentication / URL Configuration / Site URL to be your Vercel's app URL.

OPENAI_API_KEY=your-open-ai-key
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_SUPABASE_SERVICE_KEY=your-supabase-service-key
NEXT_PUBLIC_SUPABASE_JWT_SECRET=your-supabase-jwt-key
NEXT_PUBLIC_WC2_PROJECT_ID=your-wallet-connect-project-id
NEXT_PUBLIC_INFURA_API_KEY=your-infura-api-key
NEXT_PUBLIC_WEB3AUTH_MESSAGE=Please sign this message to confirm your identity. Nonce:
NEXT_PUBLIC_APP_DOMAN=@yourdomain.com

Initial Environment Variables required for Vercel app to work

Configure Supabase

In the SQL Editor, we're going to create the remainder of the role-level security policies we'll need to keep the DB secure.

You should already have a public.users table from the work you did in Deploy Vercel App

-- Create view of auth.users and set strict access.
create view public.auth_users as select * from auth.users;
revoke all on public.auth_users from anon, authenticated;

-- service-role policy
CREATE POLICY service_role_access ON public.users
AS PERMISSIVE FOR ALL
TO service_role
USING (auth.role() = 'service_role')
WITH CHECK (auth.role() = 'service_role');

-- authenticated user policy
CREATE POLICY authenticated_users_can_write ON public.users
AS PERMISSIVE FOR UPDATE
TO authenticated
USING (auth.role() = 'authenticated')
WITH CHECK (auth.role() = 'authenticated');

-- web3 auth policy
CREATE POLICY web3_auth ON public.users
AS PERMISSIVE FOR UPDATE
TO authenticated
USING ((current_setting('request.jwt.claims', true))::json ->> 'address' = address)
WITH CHECK ((current_setting('request.jwt.claims', true))::json ->> 'address' = address);

Publish Datatoken

We recommend using the Mumbai Testnet to deploy your datatoken. It will be fast and free.

Network Name: Mumbai Testnet
New RPC URL: https://polygon-mumbai.g.alchemy.com/v2/your-api-key
Chain ID: 80001
Currency Symbol: MATIC
Block Explorer URL: https://mumbai.polygonscan.com/

The Mumbai network

1. Let's begin by adding the Mumbai network to your wallet.
2. Now connect your wallet to the Mumbai network.
3. Now get your wallet 0x address for later.
4. We need some tokens to make transactions, collect MATIC from this faucet so we can create the Data token.
5. Make sure to also collect OCEAN from this faucet so you can also buy some tokens.
6. Deploy a Datatoken (DT) inside the OCEAN marketplace. On Step-2, select File-type "URL" and use the Vercel url as the address so you can complete the wizard (this architecture doesn't use it). You can now see your datatoken, copy the 0x address.
7. You have now published a Datatoken. When a user purchases this, they will gain access to our application. So, let's make sure to buy one so we can obtain access to the app after we deploy it.

Complete Vercel Configuration

You can now complete configuring the Vercel app.

Go back to your Vercel->project->settings->Environment Variables and add the rest of them.

NEXT_PUBLIC_WEB3AUTH_TTL=3600
NEXT_PUBLIC_DATATOKEN_ADDRESS=0x2eaa179769d1Db4678Ce5FCD93E29F81aD0C5146
NEXT_PUBLIC_SUBGRAPH_URL=https://v4.subgraph.mumbai.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph

Ocean Protocol and Datatoken Environment Variables

User subscriptions are verified at login based on when the Datatoken was purchased + TTL. Users are only authorized to prompt until the subscription expires.

Running locally

Before you start, make sure you have followed every step from Deploy Vercel App so your application can be configured correctly.

You will need to use the environment variables defined in .env.example to run OP's Tokengated AI Chatbot.

Copy the .env.example file and populate the required env vars:

cp .env.example .env

Install the Supabase CLI and start the local Supabase stack:

npm install supabase --save-dev
npx supabase start

Install the local dependencies and start dev mode:

pnpm install
pnpm dev

Your app template should now be running on localhost:3000.

Building GQL SDK

Vercel currently does not support graphql-generate as part of the build, so you'll have to do this ahead of time.

As you write more GQL, please run the yarn generate command to update your local GQL library and SDK. This will help you maintain good code and avoid type safety issues.

You can then add the newly built SDK before deploying a new Vercel Build.

yarn generate
git add .
git commit -m "updating gql"
git push

Additional Readmes

The following READMEs have been created to provide guidance to the reader.

1. Improvements and Ideas
2. Supabase Web3Auth
3. Web3 Tokens and Networks

Authors

This scaffolding is an extension of the fantastic Vercel AI-Chatbot project.

Ocean Protocol (@oceanprotocol) has provided the work to build a custom Web3 Auth on top of Supabase, token-gated access with a DataNFT, and to provide a Web3 scaffolding to create AI dApps.

Special thanks to @kdetry and @idiom-bytes for assembling this.

No sealife was harmed in the making of this repository.