Skip to content
Johnnify Docs

“Chat-Kit” 🤖 LLMs via Vercel’s SDK

A SvelteKit full-stack Chat experience, showcasing Vercel’s AI SDK!

Learning Content

Development of this app happens live on Johnny’s YouTube channel!

Check out the specific episode Vercel’s AI SDK with SvelteKit & ChatGPT-4o Connections with SvelteKit!

Handy scripts

Update all dependencies in all apps

To update all dependencies, including the package.json to point to their latest versions, run:

Terminal window
pnpm run update

Interactive UI will let you select which packages you actually want to update!

Recommended to select and update them all! If tests ain’t passing, stash and try again without the “breaking / major” updates: confirm everything works and start adding the major upgrades individually.

Note that while Svelte 5 is in pre-release next versions, this script won’t “find” the latest release! You need to manually update the svelte package in the package.json to whichever svelte@5.0.0-next.??? is latest.

How to use this repo as your “starter”

Clone this repo into the directory you want your new project to be

You can find more details at GitHub, for example you may want to run in your terminal:

Terminal window
git clone https://github.com/johnnify/chat-kit your-chat-app

Remove existing Version Control & initialize your own

You probably don’t want a history of everything that’s happened to this repo, and you definitely do not want to push your own changes to it! You are your own person and want to do your own thing 🙌

Easiest way to start fresh is to cd into the root directory of your new project, such as cd your-awesome-startup, and run:

Terminal window
rm -rf .git

Then, initialize your own git repo:

Terminal window
git init

You may want an initial commit now, or keep your history a bit cleaner and save it after you’ve done the preliminary changes in the next step. You can have infinite commits, so it doesn’t matter that much 😄

Update environment variables

You can use the committed .env.test to make your own .env & .env.local files.

For the project to start running locally, you at the very least need the DB_URL to be filled in correctly. For example, you can run SQLite locally with pnpm dev:db, and connect to that with DB_URL=http://127.0.0.1:8080 in your .env.local, or `.env.

Env Var pro-tip

I like having a .env filled with variables corresponding to production (for example to production Turso), and a .env.local with variables corresponding to local instances (for example the local Turso DB).

.env.local takes priority, so that would get used by default, and if I want to connect to production I rename it to something like .env.local.bak. Names are magic in this case, so that file will not be loaded, and I will be connected according to the variables in .env.

If I want to connect to the local instances again, I rename .env.local.bak back to .env.local.

I find this method much easier than copying and pasting environment variables, and with a 0% chance to mix up local and production variables! Still need to be aware which file is actually being loaded though, whether you have renamed .env.local or not.

Rename “Chat”, “Chat-Kit” and other project-specific stuff

Search for “Chat” & “chat-kit”, and replace with things corresponding to your project. This includes things that the user would notice, like meta titles, descriptions and open-graph images, but also internal things such as the package name which don’t really matter but are still nice to keep neat.

This also includes links, you may not want the “Made with 💜” footer at all, or you may just want to replace the links to your own other projects and portfolios!

Replace favicons & other images with your own

You wouldn’t want the ChatKit logo for your app, so perhaps use a tool like the Real Favicon Generator to replace those assets with your own, on-brand ones.

Style to taste

We are using shadcn-svelte for this one, but it’s likely you won’t want exactly the brand colours and typography of my ChatKit app, so amend src/app.css to taste.

You may use the shadcn theming tool to change up the CSS Properties for things like, --background, and --primary, switch up the --radius, change the --font-fancy!

Commit & start building your own app!

At this point you’ll want an 🚀 initial commit based on @johnnify/chat-kit or similar, and then you can start building your own app!

Start the dev server with pnpm dev, and click around localhost:5173! If you are connecting to local Turso, you’ll need to have that running with pnpm dev:db.

Feel free to delete routes you won’t need, but I do find that at this point I’m tempted to spend time integrating “the real stuff” for the new project, so I like having that initial commit done first, before I get deeper into the weeds.

Have fun! 😄