<aside> 💡 For questions or feedback, email us at [email protected] Github: https://github.com/DropbaseHQ/dropbase

</aside>

Getting Started

Setting up

Pre-requisites

• Install Docker. We strongly recommend using Docker Desktop, especially if you're on Apple M chips. Alternatively, you can install docker and docker-compose.

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:

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

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