the future of web dev and ai

Nef discusses the evolution of web development, emphasizing that technology stacks are less important to users than the functionality and end result of web applications. He shares his experience with Next.js and React, comparing them to SvelteKit, and highlights the ease of data loading and component organization in React. Nef also explores Vercel's AI SDK and its potential for creating interactive, AI-powered web components, including generative UI, which can produce styled components and streamline development. He concludes by sharing his recent switch to Vercel from Netlify, motivated by the synergy between Svelte and Vercel, and encourages openness to different technology stacks in the web development community.

• The speaker, Nef, introduces the topic of the future of web development.
• Nef acknowledges that tech stacks are not the primary concern for users; rather, they care about the end product and its functionality.
• There is an emphasis on the developer's responsibility in choosing how to build web applications.

"Before I point out any framework or something like that, I think tech stacks don't really matter in the end. All the user is going to care about is what he's going to receive and how it will work, not like how it was built and with what technologies and stuff."

• This quote highlights the idea that users are more concerned with the functionality and performance of a web application than the underlying technology used to build it.

• Nef showcases a project built using Next.js and React.
• The project includes an animation created with Framer Motion.
• Nef expresses enjoyment in writing React code again.
• The data displayed in the application comes from Drizzle, a database.
• Nef questions the best practices for structuring database queries in Next.js compared to his experience with SvelteKit.

"This is the application I have been building with Next.js... if you refresh, we get this neat little animation which is done with Framer Motion."

• This quote describes Nef's experience with creating a user interface that includes animations, demonstrating the capabilities of Next.js and Framer Motion.

"They come from Drizzle... we can add a record; ID will be generated, body will be 'I am recording right now,' and the author is Neville."

• This quote explains how data is added to the application Nef is demonstrating, showcasing the process of interacting with the Drizzle database.

• Nef compares Next.js and SvelteKit, discussing the differences in their approaches to building web applications.
• He notes that Next.js may be curated better in the long term but does not declare a definitive winner between the two frameworks.

"It's a huge difference to what I'm used to with SvelteKit because in SvelteKit we got these load functions and server actions and the endpoints... but it's just something different."

• This quote reflects Nef's thoughts on the different methodologies and functionalities provided by Next.js and SvelteKit, indicating the unique learning curve and development experience associated with each framework.

"I don't know if I'm even doing this correctly, if I should put this DB query in here or in here or in a separate file... it's a huge difference to what I'm used to with SvelteKit."

• Nef expresses uncertainty regarding the best practices for structuring database queries in Next.js, highlighting the differences in development patterns between Next.js and SvelteKit.

• Next.js is owned by Vercel, which may incentivize them to build more features for Next.js.
• SvelteKit is considered page-based as opposed to the more component-based approach of React/Next.js.
• React and Next.js use a file-based routing system.
• The speaker prefers the flexibility React offers in terms of placing multiple components or functions within a single file.

"Because Vercel owns huge parts of Next, they like build Next... and so I think they will build many more for Next then for SvelteKit."

This quote indicates the speaker's belief that Vercel's ownership will lead to more development for Next.js compared to SvelteKit.

"React is also more component-based while SvelteKit is like page-based... they also have a kind of a file-based routing system in React or in Next."

The speaker contrasts React's component-based structure with SvelteKit's page-based approach and mentions React's file-based routing system.

"One of the things I didn't really like about SvelteKit was that I can't put multiple components like in one file... in React I can just put as many functions in there as I want and that all works so this is very nice."

The speaker expresses a preference for React's ability to include multiple components or functions within a single file, which is not possible in SvelteKit.

• Vercel has released an AI SDK with built-in LLM adapters.
• The AI SDK allows for streaming messages similar to how chatbots function, with a typing-like display of text.
• The speaker has experimented with the AI SDK in a SvelteKit application.
• A limitation mentioned is the lack of OpenAI tokens to fully utilize the SDK.

"I want to talk about the AI SDK by Vercel... npm install AI crazy that they just got this package name."

The speaker introduces Vercel's AI SDK and comments on the notable acquisition of the package name for installation.

"They have built-in LLM adapters... it gets like stream like first line Second Line... it's Edge and Server as ready."

The quote describes the streaming capabilities and server readiness of Vercel's AI SDK.

"I unfortunately don't have an OpenAI key or like an OpenAI... I don't have any tokens left in OpenAI which is a bit of a shame."

The speaker mentions the current inability to fully test the AI SDK due to a lack of OpenAI tokens.

• The speaker finds the setup process for AI with Vercel's tools to be straightforward.
• There is a belief that AI was previously in a directionless state, but Vercel is now pushing AI towards more practical applications.
• Generative UI is a new concept being explored, which involves creating styled components rather than just text output.

"The setup is like super straightforward... you install your adapter then you install AI... runtime Edge... here you do your data loading."

This quote explains the simplicity of setting up AI with Vercel's tools, highlighting the straightforward process.

"AI was kind of not in the last place but like nobody really knew how what to do with AI and like what's it and now Vercel is kind of pushing AI into a very cool direction."

The speaker reflects on the past uncertainty surrounding AI's applications and commends Vercel for guiding AI towards more innovative uses.

"What generative UI basically is... it will not just give us text like JGPT would... but it gives us these very nicely styled components."

The speaker introduces the concept of generative UI, which extends beyond text to include aesthetically pleasing components, indicating a new trend in AI development.

• Vercel's Generative UI allows for the integration of components into frameworks like React or Svelte.
• It provides the ability to add interactivity to static components easily.
• The speaker recommends checking out Vercel for its versatility in creating UI components.

"This is Vercel, highly recommend you to check it out; you can do like so many things with it."

The quote highlights the recommendation to explore Vercel for its wide range of capabilities in UI development.

• Vercel's design has a distinct similarity to other UI components, which the speaker finds appealing.
• The speaker notes the coolness and niceness of the design aesthetics.

"It kind of looks the same, not the same but like very shiny and very similar... I think it looks very cool."

The quote expresses the speaker's appreciation for Vercel's design, noting its shininess and cool appearance.

• Vercel's Generative UI is not limited to supplying components; it also allows for function calling.
• The speaker demonstrates how to use function calling with an example of fetching the temperature in San Francisco.

"So you can also do function calling, so here it says without function calling what's the temperature in San Francisco."

The quote introduces the concept of function calling within Vercel's Generative UI, which extends its functionality beyond just components.

• The speaker showcases how Vercel's Generative UI can integrate with large language models like OpenAI's ChatGPT.
• By sending prompts, the tool can recognize commands and call APIs to retrieve information, such as the weather.

"We basically have our file... it will call an API and then will generate us weather."

The quote explains the process by which Vercel's Generative UI can interact with APIs to fetch and display data, such as weather information.

• The speaker discusses the move towards an AI-native web with Vercel and the introduction of React server components.
• These components allow streaming UI directly from large language models, enhancing interactivity and performance.

"Towards the AI native web with Vercel SD 3.0 we're simplifying how you integrate AI into our apps... your app can be more interactive and responsive without compromising on performance."

The quote details the benefits of integrating AI into web applications, emphasizing the improvements in interactivity and performance without performance trade-offs.

• The speaker is excited about the potential for creating great user experiences with the new updates.
• There is an encouragement to try out the demo and experiment with the new features.

"This update makes it easier to build and maintain AI-powered features, helping you focus on creating great user experiences... try the demo."

The quote conveys enthusiasm for the ease of building AI-powered features and the positive impact on user experience, with a call to action to try the demo.

• The speaker gives an example of interacting with AI to get cryptocurrency prices and simulate a transaction.
• The example showcases the conversational capabilities and potential applications of Vercel's Generative UI.

"What's the price of Solana and it will say... you have successfully purchased."

This quote demonstrates the AI's ability to provide real-time cryptocurrency prices and simulate a transaction, illustrating the practical uses of AI interaction.

• Versel AI is pushing developers to work more closely with AI.
• Developers are evolving into roles where they curate AI, letting it perform tasks and correcting it when necessary.

"This is Versel AI. And this is what they kind of what Versel pushes us to do more and more with AI."

This quote introduces Versel AI as an influential factor in how developers interact with AI, indicating a shift towards a more AI-centric approach in development.

"We are now, he describes us as a plumber who just basically curates the AI like we let the AI do, and then we just go ahead and correct it if it does something wrong."

The quote uses the analogy of a plumber to describe the evolving role of developers in the context of AI, emphasizing the maintenance and oversight responsibilities.

• The speaker recently switched to using Versel from Netlify.
• The decision was influenced by the collaboration between the Svelte team and Versel, which is now seen as more robust than with Netlify.

"I recently made the switch to Versel I think a week ago from now... because I think Svelte and Versel work better together than Svelte and Netlify."

This quote explains the speaker's recent platform switch, attributing the decision to the better integration and collaboration between Svelte and Versel.

• The migration to Versel was overall smooth.
• The only challenging aspect was transferring domain DNS settings, but it was ultimately just a matter of copying values.

"The migration went very well only thing that didn't really go as well or was a bit of a pain was to migrate all my domain DNS stuff."

This quote highlights the speaker's migration experience to Versel, noting that the most significant difficulty was related to domain DNS settings.

• The speaker deployed Coodle on Versel.
• The migration to Lua V3 resulted in the loss of user data.
• Form actions were replaced with kit endpoints, and the admin dashboard remains unchanged.

"I also deployed Coodle... now has GitHub OAuth like all the view all the users were unfortunately wiped because I upgraded to Lua V3."

This quote discusses the deployment of an application called Coodle and notes a significant change due to an upgrade that resulted in user data loss.

"I replaced all the form actions with kit endpoints. And yeah, the admin dashboard remains the same."

The speaker details specific technical changes made to the application, indicating an update to how forms interact with back-end processes and the maintenance of the admin dashboard's status quo.

• The speaker encourages viewers to check out their site without being hostile in the comments.
• They draw a parallel between tech stack preferences and the Windows vs. Mac debate, indicating that all choices are valid.
• The speaker is currently comfortable with Svelte but is open to changes in the future.

"Please don't be like angry in the comment section at anyone and especially not at me because like I said, tech stacks, they are not a critical part, it's how you do it."

This quote requests civility in discussions about technology choices, emphasizing that the choice of tech stack is less important than how it is utilized.

"I'm just very comfortable with Svelte right now, and maybe this will change in like the next week or next day I'm not sure."

The quote expresses the speaker's current preference for Svelte while acknowledging the possibility of change in their choice of technology.

• The speaker plans to continue the conversation on AI and other topics in future videos.
• They remind viewers to tune in for the next scheduled update.

"I will hit you up on this subject like with AI and stuff, and yeah, we'll see you next Wednesday."

The concluding quote indicates the speaker's intent to revisit the topic of AI in future communications, setting an expectation for ongoing discussion.