feat(cookbooks): add cookbook for building an ai chat app

[thepushkaraj]

📋 Description

Added a cookbook for building an AI chat app using AI-SDK and LLM Blueprint

🎯 Type of Change

• 📝 Documentation update (improving existing docs)
• ✨ New documentation (adding new guides, API docs, etc.)
• 🐛 Bug fix (fixing errors, broken links, incorrect information)
• 🎨 Style/formatting (improving readability, fixing formatting)
• 🏗️ Structural change (reorganizing content, navigation updates)
• 🌐 Translation (adding or improving translations)
• 🖼️ Assets (adding or updating images, diagrams)

📖 What documentation does this PR affect?

• Getting Started / Setup
• API Reference
• Developer Resources
• Integration Guides
• Features Documentation
• External Integrations
• Changelog
• Other:

✅ Checklist

• I have read the Contributing Guidelines
• I have tested my changes locally with mintlify dev
• All links are working correctly
• Images are properly displayed and optimized
• Code examples are tested and working
• I have updated the navigation in docs.json (if applicable)
• My changes follow the project's style guide
• I have performed a self-review of my changes
• I have added appropriate frontmatter to new pages

🧪 Testing

• Verified locally at http://localhost:3000
• Checked responsive design on mobile viewport
• Tested all code examples
• Validated all external links

📸 Screenshots (if applicable)

🔗 Related Issues

Closes #

📝 Additional Notes

👥 Reviewers

@dodopayments/documentation-team

Summary by CodeRabbit

• Documentation
  • Added a step-by-step tutorial showing how to build an AI chat app with usage-based billing: setup, creating a usage-based product with a free tier, test purchases, backend token tracking, frontend chat UI with real-time per-message usage display, error handling, configuration samples, and example snippets.
  • Added a new navigation entry under Developer Resources → Cookbooks to surface the tutorial.

[coderabbitai]

Walkthrough

Adds a new Developer Resources cookbook MDX tutorial that documents building an AI chat app with usage-based billing (Dodo Payments + AI SDK), including backend and frontend code samples, env/config snapshots, and troubleshooting. Updates docs.json navigation to include the new page.

Changes

Cohort / File(s)	Summary
Tutorial content (new) developer-resources/build-an-ai-chat-app-with-usage-based-billing.mdx	New comprehensive MDX guide outlining creation of a usage meter, obtaining API keys, configuring a pay-per-token product with a free tier, performing a test purchase, Node.js/TypeScript backend examples (Express, AI client, ingestion blueprint emitting ai_chat_usage meter events), and a frontend chat UI with real-time per-message token display and error handling.
Navigation update docs.json	Adds the new tutorial page to Developer Resources → Cookbooks pages array; adjusts trailing comma after the preceding entry to accommodate the new item.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Frontend as Frontend UI
  participant Server as Backend (/chat)
  participant AI as AI SDK / Model
  participant Dodo as Dodo Ingestion (ai_chat_usage)

  User->>Frontend: Type message & customerId, send
  Frontend->>Server: POST /chat { message, customerId }
  Note over Server: Validate input\nInit AI client with metering
  Server->>AI: Generate response (stream or sync)
  AI-->>Server: Response + tokens_used
  Server->>Dodo: Ingest meter event `ai_chat_usage` (token_count)
  Server-->>Frontend: 200 { reply, tokenUsage }
  Frontend-->>User: Show reply and per-message tokens

  alt Invalid input
    Server-->>Frontend: 400 Bad Request
    Frontend-->>User: Validation error
  else Server/AI error
    Server-->>Frontend: 500 Server Error
    Frontend-->>User: API error
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I hop through code, a tiny dev sprite,
Counting tokens by day and by night.
Backend hums, frontend sings,
Meters measure digital things.
A carrot for each clever byte—🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly conveys the primary change by indicating a new cookbook addition for building an AI chat app within the cookbooks section and uses clear, conventional commit styling without extraneous detail. It accurately reflects the changeset’s main purpose in a single concise sentence.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	The pull request description follows the repository’s template by including a clear description, the type of change with correct selections, affected documentation sections, a completed checklist, testing details, related issues, and reviewers. All required headings are present and populated, and optional sections such as screenshots and additional notes are appropriately left blank.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8ce6a50 and 04ec353.

⛔ Files ignored due to path filters (8)

• images/cookbooks/ai-chat-app/aggregation.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/ai-chat-demo.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/create-meter.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/first-message.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/free-tier-test.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/meter-configuration.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/meter-event.png is excluded by !**/*.png
• images/cookbooks/ai-chat-app/product-pricing.png is excluded by !**/*.png

📒 Files selected for processing (2)

• developer-resources/build-an-ai-chat-app-with-usage-based-billing.mdx (1 hunks)
• docs.json (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{md,mdx}

📄 CodeRabbit inference engine (.cursor/rules/mintlify.mdc)

Every documentation page must begin with YAML frontmatter containing title and description

Files:

• developer-resources/build-an-ai-chat-app-with-usage-based-billing.mdx

**/*.mdx

📄 CodeRabbit inference engine (.cursor/rules/mintlify.mdc)

**/*.mdx: Use clear, direct language appropriate for technical audiences
Write instructions in second person (you)
Use active voice over passive voice
Use present tense for current states and future tense for outcomes
Maintain consistent terminology across documentation
Keep sentences concise while preserving necessary context
Use parallel structure in lists, headings, and procedures
Lead sections with the most important information (inverted pyramid)
Use progressive disclosure: introduce basics before advanced topics
Break complex procedures into numbered steps using /
Include prerequisites and context before instructions
Provide expected outcomes for each major step
End sections with next steps or related information
Use descriptive, keyword-rich headings for navigation and SEO
Focus on user goals and outcomes rather than system features
Anticipate common questions and address them proactively
Include troubleshooting for likely failure points
Provide multiple pathways (beginner vs advanced) when appropriate, with an opinionated recommended path
Use for supplementary information that supports main content
Use for expert advice, shortcuts, or best practices
Use for critical cautions, breaking changes, or destructive actions
Use for neutral background or contextual information
Use for success confirmations or achievement indicators
Use to present the same concept in multiple languages
Provide complete, runnable code examples with language specified and filename when relevant
Include RequestExample/ResponseExample blocks for API endpoint docs
Document API parameters using (path, query, header, body) with types and required/defaults
Document API responses using with names, types, and required flags
Use for nested object properties or hierarchical information
Use / for platform-specific or alternative approaches
Use / for suppl...

Files:

• developer-resources/build-an-ai-chat-app-with-usage-based-billing.mdx