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?
Provides users with access by purchasing a DataNFT from the Ocean Marketplace.
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.
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. .
Please note that your public.users.id should link to your auth.users.id record . Important: Make sure you make the id column nullable.
Setup your Supabase Row-Level Security (RLS) by executing the scripts located below inside the Supabase SQL Editor.
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:
[email protected]
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
Let's begin by adding the Mumbai network to your wallet.
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.
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.
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:
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.
The following READMEs have been created to provide guidance to the reader.
Improvements and Ideas
Supabase Web3Auth
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.
tokengated-next-chatgpt copied to clipboard
oceanprotocol
oceanprotocol