{"id":29086545,"url":"https://github.com/tambo-ai/mcp-template","last_synced_at":"2025-10-08T19:23:27.194Z","repository":{"id":293154318,"uuid":"982473190","full_name":"tambo-ai/mcp-template","owner":"tambo-ai","description":"This is a starter NextJS app with tambo-ai for generative UI and MCP.","archived":false,"fork":false,"pushed_at":"2025-06-26T19:55:57.000Z","size":1241,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-26T20:38:26.535Z","etag":null,"topics":["ai","generative","generative-ui","mcp","ui","ux"],"latest_commit_sha":null,"homepage":"https://tambo.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tambo-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T00:08:55.000Z","updated_at":"2025-06-26T19:55:57.000Z","dependencies_parsed_at":"2025-05-14T01:11:54.103Z","dependency_job_id":"fa225115-5c86-479a-8690-e74360223ef7","html_url":"https://github.com/tambo-ai/mcp-template","commit_stats":null,"previous_names":["tambo-ai/mcp-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tambo-ai/mcp-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tambo-ai%2Fmcp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tambo-ai%2Fmcp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tambo-ai%2Fmcp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tambo-ai%2Fmcp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tambo-ai","download_url":"https://codeload.github.com/tambo-ai/mcp-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tambo-ai%2Fmcp-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262356860,"owners_count":23298424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","generative","generative-ui","mcp","ui","ux"],"created_at":"2025-06-28T00:30:27.471Z","updated_at":"2025-10-08T19:23:22.172Z","avatar_url":"https://github.com/tambo-ai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tambo Client-side MCP Template\n\nThis is a starter NextJS app with tambo-ai for generative UI and Client-sideMCP.\n\n[![Watch the tutorial here](https://img.youtube.com/vi/6zDDPfr7Aoo/0.jpg)](https://youtu.be/6zDDPfr7Aoo)\n\n## Get Started\n\n1. Run `npm create-tambo@latest my-tambo-app` for a new project\n\n2. `npm install`\n\n3. `npx tambo init`\n\n- or rename `example.env.local` to `.env.local` and add your tambo API key you can get for free [here](https://tambo.co/dashboard).\n\n4. Run `npm run dev` and go to `localhost:3000` to use the app!\n\n### Configure Client-side Model Context Protocol (MCP) Servers\n\nYou can go to https://localhost:3000/mcp-config to add client-sideMCP servers. These servers are stored in browser localStorage and loaded when the application starts.\n\nFor the demo above we used smithery.ai's [brave-search-mcp](https://smithery.ai/server/@mikechao/brave-search-mcp)\n\n![brave-search-mcp](./brave-search-mcp.png)\n\nYou can use any MCP compatible server that supports SSE or HTTP, but we do not support any server that requires OAuth. For authentication, you can pass custom HTTP headers to the MCP server configuration, or configure server-side authentication at https://tambo.co/dashboard.\n\nOur MCP config page is built using the `@tambo-ai/react/mcp` package:\n\n```tsx\n// In your chat page\n\u003cTamboProvider\n  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}\n  components={components}\n\u003e\n  \u003cTamboMcpProvider mcpServers={mcpServers}\u003e\n    \u003cMessageThreadFull contextKey=\"tambo-template\" /\u003e\n  \u003c/TamboMcpProvider\u003e\n\u003c/TamboProvider\u003e\n```\n\nMCP servers in this example are stored in browser localStorage and loaded on application start. Alternatively, you can store them in a database or fetch them from an API.\n\nFor more detailed documentation, visit [Tambo's official docs](https://tambo.co/docs).\n\n## Customizing\n\n### Change what components tambo can control\n\nYou can see how the `Graph` component is registered with tambo in `src/lib/tambo.ts`:\n\n```tsx\nconst components: TamboComponent[] = [\n  {\n    name: \"Graph\",\n    description:\n      \"A component that renders various types of charts (bar, line, pie) using Recharts. Supports customizable data visualization with labels, datasets, and styling options.\",\n    component: Graph,\n    propsSchema: graphSchema, // zod schema for the component props\n  },\n  // Add more components\n];\n```\n\nYou can find more information about the options [here](https://tambo.co/docs/concepts/registering-components)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftambo-ai%2Fmcp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftambo-ai%2Fmcp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftambo-ai%2Fmcp-template/lists"}