Steps to buuild a chatbot (eribot)

[X] bun create t3-app@latest [] research next-js chatbot implementations

[X] start by defining types

[] get database running --- necessary to run on localhost ?? ~ install @types/better-sqlite3 [X] ~ create a table in the schema [X] ---> need to test [] ~ create a db url in .env (placeholder [X]) ---> actually make it real [] ~ bun run dev [X]

[] build out server side code... what is needed? ~ imports from ai-sdk ~ queries openAi chat gpt ~ create a POST function that streams text ~ follow cookbook boilerplate

[X] declare the types

v0

supports one model stores messages in chat history ( a json object is fine but maybe use sqlite?? )

interfaces: types [X] server / drizzle db [] client chatbot (page.tsx []) --> page has to render ui for the client to use chatbot

v1

supports multiple models adds attachments ... links, images (see below)

...... FEATURE REFERENCES

add image attachments:

/// 'use client';

import { useChat } from '@ai-sdk/react'; import { useState } from 'react'; import { Attachment } from '@ai-sdk/ui-utils';

export default function Page() { const { messages, input, handleSubmit, handleInputChange, status } = useChat();

const [attachments] = useState<Attachment[]>([ { name: 'earth.png', contentType: 'image/png', url: 'https://example.com/earth.png', }, { name: 'moon.png', contentType: 'image/png', url: 'data:image/png;base64,iVBORw0KGgo...', }, ]);

return (

{messages.map(message => (

{${message.role}: }

        <div>
          {message.content}

          <div>
            {message.experimental_attachments
              ?.filter(attachment =>
                attachment.contentType?.startsWith('image/'),
              )
              .map((attachment, index) => (
                <img
                  key={`${message.id}-${index}`}
                  src={attachment.url}
                  alt={attachment.name}
                />
              ))}
          </div>
        </div>
      </div>
    ))}
  </div>

  <form
    onSubmit={event => {
      handleSubmit(event, {
        experimental_attachments: attachments,
      });
    }}
  >
    <input
      value={input}
      placeholder="Send message..."
      onChange={handleInputChange}
      disabled={status !== 'ready'}
    />
  </form>
</div>

); } ////

Create T3 App

This is a T3 Stack project bootstrapped with create-t3-app.

What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.

• Next.js
• NextAuth.js
• Prisma
• Drizzle
• Tailwind CSS
• tRPC

Learn More

To learn more about the T3 Stack, take a look at the following resources:

• Documentation
• Learn the T3 Stack — Check out these awesome tutorials

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow our deployment guides for Vercel, Netlify and Docker for more information.