Skip to content

Commit d2c5902

Browse files
JasonAtClockworkJasonAtClockwork
authored
Add new LLM chat template (#5150)
# Description of Changes Adds a small template to show adding OpenRouter/OpenAI to do chat completion. Designed as a small ChatGPT clone with each user setting up their API key and having chat threads. - TypeScript module - Simple React front-end # API and ABI breaking changes N/A # Expected complexity level and risk 1 - Adding another small TypeScript template # Testing - [x] Ran through `spacetime init` against local
1 parent 0922704 commit d2c5902

27 files changed

Lines changed: 2024 additions & 0 deletions

‎pnpm-lock.yaml‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-workspace.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ packages:
55
- 'templates/chat-react-ts'
66
- 'templates/react-ts'
77
- 'templates/basic-ts'
8+
- 'templates/llm-chat-ts'
89
- 'templates/vue-ts'
910
- 'templates/tanstack-ts'
1011
- 'templates/browser-ts'

‎templates/llm-chat-ts/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
dist
2+
node_modules
3+
tsconfig.tsbuildinfo
4+
.env
5+
.env.local

‎templates/llm-chat-ts/.template.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"description": "Simple TypeScript chat app that calls an LLM API from a SpacetimeDB module",
3+
"client_framework": "React",
4+
"client_lang": "typescript",
5+
"server_lang": "typescript",
6+
"builtWith": [
7+
"react",
8+
"react-dom",
9+
"vitejs",
10+
"typescript",
11+
"vite",
12+
"spacetimedb"
13+
]
14+
}

‎templates/llm-chat-ts/README.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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

‎templates/llm-chat-ts/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>SpacetimeDB LLM Chat</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎templates/llm-chat-ts/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@clockworklabs/llm-chat-ts",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"preview": "vite preview",
10+
"spacetime:generate": "spacetime generate --lang typescript --out-dir src/module_bindings --module-path spacetimedb",
11+
"spacetime:publish:local": "spacetime publish --module-path spacetimedb --server local",
12+
"spacetime:publish": "spacetime publish --module-path spacetimedb --server maincloud"
13+
},
14+
"dependencies": {
15+
"spacetimedb": "workspace:*",
16+
"react": "^18.3.1",
17+
"react-dom": "^18.3.1"
18+
},
19+
"devDependencies": {
20+
"@types/react": "^18.3.18",
21+
"@types/react-dom": "^18.3.5",
22+
"@vitejs/plugin-react": "^5.0.2",
23+
"typescript": "~5.6.2",
24+
"vite": "^7.1.5"
25+
}
26+
}

‎templates/llm-chat-ts/spacetimedb/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "spacetime-module",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"build": "spacetime build",
7+
"publish": "spacetime publish"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"spacetimedb": "workspace:*"
14+
},
15+
"devDependencies": {
16+
"typescript": "~5.6.2"
17+
}
18+
}
19+

0 commit comments

Comments
 (0)