Transcript
Translated into English:
If you want to sell n8n workflows or use them internally in a company, you should ensure that less technical users can operate everything easily. n8n itself unfortunately offers no solution for this, which is why today we are looking at how to create a full-fledged web application with user management, multiple interfaces, and a connection to n8n functions.
Best of all, you don't even need to know how to program. In today's example, we are building a clear application where users can upload documents to a knowledge base and later ask questions about all uploaded documents via chat. Administrators will additionally have the option to delete uploaded documents.
We are building the user management and all interfaces in Softr, a no-code platform from Germany, and using n8n logic in the background. I have uploaded the templates for both the application and the n8n workflow to the Pro Community. You are welcome to download them there; the link is in the description.
[.blog-callout]
Note from Softr: While this tutorial shows how to start from scratch, you can also use the AI co-builder to generate your initial app structure and Softr Databases setup just by describing your needs in plain English.
[.blog-callout]
When we start Softr, we see the interface where we can start with various templates or from scratch. Since we are absolute pros, we are starting from scratch. We have various options for connecting data, like Notion or Airtable, but for our use case, we will keep everything within Softr using Softr Databases.
After the app is created, we land in the editor where we can customize our application. We have different blocks that can be added, like navigation or headers. First, we will clean up by deleting the parts and pages we don't need, like the Welcome User field and specific Item Details pages.
On our home page, we want a clean start. We have a list page that we will use later to display the documents in our knowledge base, and a form page to upload those documents. We also have utility pages for things like login and forgotten passwords which we can leave as they are.
To keep things organized, we will rename our pages. We will rename the Home page to Chat, the List page to Documents, and update the URL accordingly. Finally, we rename the form page to Upload.
Next, we customize our navigation by setting the layout to the top and ensuring all links point to the correct pages like Chat and Upload. We can also remove unnecessary folders and the global search icon in the settings to keep the UI clean. We can also customize our logo and application name to Rack Agent.
Before we can upload files, we need to ensure we have a place to store them. We will create a new database in Softr Databases called Rack Agent. In this database, we add a table called Documents where we will define the fields we need.
We will rename the primary field to Filename and add a Record ID field for referencing. Most importantly, we add a field of the type File and ensure the allow multiple files option is deactivated. We also create a status field with options like Reviewing, Approved, Processing, and Ready.
[.blog-callout]
Note from Softr: If you need to build a more complex system for managing company resources, check out our ERP template or your relevant text for pre-built logic and database schemas.
[.blog-callout]
Now we head back to the interface to set up the Upload page. We connect the form block to our Softr Databases and the Documents table. We then configure the form fields to only show a description and the file upload field, removing any unnecessary sections.
We can add headings and text displays to the form to guide the user. Under the file field options, we can set validation limits for file size and count. To add more complex logic, like checking if a file is actually a PDF, we scroll down to the actions and choose Run Custom Workflow instead of a simple success message.
In the custom workflow, we can set up branches to check the file type. If the file is a PDF, we update the record status to Approved. If it is an unsupported type, we delete the record and show an error message to the user.
Now we look at n8n to connect the logic. There are official community nodes maintained by Softr that allow us to trigger workflows based on updated records. We use our Softr API key to connect n8n to our application.
[.blog-callout]
Note from Softr: For many common automation tasks, you can use native Softr Workflows to handle logic directly inside your app, reducing the need for external tools like n8n or Zapier.
[.blog-callout]
When a record is updated to Approved in Softr, n8n triggers the processing loop. It changes the status to Processing, extracts the PDF content, and sends it to our vector store in Supabase. Once finished, it updates the record in Softr to the status Ready.
To implement the chat, we go to our Chat page in Softr. Instead of a standard block, we use the Vibe-Coding block. This allows us to prompt the AI to build a custom chat module that sends user messages to our n8n webhook and displays the output.
[.blog-callout]
Note from Softr: If a standard block doesn't meet your design requirements, the Vibe-Coding block is the perfect way to generate custom components that still connect natively to Softr Databases.
[.blog-callout]
After setting up the chat, we can test it by asking questions about the uploaded PDF. The AI retrieves the information from our vector store and provides the correct answer. We then move on to the Documents page to finish the management interface.
We add a table block connected to our Documents table and configure it to show the filename and status. To allow administrators to delete files, we add an item button that runs a custom workflow. This workflow calls an API in n8n to delete the document from the vector store and then deletes the record in Softr.
Finally, we manage user permissions. We can create user groups for Admins and set page visibility so that only members of the Admin group can see the Documents page or the delete button. All other users will only see the Chat and Upload options.
[.blog-callout]
Note from Softr: You can now host Unlimited Published Apps on all plans, including the Free version, making it easier to scale internal tools like this across your entire team.
[.blog-callout]
When everything is ready, we simply hit Publish. Softr provides a subdomain, but you can also connect a custom domain in the settings for a more professional look for your your relevant text or internal tools. This setup allows anyone to use complex n8n logic through a simple, user-friendly interface.
