|
| 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