How to Build an AI Content Generation Tool in Bubble.io
A custom AI content generation tool built in Bubble.io gives your team a branded, context-aware writing assistant that knows your voice, your clients, and your standards — unlike generic AI tools that start every session knowing nothing about your business.
Why Build a Custom Content Tool Rather Than Use Claude Directly?
Claude.ai and similar general AI tools work well for ad-hoc writing tasks. They fall short when: your team needs to produce content that consistently reflects a specific brand voice, different team members produce noticeably inconsistent AI content, your content workflow involves multiple steps (brief → draft → review → client approval), or you want to build a library of content that persists and is searchable across the organisation.
A custom Bubble.io content tool solves all of these: the system prompt is fixed (ensuring consistent brand voice for every output), the workflow is guided (each team member follows the same process), the output is stored (the content library grows with every piece produced), and the access controls are yours (clients can log in to review and approve in the same tool where the content was generated).
Building the Content Generation System
Design the content type library
The content tool works best when it knows which type of content is being generated — because each content type has a different optimal structure, length, and tone. Build a ContentType data type in Bubble.io: name (text), description (text), system_prompt (long text — the AI instructions specific to this content type), output_format (text: HTML/markdown/plain), typical_length (text: short/medium/long), and an example_output (long text — a benchmark example). Create content types for each format your team regularly produces: LinkedIn Post, Blog Article, Email Newsletter, Proposal Introduction, Case Study, Ad Copy, Social Caption. Each content type loads its system prompt automatically when selected.
Build the brief intake form
The brief form is the most important UX element — it captures the information Claude needs to generate high-quality, specific content. For a LinkedIn post, the brief fields: Topic (text), Key Insight or Angle (long text — the specific perspective or counterintuitive point), Target Audience (dropdown: select from your defined audience profiles), Tone (dropdown: thought leader / practical / conversational / urgent), Call to Action (text — what should the reader do or think differently about after reading?), Any Specific Examples or Data to Include (long text — the first-person evidence that makes AI content original). For each content type: define the brief fields that are specific to that format. A brief-first approach produces dramatically better AI content than a topic-only approach.
Build the generation workflow
Button click workflow — Generate Draft: (1) Retrieve the selected ContentType record and its system_prompt. (2) Build the user_message dynamically from the brief fields: ‘Write a LinkedIn post for [company name]. Topic: [topic]. Key insight: [key_insight]. Target audience: [audience]. Tone: [tone]. CTA: [cta]. Include these specific examples: [examples]. Do not add hashtags. Under 250 words.’ (3) Call the Claude API with the content type system_prompt and the dynamically built user_message. (4) Store the response as a new ContentDraft record: content_type, brief_fields (JSON), draft_text, created_by, created_at, status = draft. (5) Display the draft in the output section of the page.
Build the review and approval workflow
The content moves through statuses: draft → reviewed → approved → published. Build the review interface: the draft displayed with a rich text editor for modifications, a Regenerate button that calls Claude again with the same brief (producing a different version), a Request Changes button that adds a revision note and returns to draft status, and an Approve button that advances to approved status. For client-facing content: build a client portal where clients can log in, see only their content in the reviewed status, and approve or request changes directly. The approval is recorded with a timestamp and the approving user’s identity — a full audit trail of every content approval decision.
Brand Voice Encoding: Making AI Sound Like You
The system prompt is where your brand voice lives. A well-crafted system prompt for a specific company might read: ‘You are a content writer for [company name], a B2B AI automation agency based in Pakistan serving UK, US, and Gulf market clients. Brand voice: direct and honest — never use vague phrases like leveraging or synergies; say what you mean plainly. Expert but accessible — explain complex concepts in plain English without dumbing them down. Confident — make specific claims and support them with specific evidence; avoid hedging. Practitioner perspective — write as someone who has actually built the systems described, not as an observer. Format preferences: short paragraphs (2-3 sentences max), no bullet points in LinkedIn posts, specific numbers and time frames wherever possible, never start a sentence with I or We.’
Build this system prompt through iteration: generate 20 pieces of content, identify what reads most like the brand and what does not, refine the system prompt until the output consistently meets the standard. Store the final system prompt in the ContentType record so it can be updated without touching the code.
How do I handle multiple clients with different brand voices?
Create a Client data type in Bubble.io with a brand_voice_prompt field (long text). When generating content for a specific client: retrieve the client's brand_voice_prompt and combine it with the ContentType system_prompt: [ContentType system_prompt]. For this specific client, additionally: [client brand_voice_prompt]. The client-specific instructions override the general system prompt where they conflict. Each client gets a personalised AI that sounds like their specific brand rather than the agency's brand.
Can I build version control for content drafts in Bubble.io?
Yes — create a ContentVersion data type linked to ContentDraft: version_number, content_text, created_at, created_by, change_note. Every time a draft is modified (either by editing or by AI regeneration), create a new ContentVersion record. The latest version is always displayed; previous versions are accessible via a version history panel. This gives clients and reviewers the ability to compare versions and revert to a previous draft if the latest revision is not an improvement.
Want a Custom Content Generation Tool Built in Bubble.io?
SA Solutions builds branded AI content tools for agencies and businesses — brief intake, brand voice encoding, multi-format generation, review workflows, and client approval portals.
