Skip to content

Commit 3243121

Browse files
authored
Merge pull request #32 from tinybirdco/template-readme
add template readme
2 parents 687ac9f + b23c647 commit 3243121

File tree

1 file changed

+140
-0
lines changed

1 file changed

+140
-0
lines changed

TEMPLATE.md

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
This is a template for an AI analytics dashboard and LLM cost calculator. It is built with Next.js, [Tinybird](https://tinybird.co) and [Clerk](https://clerk.com)
2+
3+
Use this template to bootstrap a multi-tenant, user-facing LLM analytics dashboard and cost calculator.
4+
5+
Features:
6+
7+
- Track costs, requests, tokens and duration by model, provider, organization, project, environment and user
8+
- Multi-tenant user-facing dashboard
9+
- AI cost calculator
10+
- Vector search
11+
- Ask AI integration
12+
13+
Fork it and make it your own! You can track your own metrics and dimensions.
14+
15+
Tech stack:
16+
17+
- [Next.js](https://nextjs.org/) - Application
18+
- [Tinybird](https://tinybird.co) - Analytics
19+
- [OpenAI](https://openai.com/) - AI features
20+
- [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction) - AI features
21+
- [Vercel](https://sdk.vercel.ai/docs/introduction) - Application deployment
22+
- [Clerk](https://clerk.com/) - User management and auth
23+
- [Tremor](https://tremor.so/) - Charts
24+
25+
## Live Demo
26+
27+
- https://ai.tinybird.app
28+
29+
## Quick Start
30+
31+
Get started by forking the [GitHub repository](https://github.com/tinybird.co/ai-analytics-template) and then customizing it to your needs.
32+
33+
Start Tinybird locally:
34+
35+
```
36+
curl https://tinybird.co | sh
37+
cd tinybird
38+
tb local start
39+
tb login
40+
tb dev
41+
token ls # copy the read_pipes token
42+
```
43+
44+
Configure the Next.js application:
45+
46+
```
47+
cd dashboard/ai-analytics
48+
cp .env.example .env
49+
Edit the .env file with your Tinybird API key and other configuration.
50+
```
51+
52+
```
53+
NEXT_PUBLIC_TINYBIRD_API_URL=http://localhost:7181
54+
# read_pipes token
55+
NEXT_PUBLIC_TINYBIRD_API_KEY=
56+
```
57+
58+
Start the Next.js application:
59+
60+
```
61+
cd dashboard/ai-analytics
62+
npm install
63+
npm run dev
64+
```
65+
66+
Open the application in your browser:
67+
68+
```
69+
http://localhost:3000
70+
```
71+
72+
## Multi-tenancy
73+
74+
Create a Clerk project and set up these environment variables in your Next.js application:
75+
76+
```
77+
# workspace ID for multi-tenant JWT tokens
78+
TINYBIRD_WORKSPACE_ID=
79+
# workspace admin token for multi-tenant JWT tokens
80+
TINYBIRD_JWT_SECRET=
81+
82+
# Clerk publishable key
83+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
84+
# Clerk secret key
85+
CLERK_SECRET_KEY=
86+
# Clerk sign in URL
87+
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
88+
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
89+
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
90+
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
91+
```
92+
93+
The [middleware](https://github.com/tinybirdco/ai-analytics-template/blob/main/dashboard/ai-analytics/src/middleware.ts) will get the `org:name` permission from the Clerk user and use it to create a Tinybird JWT token with the `organization` dimension fixed to that value. Read more about Tinybird JWT tokens [here](https://www.tinybird.co/docs/forward/get-started/authentication#json-web-tokens-jwts).
94+
95+
[Watch a video of the Clerk + Tinybird JWT token flow](./assets/clerk-tinybird-jwt.mp4)
96+
97+
## AI features
98+
99+
To use the AI features, click on Settings in the dashboard and input an Open AI API key.
100+
101+
See the `search` and `extract-cost-parameters` [API routes](https://github.com/tinybirdco/ai-analytics-template/tree/main/dashboard/ai-analytics/src/app/api) for more details on how the AI features work.
102+
103+
[Watch a video of the AI cost calculator](./assets/ai-cost-calculator.mp4)
104+
105+
## Vector search
106+
107+
The vector search is powered by Tinybird, but embeddings need to be calculated in a separate process. See the [generate-embedding](https://github.com/tinybirdco/ai-analytics-template/blob/main/dashboard/ai-analytics/src/app/api/generate-embedding/route.ts) route for more details.
108+
109+
The process is:
110+
111+
- The user inputs a query and clicks the search button.
112+
- The query is sent to the `generate-embedding` route to get the embedding.
113+
- The embedding is sent to the Tinybird `llm_messages` as a query parameter.
114+
- `llm_messages` use `cosineDistance` to find the most similar vectors.
115+
- The frontend shows the table rows with the most similar vectors.
116+
117+
## Deployment
118+
119+
- Fork and connect this repository to Vercel.
120+
- Set the environment variables in Vercel.
121+
- Configure the [CI/CD GitHub actions](https://github.com/tinybirdco/ai-analytics-template/tree/main/.github/workflows) to deploy to Tinybird.
122+
123+
## Instrumentation
124+
125+
Check how to instrument your LLM usage with the following libraries:
126+
127+
- [LiteLLM (python)](https://www.tinybird.co/docs/get-data-in/guides/ingest-litellm)
128+
- [Vercel AI SDK (typescript)](https://www.tinybird.co/docs/get-data-in/guides/ingest-vercel-ai-sdk)
129+
130+
## Mock Data
131+
132+
For local testing, generate mock data with the following commands:
133+
134+
```sh
135+
cd tinybird/mock
136+
npm install
137+
npm run generate -- --start-date 2025-02-01 --end-date 2025-03-31 --events-per-day 100 --output ../fixtures/llm_events.ndjson
138+
```
139+
140+
The [generate-llm-events.js](https://github.com/tinybirdco/ai-analytics-template/blob/main/tinybird/mock/generate-llm-events.js) script generates the embeddings.

0 commit comments

Comments
 (0)