The AI Chatbot
Learn how the AI Chatbot works and how to customize its behavior and prompts.
The AI Chatbot is a core feature of VibeFast, providing a ready-to-use conversational AI experience. It's built using the Vercel AI SDK on the frontend and a Convex HTTP Action for streaming responses on the backend.
Overview
- Frontend: The chat UI is primarily managed by the
useChathook from@ai-sdk/react. The hook and its configuration can be found insrc/features/chatbot/hooks/use-chat-config.ts. - Backend: When a message is sent, it calls a Convex HTTP Action defined in
convex/chatbotHttpActions.ts. This action communicates with an AI provider (like OpenAI or Gemini) and streams the response back to the client.
How-To: Change the AI's Personality
The personality of the AI is defined by its "system prompt." You can change this prompt in the backend to give the AI a different role or personality.
1. Open the Backend HTTP Action
Navigate to the file convex/chatbotHttpActions.ts.
2. Add or Modify the System Prompt
Inside the streamChatResponse function, just before the coreMessages array is passed to the AI, you can insert a system message.
// ... inside streamChatResponse function
// ── 3 ▶ Convert to CoreMessage[] ───────────────────────
const coreMessages: CoreMessage[] = messages.map((m) => {
// ... existing mapping logic
});
// 👇 ADD YOUR SYSTEM PROMPT HERE 👇
coreMessages.unshift({
role: 'system',
content: 'You are a helpful and slightly sarcastic assistant named VibeBot. Keep your answers concise.',
});
// ── 4 ▶ Handle Image Attachments ───────────────────────
// ...By changing the content of the system message, you can completely alter the chatbot's behavior.
How-To: Modify the Suggested Messages
When the chat is empty, a list of suggested prompts is displayed. You can easily change these.
1. Open the Translations File
The suggested messages are stored in the main translation file to support multiple languages. Open src/translations/en.json.
2. Edit the suggested_messages Object
Find the chatbot.suggested_messages object and edit the strings to your liking.
{
"chatbot": {
"title": "AI Assistant",
"suggested_messages": {
"help_today": "How can you help me today?",
"weather": "What's the weather like?",
"fun_fact": "Tell me a fun fact",
"brainstorm": "Help me brainstorm startup ideas",
"explain_concept": "Explain quantum computing simply",
"capabilities": "What are your capabilities?",
"writing_tips": "Give me tips for writing better",
"solve_problem": "Help me solve a problem"
}
}
}The component at src/features/chatbot/components/suggested-messages.tsx will automatically pick up these changes.