This guide assumes that you have completed the Quickstart.

System prompts are a powerful way to customize the behavior of your agents. They are used to provide instructions to the agent on what UI components to use, how to behave, the tone / language to use, and more.

The following is a step-by-step guide on how to add a system prompt to your agent. For the purpose of demonstration, this guide builds a Harry Potter trivia agent.

1

Write some rules for the agent

You can give the agent rules that it must follow. For example, you can instruct the agent to use a specific UI component for a certain type of question. Here’s a demonstration of how each rule affects the agent’s output:

RuleOutput

Use tables to show related information such as:
- Characters and their affiliations (house, blood status, etc)
- Spells and their effects

Use graphs to show quantitative information such as:
- Comparison of spells cast by characters
- Number of appearances of characters in the series

Use carousels to show the cast members when asked about the cast.
2

Write the system prompt

You can use the rules you’ve prepared in the previous step to write a system prompt. You can also instruct the agent to play a specific role or use a specific tone / language using this prompt.

systemPrompt.ts
export const systemPrompt = `
You are a Harry Potter trivia expert. Answer any user questions about the Harry Potter series and follow the following rules:

Rules:
- Use carousels to show the cast members when asked about the cast.
- Use tables to show related information such as:
  - Characters and their affiliations (house, blood status, etc)
  - Spells and their effects
- Use graphs to show quantitative information such as:
  - Comparison of spells cast by characters
  - Number of appearances of characters in the series
- Use accordions or tabs to organize dense information such as:
  - Sorting trivia by book or movie
  - Expanding on character backstories
  - Organizing spells by category
`;
3

Add the system prompt to the agent

You can add the system prompt to your message history when passing it to the SDK to ensure that it is always the first message of any conversation.

If you’ve used the quickstart template, you will just need to make the highlighted changes to start using the system prompt.

// ... all your imports
import { systemPrompt } from "./systemPrompt";

export async function POST(req: NextRequest) {
  // ... existing code

  const llmStream = await client.chat.completions.create({
    model: "c1-nightly",
    messages: [
      { role: "system", content: systemPrompt },
      ...messageStore.getOpenAICompatibleMessageList(),
    ],
    stream: true,
  });

  // ... existing code
}

You can view the full code by expanding the following code block:

import { NextRequest, NextResponse } from "next/server";
import OpenAI from "openai";
import { transformStream } from "@crayonai/stream";
import { DBMessage, getMessageStore } from "./messageStore";
import { systemPrompt } from "./systemPrompt";

export async function POST(req: NextRequest) {
  const { prompt, threadId, responseId } = (await req.json()) as {
    prompt: DBMessage;
    threadId: string;
    responseId: string;
  };
  const client = new OpenAI({
    baseURL: "https://api.thesys.dev/v1/embed/",
    apiKey: process.env.THESYS_API_KEY,
  });
  const messageStore = getMessageStore(threadId);

  messageStore.addMessage(prompt);

  const llmStream = await client.chat.completions.create({
    model: "c1-nightly",
    messages: [
      { role: "system", content: systemPrompt },
      ...messageStore.getOpenAICompatibleMessageList(),
    ],
    stream: true,
  });

  const responseStream = transformStream(
    llmStream,
    (chunk) => {
      return chunk.choices[0].delta.content;
    },
    {
      onEnd: ({ accumulated }) => {
        const message = accumulated.filter((message) => message).join("");
        messageStore.addMessage({
          role: "assistant",
          content: message,
          id: responseId,
        });
      },
    }
  ) as ReadableStream<string>;

  return new NextResponse(responseStream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache, no-transform",
      Connection: "keep-alive",
    },
  });
}
4

Test it out!

Test our your Harry Potter trivia agent by asking it a few questions: