This is a Next.js project with AI-powered chat functionality using the AI SDK, featuring reasoning capabilities and tool usage.
- AI Chat Interface: Interactive chat widget with streaming responses
- Reasoning Display: Shows AI reasoning process with collapsible interface
- Tool Usage: Displays tool calls and their results (e.g., weather API)
- Weather Integration: Real-time weather data with fallback to mock data
- Modern UI: Built with Tailwind CSS and shadcn/ui components
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
To enable real weather data, you can set up a free OpenWeatherMap API key:
- Sign up at OpenWeatherMap
- Get your free API key
- Create a
.env.localfile in the root directory:OPENWEATHER_API_KEY=your_api_key_here
If no API key is provided, the app will use mock weather data for demonstration purposes.
- Start a conversation by typing a message
- Ask for weather information: "What's the weather in New York?"
- The AI will show its reasoning process and use the weather tool
- Tool calls are displayed with input parameters and results
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.