はじめに
業務や趣味でシステムプロンプトを書きたいなと思ったのですが、システムプロンプトってどうやって書けばいいんだろう？と疑問に思いました。
わからないなら「著名なOSSのシステムプロンプトを参考にすればいいじゃない」と思い備忘録的に残した記事になります。
react-agentってなに？
ReactAgentは、GPT-4などの大規模言語モデル（LLM）を活用し、ユーザーストーリーからReactコンポーネントを自動生成・構成するオープンソースの実験的エージェントです。
何を見る？
backend/main/react-agent/generative/ReactComponentGenerator.tsにプロンプトテキストを見てみようと思います。
const componentExample = `
import React from 'react';
import { ComponentNameOne, ComponentNameTwo } from '@react-agent/shadcn-ui'
export interface ComponentNameProps {
{/* Your interface implementation */}
}
const ComponentName = (props: ComponentNameProps) => {
return (
{/* Your component implementation */}
);
};
export default ComponentName;
`;
const GENERATE_FORM_PROMPT = `
Act as a Frontend Developer.
Create Typescript React Functional Component based on the description.
Make sure it is beautiful and easy to use.
Make sure it covers all the use cases and states.
---
Return Example:
${componentExample}
---
Instructions:
Make sure it's a working code, don't assume that I'm going to change or implement anything.
Assume I have React Typescript setup in my project.
Don't use any external libraries but @react-agent/shadcn-ui which is interal library, recharts for charts.
---
Return Type:
return a React component, written in Typescript, using Tailwind CSS.
return the code inside tsx/typescript markdown \`\`\`tsx <Your Code Here> \`\`\`.
`;
AIで翻訳してみた
フロントエンド開発者として動作してください。
与えられた説明を元に、TypeScriptを使ったReactの関数型コンポーネントを作成してください。
作成するコンポーネントは美しく、使いやすいものにしてください。
また、すべてのユースケースや状態（state）をカバーするようにしてください。
---
返答の例:
${componentExample}
---
指示:
- **実際に動作するコードを生成してください。**
- 後から私が修正や追加実装をすることを想定しないでください。
（つまり、完成品として提供してください。）
- React と TypeScriptの環境設定は既に整っている前提としてください。
- 外部ライブラリは利用しないでください。ただし、例外として以下のライブラリのみ使用可能です。
- 内部ライブラリの`@react-agent/shadcn-ui`
- チャートのためのライブラリである`recharts`
---
返答の形式:
- Reactコンポーネントを返却してください。
- コンポーネントは**TypeScriptで記述**し、**Tailwind CSSを使用**してください。
- 必ず次のように、コードをmarkdownのコードブロック内に記述してください。
```tsx
<ここにコードを書いてください>
\`\`\`
どう書いている？
- ロールの指定がある
- AIに対してフロントエンド開発者として振る舞うよう指示しています
- 品質の指定がある
- UIが「美しく、使いやすい」ことを求めているため、見栄えやUXにも配慮したコードが求められています。
- 「すべてのユースケースと状態をカバー」とあるため、
コンポーネントの実装には漏れがないよう、エラー処理や読み込み状態なども含めて丁寧なコードが生成されるように促しています。
- 返答例がある
- AIはサンプルを見てどのような形式で返すべきかを理解できるようになっている
まとめ
システムプロンプトはユーザープロンプトと違って毎回同じような形式の答えが求められるので、使い捨てのプロンプトより入力と出力が明確化されて面白いなと思いました。
また、ロールの指定はユーザープロンプトでも使ってみたら正確な回答が来るかも？と思いました