AI Chat

Connect your chosen model to the chat, then adapt how users ask questions and work with its responses.

The built-in Demo model uses scripted replies and needs no API key. To receive answers from your own model, connect its provider and select it in the chat.

Included screens

The full demo source includes the screens below. The starter focuses on Chat.

Add a screen to your starter

The AI Chat starter already includes Chat. Open /chat after starting the app; its main source is in src/app/(protected-pages)/chat/.

The other screens in the table above are optional. List the AI Chat pages available to add:

For example, to add Dashboard:

Open /dashboard after the command finishes. Its main source is in src/app/(protected-pages)/dashboard/. Add each additional screen you want with its own page ID. See Add demo pages for adding, replacing or removing a page.

Turn it into your page

The supplied screen names, content and actions are examples. Keep a complete screen, combine parts from several screens, or reuse only the components that help your users complete the task you are building.

A practical way to adapt a screen is:

1. Search for a visible heading, field label or button text to find the component that renders it.
2. Change the information, actions and layout shown to the user.
3. Remove demo sections and controls your application does not need.
4. When adding or renaming data, update every place where users enter or read it.

Begin in the folder of the page you added. Chat-specific screen components are under src/app/(protected-pages)/chat/_components/, while shared pieces such as the composer and model selector are under src/components/ai/.

If none of the supplied screens fits what you are building, follow Create your own page and reuse only the components you need.

Connect your application

The added screen uses sample data and demonstration interactions. Replace its data reads with calls to the database or API used by your application. Keep the data shape expected by the screen, or update its components and types at the same time.

Then connect the actions you keep—such as creating, editing or deleting a record—to real write operations. A visible change or success message in the demo does not by itself mean the change is stored.

Test the complete round trip: load a record, change it, reload the page and confirm the saved result is returned. Follow Connect your data for the read and write pattern.

Connect your model

Your provider is the service or endpoint that runs the model. Its AI SDK adapter connects your application to that API. Choose the adapter for your provider from the AI SDK provider guides.

The built-in Demo model uses scripted replies and needs no API key. Keep it while onboarding your own model so you still have a keyless option for checking the interface.

Onboarding a model connects three parts:

1. The provider connection supplies the credentials and endpoint used to reach the model.
2. The model entry makes that model available in the Chat menu.
3. The request resolver turns the selected entry into the model instance used for a response.

The entry's provider, modelRef and envKey must agree with the provider connection. Adding a key alone does not add a model to the menu, and adding a menu entry alone does not connect its requests.

If your project already has the connection you need, reuse it when adding another model. Otherwise, add the connection as part of the steps below.

1. 1

   Get your connection details

   Find the model's API identifier and any required credentials in your provider's documentation. For a custom endpoint, also find its API base URL.

   Use the API model identifier when configuring requests; the model's display name may be different.

2. 2

   Configure the server environment

   Store the required credentials in .env.local, beside package.json. For example:

   .env.local

   AI_PROVIDER_API_KEY=your_api_key

   This variable name is an example. Pass its value to your adapter, or use the environment-variable name that your adapter documents. Adding an environment variable alone does not create a provider connection.

   Keep private credentials server-side, without a NEXT_PUBLIC_ prefix. If your endpoint needs no key, skip the key configuration. See Environment variables for deployment settings.

3. 3

   Add the model to the menu

   Append an entry to chatModels in src/utils/ai/models.ts:

   {
       id: 'my-model',
       name: 'My model',
       provider: 'my-provider',
       logo: 'ai',
       modelRef: 'your-provider-model-id',
       description: 'Custom model',
       capabilities: {
           tools: false,
           vision: false,
           reasoning: false,
       },
       envKey: 'AI_PROVIDER_API_KEY',
   },

   Use a unique id for this entry. Set modelRef to the exact model ID accepted by your provider, and make envKey match the key variable used by your connection. For a keyless endpoint, omit envKey.

   The provider value identifies the connection you will use in the next step. When reusing an existing connection, use its provider value and key configuration.

   Start with text chat, then enable the capability flags for features your model and adapter support. Writing tools require tool calling; enabling a flag does not add that capability to the model.

4. 4

   Connect requests to the provider

   Install the package shown in your provider's AI SDK guide. In src/utils/ai/providers.ts, add its connection inside resolveLanguageModel, before the existing Demo fallback.

   Use the selected entry's provider to choose the connection and its modelRef to create the model instance. Pass in the credentials from your server environment and any endpoint settings required by the adapter. For the example key above, read:

   const apiKey = process.env.AI_PROVIDER_API_KEY

   Follow your adapter's setup to create a model instance, named connectedModel in this example, and return it from the matching provider branch:

   return { model: connectedModel }

   Keep any existing connections you still need. Adding a menu entry offers the model as a choice; this connection is what sends requests to it.

5. 5

   Select the model and send a message

   Restart the development server after changing the connection settings:

   npmpnpmyarn

   npm run dev

   Reload Chat, select My model and send a short text message. Adding credentials does not automatically switch the selection away from Demo.

   If the model stays disabled, check that envKey matches the variable in .env.local. If requests fail, check the provider's response, model identifier, credentials and endpoint settings.