Building real-time, generative UIs for analytics with Tinybird and Thesys

npx create-c1-app web-analytics-agent

cd web-analytics-agent
npm run dev

tb login
tb --cloud deploy --template https://github.com/tinybirdco/web-analytics-starter-kit/tree/main/tinybird

tb --cloud datasource append analytics_events fixtures/analytics_events.ndjson

tb --cloud sql 'select uniq(session_id) from analytics_events'

TINYBIRD_HOST="<https://api.tinybird.co>"
TINYBIRD_TOKEN="YOUR_TINYBIRD_READ_TOKEN"

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
import { RunnableToolFunctionWithParse } from "openai/lib/RunnableFunction";

let mcpClient: Client | null = null;
let mcpTools: RunnableToolFunctionWithParse<Record<string, unknown>>[] = [];

export function getTools() {
   return mcpTools;
}

export async function initializeMCP() {
   // Check to make sure the Tinybird token is available
   if (!process.env.TINYBIRD_TOKEN) {
       console.error('TINYBIRD_TOKEN environment variable not found');
       console.log('Get your token with `tb info ls` and `tb token copy`');
       process.exit(1);
   }

   try {
       // Tinybird remote MCP server URL with token for scoped permissions
       const url = new URL(`https://mcp.tinybird.co?token=${process.env.TINYBIRD_TOKEN}`);

       // Create the transport with a unique session ID
       const transport = new StreamableHTTPClientTransport(url);

       // Create and connect the MCP client
       mcpClient = new Client({
           name: "tinybird-mcp-client",
           version: "1.0.0",
       }, {
           capabilities: {}
       });

       await mcpClient.connect(transport);

       console.log('✅ Connected to Tinybird MCP server');

       // Fetch and list the available tools from the MCP Server
       const toolsList = await mcpClient.listTools();
       console.log('\nAvailable tools:');
       toolsList.tools.forEach(tool => {
           console.log(`  • ${tool.name}`);
       });

       // Convert MCP tools to OpenAI runnable format
       mcpTools = toolsList.tools.map(tool => ({
           type: "function" as const,
           function: {
               name: tool.name,
               description: tool.description || "",
               parse: (input: string) => {
                   return JSON.parse(input);
               },
               parameters: (() => {
                   const schema = tool.inputSchema || {
                       type: "object",
                       properties: {},
                   };
                  
                   // Extract all property keys to add to required array
                   const properties = (schema as Record<string, unknown>).properties as Record<string, unknown> || {};
                   const allKeys = Object.keys(properties);
                  
                   return {
                       ...schema,
                       additionalProperties: false,
                       // Include all property keys in required array (OpenAI strict mode requirement)
                       required: allKeys.length > 0 ? allKeys : undefined,
                   };
               })(),
               function: async (args: Record<string, unknown>) => {
                   console.log(`🔧 Executing MCP tool: ${tool.name}`, args);
                  
                   // Call the MCP tool with the provided arguments
                   const result = await mcpClient!.callTool({
                       name: tool.name,
                       arguments: args,
                   });

                   // MCP tools return content array, extract the text
                   const contentArray = Array.isArray(result.content) ? result.content : [];
                   const content = contentArray
                       .map((item: { type?: string; text?: string }) => {
                           if (item.type === "text" && item.text) {
                               return item.text;
                           }
                           return JSON.stringify(item);
                       })
                       .join("\n");


                   console.log(`✅ Tool result: ${content.substring(0, 200)}...`);
                   return content;
               },
               strict: true,
           },
       }));

       console.log(`📦 Loaded ${mcpTools.length} tools`);
       return toolsList;

   } catch (error) {
       console.error('❌ Failed to connect to Tinybird MCP server:', error.message);
       process.exit(1);
   }
}

// Initialize MCP client when module loads
console.log('Initializing MCP client');
initializeMCP();

import { systemPrompt } from "./systemPrompt";
import { tools } from "./tools";

await initializeMCP();
const tools = getTools();


export async function POST(req: NextRequest) {
  ...
  const llmStream = await client.beta.chat.completions.runTools({
    model: "c1/anthropic/claude-sonnet-4/v-20250915",
    messages: [
      { role: "system", content: systemPrompt },
      ...messages
    ],
    initializeMcp(),
    stream: true,
  });
  ...
}

npm run dev