AI Chat
React•
NextJs•Conversations organized into projects, with model selection and writing drafts alongside the discussion. Return to related chats, revise a document in the side editor, and review sample usage across models from the dashboard.
What’s included
The AI Chat template provides a starting interface for teams building an AI assistant or a chat-based product. Conversations, project workspaces and writing tools are designed together, with source code you can adapt to your own models and workflows.
- Conversations and models — Give users a chat interface with streamed responses, model selection and controls to stop or regenerate an answer. Replies can include formatted text and copyable code, with optional activity and source references.
- Project workspaces — Group related conversations into projects with their own instructions and source list. Project workspaces help users return to ongoing work without searching through one flat chat history.
- Writing drafts — Create a draft in the conversation, then select a passage to ask for changes or open it in the side editor. The discussion and its evolving document stay connected as users revise their work.
- Usage overview — A dashboard presents token usage, activity trends and a breakdown by model. These views provide a starting interface for understanding how people use your AI product.
Demo replies run without an API key; the usage dashboard uses sample data. Live models require provider keys, while chats and documents use browser storage. Production authentication and shared storage require integration.
Every screen
- Overview
- Dashboard
- Chat
- New chat · Conversation · Artifacts
- Projects
- All projects · Project workspace · Sources
- Files
- Files
- Pricing
- Pricing
- Authentication
- Sign in · Sign up · Forgot password
Specs
Tech Stack
Typescript
TailwindCss
Tanstack Table
React Hook Form
Recharts
Tiptap
Dnd Kit
Maplibre GL
Zod
Zustand
AI SDK
CodeMirrorFrequently asked questions
What is included with my purchase?
Your purchase includes the AI Chat source code and access to the full NateUI component library. You receive the assembled template and can also use the NateUI CLI to create a starter and add pages or components. All-Access includes every template.
Does it include a backend?
Server-side chat routes and model-provider integration are included, but a complete production backend is not. Demo replies work without an API key, and chats and documents use browser storage. Configure provider keys for live models, then add production authentication, rate limiting and database-backed storage before deploying publicly.
How do I install the template?
Start with the NateUI CLI. It asks you to sign in with the email you purchased with, then creates your project:
npx nateui@latest init-template --ai-chat my-app
Install dependencies and start the app using the commands printed by the CLI. This creates a slim starter; add the template pages you need with add-page. The included README covers template-specific setup. See the Documentation for more commands.
Can I use this template with other frameworks?
The template uses Next.js and TypeScript. You can adapt its React UI to another React framework, but Next.js-specific routing and server-side code need changes. Ready-made Vite, Vue, Angular or Svelte versions of this template are not included.
Can I use it for commercial or client projects?
Yes, within your license limits. Personal covers one developer and one production product. Team covers unlimited developers and products within a single organization. You may modify the source for your projects, but cannot redistribute or resell it as a template or component library. See the Terms of Service for the full license.
Can I customize it or use parts in an existing project?
Yes. You can edit the source, change the styling and layouts, or reuse individual components in an existing React project. Set up the required Tailwind styles, dependencies and import paths first. Template pages may also need changes to match your routing and data layer. See the installation guide for existing-project setup.
Are future updates included?
Yes. Your one-time purchase includes lifetime updates for the source covered by your plan. Updates do not automatically change your project; review and apply new versions to your customized code.
Didn't find an answer? Reach out to support@nateui.com.