<aside> đź’ˇ For questions or feedback, email us at support@dropbase.io Github: https://github.com/DropbaseHQ/dropbase

</aside>

Getting Started

Setting up

Pre-requisites

1. Clone the dropbase repo

Clone the Dropbase repository

git clone <https://github.com/DropbaseHQ/dropbase.git>

2. Start the server

Start the server by running start.sh

NOTE: When starting the server for the first time, make start.sh executable.

chmod +x start.sh

You can start the server by running

./start.sh

3. Create your first Dropbase app

Go to the Dropbase App http://localhost:3030/apps from your browser and click on the Create app button to create your first Dropbase app.

4. Enabling AI features

Configuring the Server

Dropbase uses LLM (ChatGPT, Claude Sonnet) to provide AI Developer features. To enable it, add your OpenAI or Anthropic API key into server.toml. Example:

[llm.openai]
api_key = "YOUR_API_KEY"
model = "gpt-4o"

<aside> đź’ˇ IMPORTANT: If you add additional environmental variables, make sure to add them before LLM configurations (at the top-level table), since LLM configurations are defined as table

</aside>

Configuring the Worker

worker.toml contains environmental variables for the worker. This includes database sources, API keys, or access token to third party services.

<aside> đź’ˇ

If you're upgrading to dropbase-server >v0.6.0, please ensure that worker.toml is in your workspace directory.

</aside>

To include API keys or tokens, add a name for the token and enter your string token. Though not required, adding a descriptive name helps Dropbase AI infer the key to use.

stripe_key="rk_test_123"
mailgun_api_key="abc123"

To include database sources, use the following format: database.database_type.database_nickname

For example, if you want to add a postgres database to a list of sources and use my_source as its nickname, add the following:

[database.postgres.my_source]
host = "localhost"
database = "postgres"
username = "username"
password = "password"
port = 5432

NOTE: The built-in demo requires database.sqlite.demo to be present in worker.toml.

<aside> đź’ˇ

server.toml and worker.toml will be created for automatically when start.sh first run

</aside>

Demos

Order Dashboard with Integrations to Mailgun and Slack

In this demo, we show developers how to build a tool to lookup customers orders, and send order info via a email or a Slack channel

Orders Dashboard Integration.mp4

Salesforce Leads Editor

In this demo, we show developers how to build an app to edit Salesforce leads in a spreadsheet interface

Salesforce Leads Editor Build.mp4

HubSpot Contacts Editor

In this demo, we show developers how to build an app to edit HubSpot contacts in a spreadsheet interface

HubSpot Contacts Editor Build.mp4

Orders dashboard with charts

<aside> đź’ˇ

This video was recorded with an older UI. Prompting for charts works the same way.

</aside>

In this demo, we show developers how to add charts to apps and access chart state as input to API calls

Dropbase Charts 4k.mp4

Demo database

When you first set up Dropbase, it comes with a local demo database, which you can directly prompt. The system already has context about it. This is a local sqlite database that contains 2 tables with the following schema:

table_name column_name data_type
users user_id INTEGER
users username VARCHAR(255)
users email VARCHAR(255)
users status VARCHAR(50)
orders order_id INTEGER
orders user_id INTEGER
orders product_name VARCHAR(255)
orders quantity INTEGER
orders total_price DECIMAL(10, 2)
orders order_date DATE

AI Dev

Dropbase allows updating page UI and functionality via prompts. Currently, only OpenAI and Anthropic integrations are supported.

To enable this feature, obtain your OpenAI or Anthropic key and add it to server.toml under llm environment variable.

# OpenAI example
[llm.openai]
api_key = "sk-XXX..."
model = "gpt-4o"

# Anthropic example
[llm.anthropic]
api_key = "sk-XXX..."
model = "claude-3-5-sonnet-20240620"

<aside> đź’ˇ IMPORTANT: If you add optional variables to server.toml, make sure to add them before LLM configuration (at the top-level table), since LLM configuration is defined as table.

You can save multiple keys, but only one can be used at a time (the first one added).

</aside>

Next, navigate to a page and click on AI Dev on the top right corner in the Studio or press Command + K

AI Dev Button

AI Dev Button

In the prompt modal you can update UI (main.py) and/or logic (functions.py) in a single prompt.

<aside> đź’ˇ

If you know exactly which file, function, or block to change, you can specify this in the prompt. For example: In functions.py, [do something]

</aside>

Write a prompt and click “Generate”. Dropbase will show you a side by side comparison of your current code and the newly generated code for each file. You can either:

  1. “Approve Changes” to accept the new code and update your app
    1. You can also edit the generated code as required before approving changes
  2. “Reset” to retype prompt and regenerate code

Screenshot 2024-09-16 at 2.57.26 PM.png

Sample prompts

If you create a new app and add 2 tables and a few components in the widget you can test most of these prompts:

To add components

Add [component_type]

You can prompt to label the component. If you don’t it will add a new component with generic name ordered in increasing number e.g. table1, table2, table3, etc.

To query/read data into tables

Get data from my “users” table in my “demo” database into table1

This will perform a select statement on your demo sqlite database.

To edit/update columns in tables

When users click on button1, save edits made to the product_name column in table1 back to my demo database. Use order_id as the row index

Actions based on interactions with UI components

Depending on the UI component, you can prompt for a task/logic to be triggered upon acting on the component.

When users click on button1, [perform some action]

Actions could include calculating a number, making an API call to a service, or interacting with one of your connected databases. For API calls, you need to have added the corresponding API keys/tokens in your worker.toml file.

To access data entered by users, in selected rows, or in chart values clicked to perform actions

Use values entered in input1…

When users select a row in table1…

Use the option chosen in select1…

Get the x and y values clicked in chart1….

Passing user/system messages

Send a user message with [some data]

Data could be a computed value, data from a selected row, or x and y values in a chart. Or really anything you want to show the user

Philosophy

The goal of Dropbase is to provide developers with the simplest and fastest way to build functional applications. The framework is built with 3 audiences in mind:

  1. Developers: build apps
  2. End users: use apps to solve problems
  3. LLMs: assists developers in generating app code

There are 2 key principles in building the Dropbase web framework:

  1. Small: minimal surface area for developers and LLMs to build apps
  2. Flexible: make as much use of existing knowledge, libraries, scripts