Quickstart: Flapjack Skill

The fastest way to start building with Flapjack. Install the plugin in your AI editor, and your assistant gains full knowledge of the SDK, API, patterns, and anti-patterns.

Time: 30 seconds Prerequisites: Claude Code, Cursor, or any Agent Skills-compatible editor

Step 1: Install the Skill

Claude Code / Cursor:

npx skills add Maatskappy/flapjack-skills@flapjack-integration

Or via plugin command:

/plugin add maatskappy/flapjack

This gives your AI assistant access to:

• Full @flapjack/sdk API reference
• React hook patterns (FlapjackProvider, useChat)
• Server-side proxy patterns for production
• SSE streaming event types
• Common mistakes and fixes
• Agent configuration guidance

📋 Copy as prompt

Install the Flapjack plugin using /plugin add maatskappy/flapjack so you have access to the full Flapjack SDK reference.

Step 2: Get Your API Key

1. Go to flapjack.chat
2. Sign up or log in
3. Navigate to Keys in the sidebar
4. Click Create Key
5. Copy the key — it starts with fj_live_

Important: The raw key is shown only once. Store it securely.

Step 3: Create an Agent

1. Go to Agents in the sidebar
2. Click Create Agent
3. Set a name, system prompt, and model
4. Copy the Agent ID from the URL

Step 4: Ask Your AI Assistant

Now that the plugin is installed, simply describe what you want to build. The skill activates automatically when you mention Flapjack, @flapjack/sdk, FlapjackClient, or useChat.

Example prompts to give your AI assistant:

Set up a Flapjack chatbot in my Next.js app using agent ID abc-123 and my API key from the FLAPJACK_API_KEY environment variable. Use the React hooks for the frontend and a server-side proxy to keep the key secure.

Add Flapjack streaming to my Express server. I want to create a thread, send a message, and stream the response tokens to the client.

Build a support chat widget using Flapjack's useChat hook. Show a typing indicator while streaming and display tool calls in the UI.

What the Skill Knows

The Flapjack skill provides your AI assistant with:

Topic	Coverage
SDK Setup	FlapjackClient constructor, config options, base URLs
TypeScript Client	All methods: listAgents, getAgent, createThread, sendMessage, uploadDocument, listDocuments, deleteDocument
React Hooks	FlapjackProvider setup, useChat hook API (messages, sendMessage, isStreaming, error, reset)
Streaming	SSE event types: meta, token, tool_call, tool_executing, tool_result, done, error
Security	Server-side proxy pattern, API key handling, never exposing fj_live_ keys client-side
Models	GPT-5.4, GPT-5.4-mini, GPT-5.4-nano, Claude Opus 4.7, Claude Sonnet 4.6, Claude Haiku 4.5
Anti-patterns	Common mistakes with fixes (wrong base URL, missing error handling, exposed keys)

Next Steps

• Concepts: Agents — understand how agents work
• SDK Reference — full SDK documentation
• API Reference — direct REST API usage
• MCP Guide — extend your agent with external tools