OpenAI ChatKit Widget Templates

🌟 Connect & Learn More

A collection of free, ready-to-use display-only ChatKit widget templates for OpenAI's ChatKit platform. These templates are designed to showcase data and information without requiring server-side actions - perfect for quick prototyping and development.

⚠️ Important Download Note

The Widget Builder is pretty buggy right now, so sometimes just giving the code I have here as reference in a new widget prompt may be the best approach.

🚀 Quick Start

Option 1: Use Our Templates

1. Open the Widget Builder: Go to widgets.chatkit.studio
2. Start Fresh: Click "New widget" → "Start blank"
3. Choose a Template: Browse the templates below and copy the code
4. Paste & Customize: Paste the widget structure and data into the respective editors
5. Preview & Export: See your widget live and export the .widget file for your app

Option 2: Create Custom Widgets

1. Use Our Prompt Template: Check out widget-builder-prompt.md for a ready-to-use prompt
2. Copy & Customize: Use the template to describe your data and desired UI
3. Generate: Paste into the Widget Builder to create your custom widget
4. Download: Export the .widget file for your app

📁 Template Categories

💰 Financial

• Stock Market Watchlist - Real-time stock prices with trends
• Cryptocurrency Portfolio - Crypto holdings and market data

📱 Social & Media

• Social Media Post Preview - Instagram/Twitter-style posts
• News Article Card - News headlines with engagement

✅ Productivity

• Task/To-Do List - Interactive task management
• Appointment Booking - Calendar-based booking system

🍳 Lifestyle

• Recipe Card - Cooking recipes with ingredients
• Location/Map Widget - Nearby places and directions

🎯 Engagement

• Poll/Survey Widget - Interactive voting and surveys
• Customer Support Ticket - Helpdesk ticket management

🛠️ How to Use These Templates

Step 1: Open the Widget Builder

1. Go to widgets.chatkit.studio
2. Click "New widget" to start fresh

Step 2: Copy the Widget Structure

1. Navigate to any template folder (e.g., templates/financial/stock-watchlist/)
2. Open widget-structure.jsx
3. Copy the entire JSX code
4. Paste it into the top editor (Widget Structure) in the Widget Builder

Step 3: Copy the Data

1. Open data.json from the same template folder
2. Copy the entire JSON data
3. Paste it into the bottom editor (Data) in the Widget Builder

Step 4: Preview & Customize

• See your widget live in the right panel
• Modify data values to match your content
• Adjust colors, sizes, and styling as needed
• Test different themes using the sun/moon toggle

Step 5: Export & Use

• Click the "Download" button to get the .widget file
• Import the .widget file into OpenAI Agent Builder
• Widgets display data automatically - no server actions needed!

📖 Template Structure

Each template follows this format:

templates/
├── category/
│   ├── widget-name/
│   │   ├── widget-structure.jsx    # Widget JSX code
│   │   ├── data.json              # Sample data
│   │   └── README.md              # Widget documentation

📁 Repository Structure

openai-widget-free-templates-corbin/
├── README.md                       # Main documentation
└── templates/                      # Widget templates
    ├── financial/                  # Financial widgets
    ├── social/                     # Social media widgets
    ├── productivity/               # Productivity widgets
    ├── lifestyle/                  # Lifestyle widgets
    └── engagement/                 # Engagement widgets

🎨 Widget Builder Tips

• Live Preview: Changes appear instantly in the right panel
• Theme Toggle: Use the sun/moon icon to test light/dark themes
• Responsive Design: Test different screen sizes
• Data Display: All widgets are display-only - perfect for showcasing information

🤝 Contributing

Found a bug or want to add a new template? We'd love your help!

---

leave a like & subscribe if this was helpful :)

1. Fork this repository
2. Create a new template in the appropriate category
3. Add documentation and examples
4. Submit a pull request

📄 License

This project is open source and available under the MIT License.

🐛 Troubleshooting

Common Issues

Widget not displaying correctly?

• Check that you copied both the widget structure AND data
• Ensure all {variable} placeholders have corresponding data
• Verify JSON syntax is valid (no trailing commas, proper quotes)

Data not displaying?

• Check that all {variable} placeholders have corresponding data
• Verify JSON syntax is valid (no trailing commas, proper quotes)
• Ensure data structure matches the widget expectations

Styling issues?

• Use the theme toggle to test both light and dark modes
• Check that color values are valid (e.g., "info", "success", "danger")
• Ensure size values are supported (e.g., "sm", "md", "lg")

Need help?

• Check the individual widget README files for specific guidance
• Test your widgets in the Widget Builder

🔗 Useful Links

• OpenAI ChatKit Widgets Documentation
• Widget Builder
• Icon Library
• Component Reference

---

Happy Building! 🚀

Made with ❤️ for the ChatKit community