|
| 1 | +Get a SpacetimeDB-backed LLM chat app running in under 5 minutes. |
| 2 | + |
| 3 | +## Prerequisites |
| 4 | + |
| 5 | +- [Node.js](https://nodejs.org/) 18+ installed |
| 6 | +- [SpacetimeDB CLI](https://spacetimedb.com/install) installed |
| 7 | +- An OpenRouter or OpenAI API key |
| 8 | + |
| 9 | +Install the [SpacetimeDB CLI](https://spacetimedb.com/install) before continuing. |
| 10 | + |
| 11 | +--- |
| 12 | + |
| 13 | +## Create your project |
| 14 | + |
| 15 | +Run the `spacetime dev` command to create a new project with a SpacetimeDB |
| 16 | +module and React client. |
| 17 | + |
| 18 | +This will start the local SpacetimeDB server, publish your module, generate |
| 19 | +TypeScript bindings, and start the React development server. |
| 20 | + |
| 21 | +```bash |
| 22 | +spacetime dev --template llm-chat-ts |
| 23 | +``` |
| 24 | + |
| 25 | +## Open your app |
| 26 | + |
| 27 | +Navigate to [http://localhost:5173](http://localhost:5173) to see your app |
| 28 | +running. |
| 29 | + |
| 30 | +Open the provider config modal, choose OpenRouter or OpenAI, enter an API key |
| 31 | +and model, then start a new chat. |
| 32 | + |
| 33 | +## Explore the project structure |
| 34 | + |
| 35 | +Your project contains both server and client code. |
| 36 | + |
| 37 | +Edit `spacetimedb/src/index.ts` to change tables, views, reducers, and |
| 38 | +procedures. Edit `src/App.tsx` to build the chat UI. |
| 39 | + |
| 40 | +``` |
| 41 | +my-spacetime-app/ |
| 42 | +├── spacetimedb/ # Your SpacetimeDB module |
| 43 | +│ └── src/ |
| 44 | +│ ├── index.ts # Server-side tables, views, and reducers |
| 45 | +│ └── llm.ts # LLM provider request helpers |
| 46 | +├── src/ |
| 47 | +│ ├── App.tsx # React chat UI |
| 48 | +│ └── module_bindings/ # Auto-generated types |
| 49 | +└── package.json |
| 50 | +``` |
| 51 | + |
| 52 | +## Understand the module |
| 53 | + |
| 54 | +The module stores private chat threads, private chat messages, and private LLM |
| 55 | +configuration for each SpacetimeDB identity. |
| 56 | + |
| 57 | +The public `chat` and `message` views only expose rows owned by the connected |
| 58 | +identity. The `llm_config` table is private, and the API key is never returned |
| 59 | +through subscriptions or config status calls. |
| 60 | + |
| 61 | +The API key is still stored as module data. This template is not a secret |
| 62 | +manager: database operators can inspect module data, so use keys that are |
| 63 | +appropriate for your local or hackathon environment. |
| 64 | + |
| 65 | +## Configure models |
| 66 | + |
| 67 | +Defaults: |
| 68 | + |
| 69 | +- Provider: `openrouter` |
| 70 | +- Model: `openai/gpt-4o-mini` |
| 71 | +- Local database name: `llm-chat-ts` |
| 72 | +- New chats start with a clean context. |
| 73 | + |
| 74 | +Leaving the API key field blank keeps the saved key when editing the same |
| 75 | +provider. Switching providers requires entering a new key. |
| 76 | + |
| 77 | +Set `VITE_SPACETIMEDB_HOST` or `VITE_SPACETIMEDB_DB_NAME` if you publish to a |
| 78 | +different host or database name. |
| 79 | + |
| 80 | +## Next steps |
| 81 | + |
| 82 | +- See the [Chat App Tutorial](https://spacetimedb.com/docs/intro/tutorials/chat-app) for a complete example |
| 83 | +- Read the [TypeScript SDK Reference](https://spacetimedb.com/docs/intro/core-concepts/clients/typescript-reference) for detailed API docs |
0 commit comments