Documentation: Chat with PDF & Website Template

In this documentation, I will explain to you how I built this app so you can make it on your own and how to set up this app if you want to run the app for almost FREE with Figma Design and Wireframe.

Tools used: FlutterFlow, Firebase, Supabase, Open AI API key, Flowise AI, Railway Hosting app, and Stripe Payment Gateway.

If you haven't bought the template, check out the Template here and join the Discord Community for queries.

• Authentication: Is done using Firebase, you have to enable your Firebase login methods for Google and Apple auth. Similarly, set up your own Firestore database, and project settings.

• HomePage: This is divided into PDF and Website URL upload. You can also access previous chats from the drawer and access your profile from the user logo.

• ChatPage: This is where you chat to your pdf or website. Modal is used in adding new users to the current chat from the above user icon. Remember the user cannot be removed after adding. If you want to access your profile you need to return to HomePage from the recent chat drawer named New Chat.

• SubscriptionPage: This has two scenarios when subscription: active or else. When it is not active it will show you 2 plans you can subscribe to and your current free plan. When subscription=active then you can manage your subscription by updating or canceling it in the Stripe customer portal.

FlutterFlow

It has three schemas Users, Chat Sessions, and Flowise Messages. You will require Firebase Blaze plan, don't worry you won't be charged anything.

• users: have all the email, name, credit limit, and stripe info.

• chat_sessions: links the chat with the user who started it and also can be shared, if you add a new user email in share_users field the other user can access the chat session and all the messages in it.

• flowise_messages: it has two types of messages one from the user and another from the AI model. Every message is linked to a chat session.

I am using a custom action when deleting a chat, it deletes the chat session and all the messages linked with the session.

Firebase

You have to deploy your own Flowise AI on a hosting platform. I am using Railway.app free hosting platform. You can use the docs from Flowise AI to learn this.

Once your Flowise is running you need to set up the 3 chat flows. Nomocodes has explained this in detail, use the resources to learn it. Then you will add the PDF Upsert, Website Upsert, and Universal Query API endpoints in FlutterFlow:

• Notion Document: this documents contains the Supabase query code and Flowise chatflow code.

• YouTube Playlist: you can follow step by step guide from Nomo on how to develop this part.

Flowise AI

We are using a subscription model for payment. Upgrade to premium monthly or annually membership using Stripe. Manage memberships using Stripe customer portal.

Everyone gets 5 free credits assigned during account creation. You can change the credit limit in the auth_2_Create (Page) -> Create Account (Button) -> Actions (available_free_limit) -> Set Fields (value).

Learn this from Steven NoCode, he has explained how to integrate Stripe Subscription in FlutterFlow in detail.

Remember to keep the Stripe API (Advanced Group Settings) calls to public in test mode to save money.

Stripe Subscription

1. Flowise: Open AI API Key

2. Flowise: Supabase project access keys

3. FlutterFlow API: API URL -> Add your Flowise chats URLs

4. FlutterFlow API: Stripe Subscription Group -> Add your Authorization bearer sk_test key

5. FlutterFlow Cloud Functions: Add your sk_test key and cloud function deployed URL (Remember to keep your cloud function region and firebase region the same)

6. FlutterFlow Subscription Page: In the different price ranges add your product key from Stripe product catalog

Your Keys: The places where you have to add your own secret keys

The End

There you go, now you can develop the full end-to-end app with the help of docs and videos without worry. Brotha, if you like ma style, giva follow brotha. My social links are below.