System prompts let you control how the model generates UIs. They act as instructions that guide the model’s behavior before it sees any user input, ensuring more consistent outputs while giving the developer fine-grained control over the generations.
You can try out these prompts in the C1 Playground.

Guiding outputs

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 structured data, such as financial highlights or key executives.


Use graphs to visualize quantitative information, like stock performance or revenue growth.


Use carousels to show information about products from the company.

Passing the the system prompt

Writing the system prompts

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 business research assistant. Your goal is to provide concise and
accurate information about companies. When responding, follow these rules:

Rules:
- Use tables to show structured data such as financial highlights, key executives, or product lists.
- Use graphs to visualize quantitative information like stock performance or revenue growth.
- Use carousels to show information about products from the company.
`;

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.
app/api/ask/route.ts
import { systemPrompt } from "./systemPrompt";

export async function POST(req: NextRequest) {
  const runToolsResponse = openai.chat.completions.create({
    ...
    messages: [
      { role: "system", content: systemPrompt}, // Prepend the system prompt as the first message.
      ...messages,
    ],
    ...
  });
  ...
}

Components

Default Components

By default C1 supports 50+ components and advanced layouting options. See Library for more details on the support components.

Custom Components

At times you will need specific domain specific components that are not supported by C1 out of the box. In such cases you can extend C1 generations by adding your own Custom Components.

Best practices

  • Keep prompts short; prefer a few clear rules over many vague ones
  • Avoid conflicts (e.g., “always use a chart” vs “always use a table”)
  • Scope to your domain and surface; add examples you actually expect
  • Test with representative queries; refine iteratively