Grok (xAI)

Integrate xAI’s Grok into your Noah projects. Build chatbots, streaming interfaces, and tool-calling agents — all through simple prompts.

What You Can Build

• AI chatbots and conversational assistants
• Real-time streaming chat interfaces
• Tool-calling agents that perform calculations and actions
• Content generation and analysis tools
• Customer support bots

Prerequisites

1. Enable Supabase

   Grok integration uses Supabase Edge Functions to securely handle your API key. Make sure Supabase is enabled in your project. See the Supabase setup guide if you haven’t connected it yet.

2. Get Your Grok API Key

   Visit the xAI Console to create or copy your API key. Keep it private and rotate it if compromised.

3. Add Your API Key

   Add your Grok API key as a secret in Supabase so your edge functions can use it securely. See Secrets Management for how to add secrets from the Cloud tab.

How to Integrate

Describe what you want in the chat. Noah automatically sets up the Supabase Edge Function, frontend code, and wiring.

Basic Chat

For standard request-response conversations:

Add a Grok-powered chatbot that answers user questions about my product

Build a Q&A section where users can ask questions and get AI responses using Grok

Streaming Chat

For real-time streaming responses (text appears word by word):

Create a streaming AI chat interface using Grok

Build a chat widget with real-time streaming responses from Grok

Tool Calling

For AI agents that can perform actions (calculations, data lookups, etc.):

Add a Grok AI assistant with tool calling that can perform calculations and look up data

Build an AI agent using Grok that can execute tools like search and calculate

Prompt Cookbook

Copy-paste these prompts to build common Grok-powered features:

Use Case	Prompt
Chatbot	Add a Grok chatbot widget that answers user questions about my product
Content Writer	Build a blog post generator where users enter a topic and Grok writes a draft
Code Helper	Add a code assistant panel where developers paste code and Grok suggests improvements
Summarizer	Create a tool where users paste long text and Grok generates a concise summary
Translation	Build a translation tool using Grok to translate between multiple languages
Email Drafter	Add an AI email composer that generates professional responses using Grok
Data Analyzer	Build a data analysis tool where users upload CSV data and Grok provides insights
Task Planner	Create an AI task planner that breaks down user goals into actionable steps
Interview Prep	Build an interview practice tool where Grok asks questions and gives feedback
Study Assistant	Add a study helper that generates flashcards and quizzes from user notes using Grok

Tips

• Grok excels at reasoning tasks — it handles complex analysis and multi-step problems well.
• Supports OpenAI-compatible API format — Grok uses the same chat completions format, making it easy to switch between providers.
• API billing is separate from Noah — xAI charges based on token usage. Check their pricing page for rates.
• Noah handles the backend — you don’t need to write Edge Functions or API calls manually. Just describe what you want.