The Twitter Brand Personality Generator uses xAI’s Grok to return structured JSON output that analyzes how your brand would behave on Twitter. Input details are defined in the toolConfig.ts file, and the output is beautifully displayed with custom components.

Twitter Brand Personality Generator using Grok

​
Pre-requisites

To run the app, you must have Supabase and xAI’s Grok API set up. If you haven’t done this yet, please start there.

Supabase

Set up user authentication & PostgreSQL database using Supabase

Grok API

Set up xAI’s Grok API & understand how it’s used throughout the app

That’s all you need to get the app running.

Review lib/types/toolconfig.ts to understand the various configuration fields in the demo app.

​
Building variations

The app showcases advanced output rendering with:

  • Custom radar charts for brand personality scores
  • Twitter-style engagement metrics
  • Risk analysis visualization
  • Motion animations for smooth transitions

​
Prompt and JSON schema

Start by creating a new prompt and JSON schema for your app.

Your prompt.ts file should manage user input like this:

prompt.ts
export function generatePrompt(body: any) {
  const { brandName, industry, targetAudience, brandPersonality } = body;

  return (
    "Analyze and generate a Twitter brand personality profile with engagement metrics and risk analysis.\n" +
    "INPUTS:\n" +
    `Brand Name: ${brandName}\n` +
    `Industry: ${industry}\n` +
    `Target Audience: ${targetAudience}\n` +
    `Brand Personality: ${brandPersonality}\n`

The input variables will be used to generate a comprehensive Twitter personality analysis, including tone scores, example tweets, and PR disaster scenarios.

​
Input Configuration

Update toolConfig.ts to include:

​
Custom Output Rendering

Unlike the generic output display, this app uses a custom output component with:

  1. Radar Chart: Visualizes brand tone scores
  2. Tweet Style Analysis: Shows common phrases and emoji usage
  3. Example Tweets: Displays generated tweets with engagement metrics
  4. PR Risk Analysis: Shows potential controversy scenarios with risk levels

The custom output component uses Framer Motion for smooth animations and Recharts for data visualization. Check the source code for implementation details.

​
Advanced Features

The app includes several advanced features:

  • Structured JSON output with nested data
  • Interactive data visualizations
  • Engagement metric predictions
  • Risk analysis with visual indicators
  • Motion animations for better UX
  • Mobile-responsive design

While the app uses custom output rendering, you can still use the automatic output rendering system for quick prototyping before implementing custom views.

Claude 3DALL·E 2 & 3