<aside>
đź’ˇ For questions or feedback, email us at [email protected]
Github: https://github.com/DropbaseHQ/dropbase
</aside>
docker and docker-compose.dropbase repoClone the Dropbase repository
git clone <https://github.com/DropbaseHQ/dropbase.git>
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
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.
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>
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
In this demo, we show developers how to build an app to edit Salesforce leads in a spreadsheet interface
Salesforce Leads Editor Build.mp4
In this demo, we show developers how to build an app to edit HubSpot contacts in a spreadsheet interface
HubSpot Contacts Editor Build.mp4
<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
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 | 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 |
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
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:
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
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:
There are 2 key principles in building the Dropbase web framework: