Talk to your database with Next.js and the AI SDK

hey folks my name is Nico I work on the AI SDK forell and today I want to walk you through our latest template that allows you to talk to your postgres SQL database so let's get into the demo what we've got here is the app where you can find it at natural language- for.app uh we've got an input field where we can ask about startup unicorns and then a bunch of suggested queries now before we get into actually using this what is the data set in our postgress SQL database well I've pulled

in uh CB insight's complete list of unicorn companies a unicorn company is a company valued at over a billion dollars uh and in here there are 12248 rows and across each of these rows we've got things like valuation the date they've joined I.E the date they became a unicorn uh the country and city they're from the industry they operate in as well as a select group of investors in a comma separated

list so that's in our postgress database and this allows us to really ask any question about that information that we want now rather than asking a question first I'm just going to try some of these suggested queries like compare the count of unicorns in San Francisco and New York over time so what's happening here is that the model is first generating a SQL query then it's running that SQL query against our database it generates this SQL query here uh these

are the results from that query and then we're asking the model to generate a a chart that would best visually represent the users's query so here we can see a a chart that shows us overtime on the xaxis we have uh the uh the years and on the y-axis we have the count of unicorns we've got a title unicorn count in San Francisco versus New York over time we can hover this and see this awesome shatan chart showing us the actual count per year for both cities and then we

have a description the model generates a description this line chart compares the count of unicorns blah blah blah and then really cool we've got a takeaway San Francisco generally has a higher count of unicorns compared to New York over the years with both cities experiencing significant growth in and around 2020 and 2021 really really cool stuff but my favorite feature of this application is an ability to ask the model to explain the SQL Curry that it generated so if we click this question

mark button here what we're doing is we're sending the model the initial natural language query as well as the SQL query itself and we say can you break this down into sections and explain each part and the interface here is really cool so we can hover over a piece and see a description for that piece so in this case this part of the query selects the Year from the date join column the city column and count the number of unicorns for each combination of year and City extract a

year from date join extracts a year from the date when each unicorn joined blah blah blah blah blah and you have this for each component of the query which is really cool and it's great for learning SQL as well to understand how and why the model is doing what it's doing and at the end of the day this is just an input box so we could say for example San Francisco New York and la and we'll see a query being generated and you can see now we're pulling in Los

Angeles as well and we're seeing that in the data too so this is really really really cool and I I love this project and it's such a great use case for AI as well so let's dive into the project and see how it works I've got the project loaded in my editor here it's a relatively simple project because there really is only one page of this application it is a nextjs application uh we're using Shaden for our component