Svelte MCP 🤖 Svelte Remote Functions 🔴 LIVE Coding & Chill
Let’s put the brand new & official Svelte MCP server to the test, by asking it to implement some classic app functionality, using some EXPERIMENTAL SvelteKit features: Remote Functions!
🚀 Click around the app yourself: [https://drawmon.j-e7c.workers.dev](https://drawmon.j-e7c.workers.dev/)
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/drawmon
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— AGENDA —
[ ] What is an MCP server 🤔 why do we need it for Svelte & SvelteKit? https://svelte.dev/docs/llms
[ ] Current app demo: DrawMon 🎨 Consistently draw Pokémon to improve your art
[ ] Let’s set up Svelte MCP with Claude Code! https://svelte.dev/docs/mcp/overview
[ ] Let’s create a `/pokemon/[name]` detail view 🔍 using Svelte Remote Functions & `query`!
[ ] Let’s allow `/random` to show multiple Pokemon every time!
[ ] Let’s add a `/pokemon` 📔 list view, with `batch`!
— BONUS —
[ ] Let’s add Pagination to our list view! https://www.shadcn-svelte.com/docs/co...
[ ] Let’s use our own DB! Schema design for users to be able to mark Pokemon as “drawn”
[ ] Syncing the Pokemon API with our DB!
[ ] Refactoring to use our DB for all our queries!
[ ] Automatically run a sync operation using a Github Action!
[ ] Can Svelte MCP handle the `form` remote function?! https://svelte.dev/docs/kit/remote-fu...
[ ] Final 🥳 DEMO + LIKE 💜 SUBSCRIBE
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://svelte.dev/
Cloudflare: https://developers.cloudflare.com/
Tailwind: https://tailwindcss.com/
PokéAPI: https://pokeapi.co/
My own website: https://magrippis.com/
And, of course, remember: Get this repository AND MORE with Johnnify Premium!
https://johnnify.com/premium
Search for `@jmagrippis` to find me on socials like Instagram & Threads! And I’m most active in our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 149!