Fundamentals
Invisible AI
Conversational AI
Now that we have a professional chat interface with Elements, let's give our AI some personality!
System prompts are like permanent instructions that shape how your AI behaves throughout an entire conversation. While user messages change with each interaction, the system prompt remains constant, ensuring consistent personality and behavior.
Building on Elements
We'll be modifying the API route while keeping our beautiful Elements UI from the previous lesson. The visual impact of different personalities will be even more striking with professional message bubbles and markdown rendering!
System Prompts act like persistent instructions or "character notes" for an LLM. Unlike user prompts (which change each turn), a system prompt guides overall behavior of the LLM when it is generating responses. Your system prompt will:
Your system prompts control how the LLM responds to every prompt in a conversation, separate from what the user asks with their prompts throughout a conversation. The system prompt is essential for branding, safety, and consistent bot behavior.
system PropertyLet's modify our existing API route to add personality. Open app/api/chat/route.ts and add a system property to your streamText call:
typescript
Now add the system prompt:
typescript
Test it out! Start your dev server if it isn't running:
bash
Navigate to http://localhost:3000/chat and ask "What is Next.js?"
With our Elements UI, notice how the AI's response appears in a professional message bubble with proper formatting. But the personality is generic. Let's change that!
It's possible to modify the system property to drastically change behavior for every single response.
Update route.ts and change the system prompt value:
typescript
Save and test: Refresh your chat page and ask "What is Next.js?" again. Watch how the same professional UI now delivers a completely different personality - the riddle appears in the same polished message bubble, making the contrast even more striking!
Models can adopt personas. Detail improves adherence.
Update route.ts: Change system string to detailed persona.
typescript
Save and test: Refresh the page and try asking about modern technology like "What is Next.js?" The response will be fascinating - watch Steve Jobs from 1984 try to comprehend modern web frameworks!
Model Selection & System Prompts
More capable (and expensive) models (like
openai/gpt-5oropenai/o3) generally follow System Prompts more precisely and maintain character consistency. For production chatbots where persona is critical, test models to balance performance and cost.
Define persona and constraints for realistic application.
Update route.ts: Change system string to business context.
typescript
Save and test: Try various questions:
Notice how the AI stays in character, provides helpful support responses, and politely deflects off-topic questions. The Elements UI makes these professional responses look even more credible!
System Prompt Length
While detailed System Prompts improve behavior, very long prompts consume context window space, potentially affecting performance or cost. Keep prompts concise yet clear for production.
System prompts transform your chatbot from a generic assistant into a unique personality:
system property in streamText sets persistent behavioral rules💡 Crafting Effective System Prompts
Struggling to balance personality with constraints? Try asking an AI assistant:
text
Your chatbot now has personality, but it's still limited to conversation. In the next lesson, we'll give it superpowers by adding tool calling - letting it fetch real data, perform calculations, and interact with external APIs.
Imagine your Steve Jobs bot being able to actually look up modern technology, or your support assistant actually checking account statuses!
Mark this chapter as finished to continue
Mark this chapter as finished to continue